Пошаговая инструкция: как отправить данные в Amplitude с помощью Google Tag Manager

Что это

Самая подробная инструкция по передаче событий с сайта в сервис продуктовой аналитики Amplitude с помощью Google Tag Manager.

Инструкция написана аналитиками Adventum, digital-агентства и эксклюзивного партнера Amplitude в России и СНГ.

Для кого

1. Для продакт-менеджеров и аналитиков, которые хотят внедрить Amplitude на сайт,

2. Для разработчиков, которые будут внедрять Amplitude на сайт,

3. Для всех, кто слышал об Amplitude и хочет передавать данные о событиях на сайте в эту систему.

Зачем

Amplitude — платформа продуктовой аналитики, основанная на событиях. С ее помощью вы можете анализировать действия пользователей на сайте, в приложении и улучшать свой продукт.

Чтобы события с сайта быстро попадали в Amplitude, вам поможет Google Tag Manager (GTM) — платформа, которая дает возможность управлять JavaScript и HTML-тегами сайта, настроить сбор данных путем добавления кода GTM.

Если вы ни разу не настраивали передачу событий через эти системы, придется потратить много времени, чтобы разобраться. Поэтому мы создали пошаговую инструкцию, которая поможет продакту и разработчику быстро настроить передачу данных в Amplitude с помощью Google Tag Manager. 

Содержание

1. Создайте аккаунты в Amplitude и GTM
   1.1 Создание проекта в Amplitude
   1.2 Создание проекта в GTM

2. Добавьте код GTM на сайт

3. Добавьте тег для инициализации Amplitude JavaScript SDK

4. Создайте реестр событий и свойств пользователя

5. Три способа настройки GTM для передачи событий в Amplitude
   5.1 Способ №1
   5.2 Способ №2
   5.3 Способ №3

6. Настройте GTM для передачи свойств пользователя

7. Настройте GTM для передачи User ID

8. Проверьте отправку событий и свойств

9. Файлы контейнеров из статьи

1. Создайте аккаунты в Amplitude и GTM

Создание проекта в Amplitude

Если вы до этого еще не передавали данные через эти системы, создайте аккаунты в Amplitude и GTM.

Чтобы создать аккаунт в Amplitude, на главной странице нажмите Explore Product:

Укажите почту для регистрации:

Выберите сферу вашей деятельности:

Укажите имя, название компании и нажмите Explore demo now:

Перейдите в настройки:

И нажмите Create Organization:

Укажите название компании, url и нажмите Create:

Далее можно указать сферу деятельности команды в компании или пропустить этот шаг, нажав на крестик в углу.

Если вы собираете данные от жителей Европейского союза (ЕС), то вам нужно будет заполнить Data Processing Agreement (DPA) — Соглашение о защите персональных данных (в соответствии с правилами Общего регламента по защите данных (GDPR)). 

Если не собираете — нажмите We Don’t Need a DPA:

Теперь добавьте проект. Рекомендуем создавать два проекта: тестовый и основной. Это делается для того, чтобы на тестовом проекте можно было проверить внедряемые события, а затем начать сбор корректных данных на основном аккаунте.

Чтобы создать проект в настройках, перейдите на вкладку Projects и нажмите Create Project:

Введите имя проекта и нажмите Create:

Готово — вы создали проект. Теперь нужно создать проект в Google Tag Manager и приступить к настройке.

Создание проекта в GTM 

Зайдите на главную страницу GTM и нажмите Start for free.

Для входа используйте аккаунт Google или создайте при регистрации, если ранее его не настраивали.

Нажмите Создать аккаунт: 

Введите название аккаунта и выберите страну.

Затем укажите название контейнера, платформу, и нажмите Создать. После этого нужно согласиться с условиями использования Диспетчера тегов Google.

Предварительные действия завершены. Теперь у вас есть аккаунты в Amplitude и GTM. Приступим к настройке передачи событий.

2. Добавьте код GTM на сайт

ID вашего контейнера GTM находится в верхнем правом углу.

Контейнер GTM — это небольшой фрагмент кода на JavaScript, который добавляется на страницы сайта. 

Чтобы внедрить GTM на своем сайте, выполните следующие действия:

1. Скопируйте приведенный ниже код JavaScript, замените GTM-XXXX идентификатором своего контейнера и добавьте код на все страницы сайта как можно ближе к открывающему тегу <head>.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

2. Скопируйте следующий фрагмент и вставьте его на все страницы сайта сразу после открывающего тега <body>, заменив GTM-XXXX идентификатором контейнера.

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

