Установка Amplitude через Google Tag Manager за 20 минут

В жизни случаются разные ситуации. Какие-то из них радостные, какие-то не очень. Мы болеем и выздоравливаем, нанимаемся и увольняемся, женимся и разводимся. Разные ситуации влекут за собой массу разных эмоций. И хотелось бы нам только радости, но…

Пришло время других эмоций. Разочарования, бессилия, апатии и потери веры в себя. Именно эти чувства бурлят у вас внутри не первый день, после того, как вам вдруг стало необходимо установить аналитику от Amplitude на вашу “гениальную” посадочную страницу.

В жизни не может быть только черная полоса. И вот в вашей так же проступил просвет. И он ниже. Небольшая инструкция как быстренько настроить трекинг основных ивентов в Amplitude и Google Analytics через Google Tag Manager для лендинга на Tilda.

Устанавливаем GTM на сайт

К счастью, это довольно просто

В настройках сайта вводим идентификатор вашего контейнера, сохраняем и переопубликовываем страницы

внедрение индентификатора gtm на тильда

При этом Google Analytics не добавляем. Его нужно добавить в теги Google Tag Manager. Делаем это для того, чтобы мы могли сделать одни настройки как для Amplitude так и для Google Analytics.

Получаем код Amplitude

Когда вы создали новый проект, вам выдаст такой код, копируйте его в буфер и идите в Google Tag Manager

код амплитуды для установки на сайте

И теперь добавляем тег в Google Tag Manager с типом Custom HTML и настраиваем триггер “All pages”. Этот триггер показывает, что код будет запущен на всех страницах вашего сайта.

тег амлитуды в gtm

Публикуете версию своего контейнера. Теперь у нас есть основной код амплитуды на страницах. Но нам теперь нужно настроить ивенты которые мы хотим трекать.

Поэтому настраиваем триггеры на основе которых будем вызывать те или иные ивенты.

Триггеры для основных ивентов

Мы будет настраивать ивенты для трех действий, которые нужны для получения адреса почты от посетителя.

1.Посетитель начал заполнять форму с почтой. В моем случае это просто клик на поле для ввода email.

GTM умеет слушать клики по разным элементам на вашей странице. Все что вам нужно – это показать инструменту клик по какому элементу вам нужен в качестве триггера.

Это можно сделать довольно просто.

  • Открываем в Chrome инструменты веб-разработчика.
  • Выбираем иконку для анализа элементов страницы.
  • Кликаем на форму где пользователь вводит email.
  • Копируем класс этого элемента.

смотрим класс элемента формы для ввода почты

И теперь настраиваем триггер в GTM типа Click-All Elements где в условия срабатывания вводим, что клик должен быть на элементе нашего целевого класса.

триггер на начало заполнение формы

2. Посетитель нажал на кнопку для отправки формы. Это будет клик на соответствующую кнопку

Здесь все аналогично клику по форме, только вы смотрите класс этой кнопки.

делаем триггер на кнопку в тильде

триггер на кнопку в gtm

3. Форма была успешно отправлена.

Google Tag Manager имеет встроенную функцию для создания триггеров по успешной отправке формы. Вот пример где вы указываете, что триггер должен срабатывать только при успешной отправке (Check Validation), указываете что не важно на какой странице форма и вставляете id формы (ищете его так же как класс элемента через инструменты веб-разработчика).

Но. На Тильде я сделал по-другому, так как так не получилось 🙂

пример триггера по отправке формы

В вашем GTM перейдите на режим предосмотра

предосмотр в gtm

Перейдите на свой лендинг и сделайте успешное заполнение формы.

Вы увидите что Тильда отдает custom event при отправке формы. Вот на него мы и будем настраивать триггер

кастомный ивент для оптравки формы на тильде

 

триггер на кастомный ивент в gtm

 

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

Настройка ивентов в Amplitude

Здесь все очень просто. Мы просто под каждое событие делаем Custom HTML тег и вставляем туда вот такую строчку, где вписываем название ивента как хотим его передать в амплитуду.

пример вызова тега с ивентов амплитуды

После привязываем это все к уже настроенным триггерам для их запуска.

вызываем тег по триггеру

А как же Google Analytics?

Мы можем (и должны) использовать эти же триггеры для того, чтобы отправлять события в Google Analytics

пример отправки ивента в GA

Только не забудьте при этом насетапить сам основной код Google Analytics с условием срабатывания на всех страницах

ga tag in gtm

 

Вот и все. Теперь проверяйте работоспособность и публикуйте изменения.

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

Надеюсь это поможет десятке будущих маркетологов!

konic

Leave a Reply

Your email address will not be published. Required fields are marked *