Трекинг ивентов событий из Google Tag Manager в Amplitude

Чаще всего я сталкиваюсь с задачей настройки веб-аналитики в Яндекс Метрике и Гугл Аналитикс. Но бывают случаи, когда используют другие сервисы веб-аналитики. Например, Амплитуда — мощнейший сервис для получения данных. Поэтому я сделал инструкцию для настройки отправки событий из dataLayer сайта через Google Tag Manager в Amplitude. Поехали.

Сначала нам нужно установить на сайте сам счётчик сервиса Amplitude. Для этого установим код счётчика через Google Tag Manager (GTM), используя пользовательский HTML-тег. Пример кода и настройка включают несколько этапов:

Шаг 1: Создание тега Amplitude в Google Tag Manager

1. В Google Tag Manager создайте новый тег, выбрав “Пользовательский HTML”.
2. Вставьте следующий код, заменив YOUR_API_KEY на ваш API-ключ из Amplitude:

   <script>
       (function(e, t) {
           var n = e.amplitude || { _q: [], _iq: {} };
           var r = t.createElement("script");
           r.type = "text/javascript";
           r.async = true;
           r.src = "https://cdn.amplitude.com/libs/amplitude-7.2.1-min.gz.js";
           r.onload = function() {
               if (!e.amplitude.runQueuedFunctions) {
                   console.log("[Amplitude] Error: could not load SDK");
               }
           };
           var i = t.getElementsByTagName("script")[0];
           i.parentNode.insertBefore(r, i);
           function s(e) {
               return function() {
                   e._q.push([e].concat(Array.prototype.slice.call(arguments, 0)));
               };
           }
           var o = [
               "add",
               "append",
               "clearAll",
               "prepend",
               "set",
               "setOnce",
               "unset",
               "clear",
               "delete",
               "identify",
           ];
           for (var c = 0; c < o.length; c++) {
               n[o[c]] = s(o[c]);
           }
           e.amplitude = n;
           e.amplitude.getInstance().init("YOUR_API_KEY");
       })(window, document);
   </script>

3. Сохраните тег, установив триггер на “All Pages”, чтобы SDK загружался на всех страницах.

Шаг 2: Создание события для Amplitude

1. Создайте новый пользовательский HTML-тег в GTM для отправки события.
2. Вставьте код, заменив "EventName" на название события, которое нужно отслеживать, и добавив нужные параметры, где применимо:

   <script>
       amplitude.getInstance().logEvent("EventName", {
           "parameter1": "{{GTM Variable}}",
           "parameter2": "static_value"
       });
   </script>

3. Укажите триггер для этого тега. Например, чтобы отслеживать клик по кнопке, создайте триггер для события “Click” и выберите нужный элемент.

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

Шаг 3: Тестирование

1. Используйте Предварительный просмотр в Google Tag Manager для тестирования.
2. В интерфейсе Amplitude проверьте, что событие регистрируется в режиме реального времени.

В самой Амплитуде отработка события будет выглядеть таким образом.

Примечание

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