3. Добавьте тег для инициализации Amplitude JavaScript SDK

Для передачи событий будем использовать Amplitude JavaScript SDK. Добавим тег для инициализации SDK.

В Amplitude нужно зайти в Sources & Destinations:

И нажать Add Data Source:

Далее выберите JavaScript SDK и нажмите Next:

Целиком скопируйте код SDK в появившемся окне:

Перейдите в GTM и на главной странице аккаунта нажмите Добавить новый тег:

Сверху укажите название тега: tagAmplitudeSDK. Приписка в начале названия позволит легче находить тег в интерфейсе GTM. 

Нажмите на иконку конфигурации тега:

В появившемся списке выберите Пользовательский HTML:

И вставьте скопированный в Amplitude код JS SDK:

После этого нажмите на иконку триггера: 

И установите триггер All pages, чтобы код SDK инициализировался при загрузке каждой страницы сайта:

Нажмите Сохранить:

❗️ Amplitude периодически дорабатывает JS SDK и публикует новые версии. Не забывайте проверять наличие новых версий SDK и обновлять код в теге, это поможет предотвратить ошибки при передаче данных. Актуальную версию смотрите на странице JavaScript и узнавайте об изменениях в релизах.

Далее нужно добавить:

• тег для отправки событий просмотра страниц, 

• теги для отправки событий и свойств пользователя,

• триггеры (условия, при котором активируются теги),

• переменные (объекты для формирования названий событий и значений свойств). 

Как это сделать, рассказываем ниже.

Чтобы понимать, какие действия пользователя нужно отправлять, рекомендуем составить реестр событий и свойств пользователя.

4. Создайте реестр событий и свойств пользователя

Событие — действие, которое пользователь выполняет в продукте (запускает игру, добавляет товар в корзину) или действие, связанное с пользователем (push-уведомления). 

Перед тем, как вы начнете отправлять события — важно понять, какие события отправлять и записать их в единый реестр. Иначе могут возникнуть проблемы с внедрением: пропущенные события или неправильные названия приведут к тому, что вы не будете видеть полную картину действий пользователя в продукте. Вы не сможете правильно толковать их поведение, строить отчеты, в итоге пропадет доверие к данным и возможность принимать верные решения.

Нужно ли отправлять все действия пользователя? Чаще всего нет, по крайне мере, на первых этапах. Начните с воронок основных процессов в продукте: онбординг, регистрация, покупка.

У Amplitude есть руководство по таксономии событий. В нем описываются принципы нейминга, выбор событий для отслеживания и лучшие практики.

Когда вы решите, какие события отправлять, запишите их в единый реестр. Реестр событий и свойств пользователя поможет быстро понять, какие события будут передаваться, и упростит написание инструкции для разработчиков.

Вариант реестра может выглядеть так:

События:

Свойства пользователя:

Реестр событий может быть оформлен в разном формате. Можно добавить столбцы, которые будут давать дополнительную информацию о событиях и свойствах пользователя. Главное, чтобы реестр был понятным и позволял любому сотруднику, который будет работать с данными, быстро сориентироваться в событиях, которые отправляются в Amplitude.

5. Три способа настройки GTM для передачи событий в Amplitude

Мы описываем 3 способа настройки GTM для передачи событий в Amplitude, выберите подходящий для вашего продукта:

Способ №1 внедряется быстрее остальных, требует меньше работы с GTM. Подойдет, если у событий в вашем продукте немного свойств, и есть быстрый доступ к изменению кода сайта.

Способ №2 позволяет быстро вносить изменение изменения в свойства отправляемых событий через GTM. Подойдет для продуктов с большим количеством свойств, если их значения не содержат массивов.

Способ №3 позволяет передавать значения свойств событий массивами. Подойдет для сложных продуктов.

Способ №1

Уровень данных (dataLayer) хранит и передает информацию с вашего сайта в Google Tag Manager. 

Чтобы отправить данные в dataLayer, используют метод push. 

В этом способе рассмотрим отправку пуша следующего вида:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e1',
        'event_cat': 'registration',
        'event_name': 'success',
        'event_param': {'registration_type': '{{тип регистрации}}'}
    });
</script>

event: 

addEvents_makeConversions — действия в рамках определенной воронки,

addEvents_clickLinks — клики по ссылкам, ведущим на внешний домен,

addEvents_viewErrors — ошибки, 

addEvents_useNavigations — клики по навигационным элементам,

addEvents_makeActions —  все прочие действия.

Для простоты можете делить события на addEvents_makeConversions и addEvents_makeActions.

event_id — идентификатор события согласно инструкции (в примере d-v1-e1: версия инструкции (v - version) 1, номер события (e - event) 1),

event_cat — категория события,

event_name — название события,

event_param —  параметр для передачи свойств.

Согласно реестру событий нам нужно отправлять следующие пуши:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e1',
        'event_cat': 'registration',
        'event_name': 'success',
        'event_param': {'registration_type': '{{тип регистрации}}'}
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e2',
        'event_cat': 'purchase',
        'event_name': 'main_page_view',
        'event_param': ''
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e3',
        'event_cat': 'purchase',
        'event_name': 'item_view',
        'event_param': {
            'item_id': '{{id товара}}',
            'item_price': '{{цена товара}}'
        }
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e4',
        'event_cat': 'purchase',
        'event_name': 'add_to_cart',
        'event_param': {
            'item_id': '{{id товара}}',
            'item_price': '{{цена товара}}'
        }
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e5',
        'event_cat': 'purchase',
        'event_name': 'success',
        'event_param': {
            'purchase_sum': '{{сумма покупки}}',
            'item_amount': '{{количество товаров в покупке}}'
        }
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'event_param': {
            'item_id': '{{id товара}}',
            'item_price': '{{цена товара}}'
        }
    });
</script>

Необходимо, чтобы разработчики внедрили пуши в код сайта так, чтобы они отправлялись при соответствующих действиях пользователей.

Если вы планируете отправлять одно и тоже событие как со свойствами, так и без них, тогда, в случае, если событие отправляется без какого-то свойства, нужно прописывать в пуше значение этого свойства null. Например:

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'event_param': {
            'item_id': null,
            'item_price': '{{цена товара}}'
        }
    });
</script>

Теперь создайте тег, который будет отправлять эти события в Amplitude. Для начала добавьте нужные для тега переменные и триггер.

Для создания триггера в раздел Триггеры и нажмите Создать:

В появившемся окне введите название DL_event_addEvents и нажмите на иконку настроек триггера:

В появившимся списке выберите Пользовательское событие:

Введите в поле Имя события addEvents и поставьте галочку напротив Использовать регулярные выражения. Это позволит GTM определить события, которые вы отправляете в dataLayer (если в параметре event будет содержаться addEvents, то триггер сработает). 

В условиях активации триггера оставьте Все специальные события, нажмите Сохранить, и триггер добавится.

Чтобы создать переменные, зайдите в раздел Переменные и нажмите Создать:

Кликните на иконку конфигурации переменной:

В появившемся окне нажмите Переменная уровня данных (datalayer variables), так как вы будете отправлять события и параметры через dataLayer.push.

Введите имя переменной, используя формат varDL_{{название переменной}}.

В поле Имя переменной уровня данных впишите {{название переменной}}.

Для параметра event_cat переменная будет выглядеть так:

Таким же образом добавляйте остальные параметры:

Добавьте таблицу поиска, которая будет формировать название события: 

• зайдите в раздел Переменные и нажмите Создать. 

• в появившемся окне введите название LT_Amplitude_event, нажмите на иконку конфигурации переменной и в появившемся списке выберите Таблица поиска.

Установите входную переменную {{event}} и добавьте 5 строк. Эта таблица поиска будет определять тип события и составлять название, используя переменную категории (varDL_event_cat) и названия (varDL_event_name). Вам нужно для каждого типа событий добавить строку в таблице поиска:

Чтобы не возникла ошибка при отправке события, если в таблице поиска не найдено соответствующее значение, установите галочку напротив Установить значение по умолчанию и введите значение по умолчанию (not_set). 

Нажмите Сохранить.

Триггер и переменные добавлены. Теперь переходим к созданию тегов.

На вкладке Обзор нажмите Добавить новый тег:

Назовите новый тег tagWA_Amplitude_Events, затем нажмите иконку конфигурации тега и выберите в списке Пользовательский HTML (так же, как делали при добавлении AMPLITUDE JS SDK).

Код состоит из двух функций:

Функция mainTagFunction отправляет события в Amplitude и обнуляет значение event_param в dataLayer. Обнуление нужно потому, что метод push только добавляет данные в dataLayer. Если не обнулить event_param после отправки пуша, в параметры следующего события попадут параметры из предыдущего. Такое еще может произойти, если вы случайно отправите событие без передачи event_param.

Функция amplitudeSdkSearch проверяет, инициализировался ли Amplitude JS SDK. Если SDK инициализирован, вызывается функция mainTagFunction. Если не добавить эту функцию, может произойти такая ситуация: код SDK еще не загрузился, а пуш события уже отправлен, тогда событие не отправится в Amplitude. 

<script>
(function(){
  var amplitudeCounter = 0;

  function mainTagFunction() {
  try {
    amplitude.getInstance().logEvent('{{LT_Amplitude_event}}', {{varDL_event_param}});
    dataLayer.push({'event_param': ''});
  } catch (e) {}
 }
  
  function amplitudeSdkSearch() {
 if (window.amplitude) mainTagFunction();
    else {
      if (amplitudeCounter < 50) {
         setTimeout(amplitudeSdkSearch, 100);
         amplitudeCounter++;
      }
    }
}
   amplitudeSdkSearch();
})();
</script>  

Затем выберите для тега триггер DL_event_addEvents: 

Нажмите Сохранить и тег добавится в контейнер.

Так же добавьте тег tag_Amplitude_SDK.

❗️ Amplitude периодически дорабатывает JS SDK и публикует новые версии. Не забывайте проверять наличие новых версий SDK и обновлять код в теге, это поможет предотвратить ошибки при передаче данных. Актуальную версию смотрите на странице JavaScript и узнавайте об изменениях в релизах.

Настройка GTM завершена.

Недостаток этого метода: если вы хотите внести изменения в передаваемые свойства, например, добавить к событию дополнительное свойство, нужно обращаться к разработчикам. Они дополнят в отправляемом пуше значение event_param, либо в GTM вам нужно будет парсить всю переменную, что не очень удобно.

Если вы хотите передавать свойства событий в другие системы, например, Google Analytics, то понадобится дополнительно настраивать GTM, либо отправлять свойства в dataLayer в другом виде.

Варианты отправки событий, лишенные этих недостатков, будут описаны в способе 2 и 3.

Cпособ №2

Используя данный способ, не получится передавать значения параметров в виде массивов.

Этот способ отправки событий основан на создании переменных уровня данных в GTM для каждого свойства события. Вам понадобится таблица поиска для сопоставления названий событий и их свойств, а код главного тега будет другим.

Рассмотрим отправку пуша‎ следующего вида:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e0',
        'event_cat': 'example',
        'event_name': 'success',
        'property1': 'value1',
        'property2': 'value2'
    });
</script>

Этот пуш отличается от пуша из первого способа тем, что вы передаете свойства события как отдельные пары «ключ-значение», а не в event_param.

Согласно реестру событий необходимо будет отправлять следующие пуши:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e1',
        'event_cat': 'registration',
        'event_name': 'success',
        'registration_type': '{{тип регистрации}}'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e2',
        'event_cat': 'purchase',
        'event_name': 'main_page_view'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e3',
        'event_cat': 'purchase',
        'event_name': 'item_view',
        'item_id': '{{id товара}}',
        'item_price': '{{цена товара}}'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e4',
        'event_cat': 'purchase',
        'event_name': 'add_to_cart',
        'item_id': '{{id товара}}',
        'item_price': '{{цена товара}}'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e5',
        'event_cat': 'purchase',
        'event_name': 'success',
        'purchase_sum': '{{сумма покупки}}',
        'item_amount': '{{количество товаров в покупке}}'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_id': '{{id товара}}',
        'item_price': '{{цена товара}}'
    });
</script>

Необходимо, чтобы разработчики внедрили их в код сайта так, чтобы они отправлялись при соответствующих действиях пользователей.

Если вы планируете отправлять одно и тоже событие как со свойствами, так и без них, тогда, в случае если событие отправляется без какого-то свойства, нужно прописывать в пуше значение этого свойства null. Например:

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_id': null,
        'item_price': '{{цена товара}}'
    });
</script>

Также можно просто не прописывать это свойство в пуше, но тогда нужно при создании переменной для этого свойства в GTM установить значение по умолчанию “”:

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_price': '{{цена товара}}'
    });
</script>

Создайте переменные уровня данных.

Согласно реестру событий, необходимо добавить следующие переменные:

После добавления этих переменных, переходим к созданию таблиц поиска.

Добавьте таблицу поиска LT_Amplitude_event.

После этого добавьте таблицу поиска LT_Amplitude_params, которая будет передавать значения свойств событий. 

В разделе Переменные нажмите Создать, введите название LT_Amplitude_params, выберите тип переменной Таблица поиска. 

Важно изменить входную переменную на {{LT_Amplitude_event}}: таблица будет получать названия событий и передавать соответствующие им свойства. 

Далее добавьте в таблицу строки: 

• в поле Входные данные будут названия событий, 

• в поле Результат будут свойства событий в формате {"название свойства 1": "{{название переменной 1 в gtm}}", "название свойства 2": "{{название переменной 2 в gtm}}"} . Важно использовать именно двойные кавычки (а не как в dataLayer.push одинарные), иначе свойства не будут отправляться. 

Для событий из реестра в таблице поиска LT_Amplitude_params нужно записать следующие значения:

Событие conversionStep_[purchase]_main_page_view не нужно добавлять в эту таблицу, потому что у него нет свойств. 

Поставьте галочку напротив Установить значение по умолчанию и введите значение по умолчанию "" (две двойные кавычки). Так, если в пуше не будет свойств, ошибка при отправке события не возникнет.

Нажмите Сохранить, и таблица поиска добавится в контейнер. 

Далее добавьте триггер DL_event_addEvents:

После этого добавьте тег tag_Amplitude_SDK. 

❗️ Amplitude периодически дорабатывает JS SDK и публикует новые версии. Не забывайте проверять наличие новых версий SDK и обновлять код в теге, это поможет предотвратить ошибки при передаче данных. Актуальную версию смотрите на странице JavaScript и узнавайте об изменениях в релизах.

Тег для отправки событий и свойств будет отличаться от тега из первого способа: добавьте тег с названием tagWA_Amplitude_Events и триггером DL_event_addEvents, выберите тип тега Пользовательский HTML и добавьте этот код: 

<script>
(function(){
  var amplitudeCounter = 0;

function mainTagFunction() {
  try {
    var obj = JSON.parse('{{LT_Amplitude_params}}');
    amplitude.getInstance().logEvent('{{LT_Amplitude_event}}', obj);
  } catch (e) {}
 }
 
function amplitudeSdkSearch() {
 if (window.amplitude) mainTagFunction();
    else {
      if (amplitudeCounter < 50) {
         setTimeout(amplitudeSdkSearch, 100);
         amplitudeCounter++;
      }
    }
}
   amplitudeSdkSearch();
})();

</script>

Он также содержит функцию amplitudeSdkSearch, которая проверяет, инициализировался ли Amplitude JS SDK. 

Внутрь функции mainTagFunction добавлена переменная obj, которая с помощью метода JSON.parse преобразовывает JSON обратно в объект. Это необходимо, потому что таблица поиска в GTM преобразовывает конечное значение в формат строки, а свойства события должны передаваться как объект. Именно из-за этой особенности таблицы поиска, используя второй способ, не получится передавать значения в виде массивов.

Нажмите Сохранить, и тег добавится в контейнер.

Способ №3

Этот способ подразумевает добавление тега с кодом, который будет отправлять событие без обращения к таблице поиска. Таким образом вы сможете передавать массивы в качестве значений свойств.

Пуши в dataLayer отличаются от пушей во втором способе тем, что в значениях свойств нужно будет добавить метод JSON.stringify:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e1',
        'event_cat': 'registration',
        'event_name': 'success',
        'registration_type': JSON.stringify('{{тип регистрации}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e2',
        'event_cat': 'purchase',
        'event_name': 'main_page_view'
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e3',
        'event_cat': 'purchase',
        'event_name': 'item_view',
        'item_id': JSON.stringify('{{id товара}}'),
        'item_price': JSON.stringify('{{цена товара}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e4',
        'event_cat': 'purchase',
        'event_name': 'add_to_cart',
        'item_id': JSON.stringify('{{id товара}}'),
        'item_price': JSON.stringify('{{цена товара}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e5',
        'event_cat': 'purchase',
        'event_name': 'success',
        'purchase_sum': JSON.stringify('{{сумма покупки}}'),
        'item_amount': JSON.stringify('{{количество товаров в покупке}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_id': JSON.stringify('{{id товара}}'),
        'item_price': JSON.stringify('{{цена товара}}')
    });
</script>

Необходимо, чтобы разработчики внедрили их в код сайта так, чтобы они отправлялись при соответствующих действиях пользователей.

Если вы планируете отправлять одно и тоже событие как со свойствами, так и без них, тогда, в случае если событие отправляется без какого-то свойства, нужно прописывать в пуше значение этого свойства null. Например:

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_id': null,
        'item_price': JSON.stringify('{{цена товара}}')
    });
</script>

Также можно просто не прописывать это свойство в пуше, но тогда нужно при создании переменной для этого свойства в GTM установить значение по умолчанию “”:

<script>
    dataLayer.push({
        'event': 'addEvents_makeActions',
        'event_id': 'd-v1-e6',
        'event_cat': 'favorite',
        'event_name': 'add',
        'item_price': JSON.stringify('{{цена товара}}')
    });
</script>

Добавьте следующие переменные:

Затем добавьте таблицу поиска LT_Amplitude_event:

Добавьте триггер DL_event_addEvents:

Добавьте тег tag_Amplitude_SDK.  

❗️ Amplitude периодически дорабатывает JS SDK и публикует новые версии. Не забывайте проверять наличие новых версий SDK и обновлять код в теге, это поможет предотвратить ошибки при передаче данных. Актуальную версию смотрите на странице JavaScript и узнавайте об изменениях в релизах.

Затем добавьте тег для отправки событий tagWA_Amplitude_Events и триггер DL_event_addEvents, выберите тип тега Пользовательский HTML и добавьте код:

<script>
(function(){
  var amplitudeCounter = 0;

function mainTagFunction() {
  try {
    var event_name = '{{LT_Amplitude_event}}';
    if (event_name == 'conversionStep_[registration]_success') {
      amplitude.getInstance().logEvent(event_name, {'registration_type': JSON.parse("{{varDL_registration_type}}")});
    
    } else if (event_name == 'conversionStep_[purchase]_main_page_view') {
       amplitude.getInstance().logEvent(event_name); 
      
    } else if (event_name == 'conversionStep_[purchase]_item_view') {
       amplitude.getInstance().logEvent(event_name, {"item_id": JSON.parse("{{varDL_item_id}}"), "item_price": JSON.parse("{{varDL_item_price}}")});
      
    } else if (event_name == 'conversionStep_[purchase]_add_to_cart') {
       amplitude.getInstance().logEvent(event_name, {"item_id": JSON.parse("{{varDL_item_id}}"), "item_price": JSON.parse("{{varDL_item_price}}")});
      
    } else if (event_name == 'conversionStep_[purchase]_success') {
       amplitude.getInstance().logEvent(event_name, {"purchase_sum": JSON.parse("{{varDL_purchase_sum}}"), "item_amount": JSON.parse("{{varDL_item_amount}}")});
      
    } else if (event_name == 'makeActions_[favorite]_add') {
       amplitude.getInstance().logEvent(event_name, {"item_id": JSON.parse("{{varDL_item_id}}"), "item_price": JSON.parse("{{varDL_item_price}}")});
    }
  } catch (e) {}
 }
 
function amplitudeSdkSearch() {
 if (window.amplitude) mainTagFunction();
    else {
      if (amplitudeCounter < 50) {
         setTimeout(amplitudeSdkSearch, 100);
         amplitudeCounter++;
      }
    }
}
   amplitudeSdkSearch();
})();

</script>

Нажмите Сохранить, и тег добавится в контейнер.

Код содержит функцию amplitudeSdkSearch, которая проверяет, инициализировался ли Amplitude JS SDK. 

А функция mainTagFunction отправляет события со свойствами в Amplitude: он соотносит название события со свойствами, которые нужно передать вместе с этим событием. 

Значения свойств передаются методом JSON.parse, это позволяет отправлять значения в виде массивов. Пример пуша с массивом в значении свойства:

<script>
    dataLayer.push({
        'event': 'addEvents_makeConversions',
        'event_id': 'd-v1-e0',
        'event_cat': 'purchase',
        'event_name': 'example',
        'property1': JSON.stringify(['value1', 'value2', 'value3']),
        'property2': JSON.stringify('value4')
    });
</script>

При этом способе события передаются не через таблицу поиска, а указываются в коде тега tagWA_Amplitude_Events, поэтому необходимо перечислить все события в коде тега, используя else if. Это сделано потому, что если отправлять пуши из способа 3 с тегом из способа 2, то свойства события не будут отправляться, потому что из-за особенности работы таблицы поиска в ней не получиться использовать метод JSON.parse.

Для наглядности код в этом теге записан через else if. Но его можно записать в более лаконичной форме, используя объект JS. 

6. Настройте GTM для передачи свойств пользователя

Отправка User properties 

Для отправки свойств пользователя нужно добавить переменные уровня данных, таблицу поиска и тег.

dataLayer.push будет выглядеть так:

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up1',
        'user_property_name': 'user_property1',
        'user_property1': JSON.stringify('value1')
    });
</script>

Обратите внимание, что значение userpropertyname должно быть таким же, как и название свойства. Метод JSON.stringify в значении свойства нужен, чтобы передавать значения массивами. Вариант пуша с массивом в значении свойства будет выглядеть так:

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up1',
        'user_property_name': 'user_property2',
        'user_property2': JSON.stringify(['value2', 'value3', 'value4'])
    });
</script>

Для нашего реестра событий необходимо будет отправлять следующие пуши:

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up1',
        'user_property_name': 'age',
        'age': JSON.stringify('{{возраст}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up2',
        'user_property_name': 'gender',
        'gender': JSON.stringify('{{пол}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up3',
        'user_property_name': 'favorites_amount',
        'favorites_amount': JSON.stringify('{{количество товаров в избранном}}')
    });
</script>

<script>
    dataLayer.push({
        'event': 'addUserProperties',
        'user_property_id': 'd-v1-up4',
        'user_property_name': 'registration_date',
        'registration_date': JSON.stringify('{{дата регистрации в iso формате}}')
    });
</script>

Необходимо, чтобы разработчики внедрили их в код сайта так, чтобы они отправлялись, когда у пользователя изменяется значение свойства: например, изменилось количество товаров в избранном.

Перейдем в GTM. Начнем с создания переменных — принцип такой же, как у переменных для событий. Согласно реестру нужно добавить следующие переменные:

Добавьте таблицу поиска LT_user_properties_value, которая будет соотносить название свойства пользователя с его значением. 

Установите входную переменную varDL_user_property_name, поставьте галочку напротив Установить значение по умолчанию и оставьте пустое поле. 

Далее добавьте эти строки в таблицу:

Нажмите Сохранить, и переменная добавится. 

Также нужно добавить триггер DL_event_addUserProperties, который будет активировать тег передачи свойств пользователя:

• зайдите в раздел Триггеры и нажмите Создать,

• в появившемся окне введите название DL_event_addUserProperties и нажмите на иконку настроек триггера,

• в списке выберите Пользовательское событие,

• введите в поле Имя события addUserProperties и поставьте галочку напротив Использовать регулярные выражения,

• в условиях активации триггера оставьте Все специальные события и нажмите Сохранить.

Создайте новый тег с названием tagWA_Amplitude_UserProperties, выберите тип Пользовательский HTML, установите триггер DL_event_addUserProperties и добавьте код:

<script>
(function(){
  var amplitudeCounter = 0;
 
function mainTagFunction() {
    var properties_value = JSON.parse('{{LT_user_properties_value}}');
    var identify = new amplitude.Identify().set('{{varDL_user_property_name}}', properties_value);
    amplitude.getInstance().identify(identify);
}
 
  
function amplitudeSdkSearch() {
 if (window.amplitude) mainTagFunction();
    else {
      if (amplitudeCounter < 50) {
         setTimeout(amplitudeSdkSearch, 100);
         amplitudeCounter++;
      }
    }
}
   amplitudeSdkSearch();
})();

</script>

Он также содержит функцию amplitudeSdkSearch, которая проверяет, инициализировался ли Amplitude JS SDK.  

Функция mainTagFunction с помощью метода JSON.parse преобразует JSON обратно в объект, что позволяет передавать значение свойства пользователя в том числе в виде массива. Далее она подставляет название и значение свойства и отправляет его в Amplitude. 

Нажмите Сохранить, и тег добавится в контейнер.

7. Настройте GTM для передачи User ID

Отправка User ID

User ID — это уникальный идентификатор для каждого авторизованного пользователя, который не должен присваиваться анонимным пользователям. Это опциональное свойство пользователя: его не обязательно передавать, но его использование позволяет Amplitude определять переход пользователя между разными платформами (web, iOS, Android) и объединять пользователей (используя Amplitude ID и Device ID), в случае если события были совершены анонимным пользователем, а позже он авторизовался.

Подробнее о принципе объединения пользователей Amplitude. 

User ID не должен изменяться: например, лучше не передавать в качестве user ID адрес электронной почты пользователя, потому что он может изменить его, и тогда в Amplitude он отобразится как новый пользователь.

Для отправки user ID в Amplitude необходимо на каждой странице сайта до основного кода контейнера передавать:

<script>
    dataLayer.push({
        'event': 'setUserId',
        'user_id': 'user_id_value'
    });
</script>
<!-- Код контейнера GTM -->

Соответственно нужно добавить переменную GTM varDL_user_id с именем переменной уровня данных user_id :

Создайте триггер DL_event_setUserId, который будет активировать тег передачи user ID:

• зайдите в раздел Триггеры и нажмите Создать,

• в появившемся окне введите название DL_event_setUserId и нажмите на иконку настроек триггера, 

• в списке выберите Пользовательское событие,

• введите в поле Имя события setUserId и поставьте галочку напротив Использовать регулярные выражения,

• в условиях активации триггера оставьте Все специальные события и нажмите Сохранить.

Создайте новый тег с названием tagWA_Amplitude_User_Id, выберите тип Пользовательский HTML, установите триггер DL_event_setUserId и добавьте код:

<script>
(function(){
  var amplitudeCounter = 0;

function mainTagFunction() {
    amplitude.getInstance().setUserId('{{varDL_user_id}}');
}
 
  
function amplitudeSdkSearch() {
 if (window.amplitude) mainTagFunction();
    else {
      if (amplitudeCounter < 50) {
         setTimeout(amplitudeSdkSearch, 100);
         amplitudeCounter++;
      }
    }
}
   amplitudeSdkSearch();
})();

</script>

Он также содержит функцию amplitudeSdkSearch, которая проверяет, инициализировался ли Amplitude JS SDK.  

Функция mainTagFunction отправляет user ID в Amplitude.

Нажмите Сохранить, и тег добавится в контейнер.

8. Проверьте отправку событий и свойств 

Чтобы проверить правильность отправки события, можно установить расширение для браузера либо посмотреть событие в интерфейсе Amplitude. 

Убедитесь, что событие передается при соответствующем действии пользователя с правильным названием, и в параметры события передаются нужные значения с правильными названиями. 

Рассмотрим работу расширения для браузера Instrumentation Explorer на примере отправки событий при просмотре блога Amplitude. 

Когда пользователь пролистывает страницу статьи из блога, отправляется событие blog: page scrolled. Если нажать на кнопку расширения Instrumentation Explorer, то можно посмотреть название, свойства отправленного события и проверить правильность отправки.

Теперь проверим отправку событий в интерфейсе Amplitude.

В отчете User Look-Up нажмите на поиск:

Нажмите кнопку Advanced: 

Установите режим поиска по User Property IP address:

Узнайте свой IP адрес (например, на сайте https://2ip.ru/), нажмите на кнопку Select value(s)…, введите свой IP адрес, отметьте его галочкой и нажмите Apply:

После этого в поиске отобразится пользователь — это вы в Amplitude. Нажмите на него, и вы перейдете на карточку пользователя, где можно посмотреть пришедшие события.  

В нижней части карточки пользователя можно посмотреть поток выполненных им событий.

Если выбрать одно из событий, вы увидите его параметры:

Здесь вы проверите, что событие отправилось с правильным названием и правильными параметрами.

Иногда при проверке собственных действий система не обнаруживает проблем с передачей событий и параметров. Поэтому после проверки собственных действий, зайдите в отчет Event Segmentation, выберите проверяемое действие и посмотрите его параметры. 

Если вы выберите событие conversionStep_[login]_error и его параметр error, то увидите, что значение Password field is empty параметра error передается неправильно:

Если вы нашли ошибку, нужно ее описать, сделать скриншот и написать разработчикам.

9. Файлы контейнеров из статьи

Если вы захотите изучить контейнеры, на примере которых была написана эта статья, вы можете импортировать их в свой аккаунт GTM. 

Чтобы это сделать, зайдите на вкладку Администрирование и нажмите Импортировать контейнер.

Выберите файл контейнера. Затем выберите Существующую рабочую область — это пространство для работы с контейнером (если проводить аналогию с Google Analytics, можно сравнить ее с представлениями). 

При создании аккаунта GTM по умолчанию добавляет рабочую область Default Workspace — выберите ее для импорта файла контейнера:

Далее поставьте вариант импорта Переименовать конфликтующие теги, триггеры и переменные, чтобы в случае повтора переменных, триггеров или тегов они не удалились:

После этих действий GTM покажет, какие изменения будут внесены. Проверьте и нажмите Подтвердить:

Импорт завершен.

Файлы контейнеров:

Контейнер для первого способа (файл "Способ №1.json"):

- Тег с Amplitude JS SDK

- Тег и триггер для отправки событий

- Переменные

Контейнер для второго способа (файл "Способ №2.json"):

- Тег с Amplitude JS SDK 

- Тег и триггер для отправки событий

- Тег и триггер для отправки свойств пользователя

- Тег и триггер для отправки user ID

- Переменные

Контейнер для третьего способа (файл "Способ №3.json"):

- Тег с Amplitude JS SDK

- Тег и триггер для отправки событий

- Переменные

Используйте удобный способ передачи данных, получайте информацию о поведениях на сайте и развивайте свой продукт. А если возникнут вопросы, пишите в комментариях, и мы поможем.