Как фиксировать события в Google Tag Manager 2.0

Google Tag Manager

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

В прошлом материале я описал некоторые обновления в Google Tag Manager. Сегодня предлагаю рассмотреть типичную ситуацию – фиксацию кликов.

На самом деле все достаточно просто, однако немного отличается от ранее используемой схемы. Напомню, в первой версии Google Tag Manager при настройке для фиксации событий использовались стандартные теги прослушивания событий и при их выполнении макрос {{event}} принимал одно из стандартных значений, например, gtm.click.

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

Рассмотрим несколько примеров:

  • клик по элементу, с указанным идентификатором;
  • клик по ссылке, которая уводит посетителя с сайта.

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

Посмотрим на фрагмент исходного кода страницы сайта:

Пример кода страницы

Пример кода страницы

Для работы нам понадобятся стандартные переменные, которые по умолчанию отключены. Перейдем к списку переменных:

Переход к переменным

Переход к переменным

И укажем те из них, которые понадобятся нам:

Переменные по умолчанию в Google Tag Manager

Переменные по умолчанию в Google Tag Manager

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

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

Первый пример: клик по элементу, с указанным идентификатором.

Перейдем к созданию нового тега:

Меню работы с тегом

Меню работы с тегом

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

Создание нового тега

Создание нового тега

Нажимаем синюю кнопку – продолжить. На втором этапе нам предлагают указать, при каких условиях будет активирован тег. Ранее такие условия назывались правилами, теперь это триггеры.

Создадим нужный нам триггер. Т.к. мы фиксируем клик, то тип события указываем как Click:

Создание триггера в Google Tag Manager

Создание триггера в Google Tag Manager

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

На втором шаге нам предлагают выбрать один из вариантов – это все клики или использовать фильтр. Нам нужно фиксировать клик только по определенному элементу, по этому выбираем Some Clicks:

Выбор типа клика

Выбор типа клика

После этого нам предлагают указать условия. Вернемся к исходному коду страницы и посмотрим, что нас интересует элемент, у которого ID равен demo_id. Укажем это условие:

Условие клика по определенному элементу с id

Условие клика по определенному элементу с id

Первое поле – стандартная переменная, второе – условие сопоставление, третье – шаблон для сопоставления.

Нажимаем синюю кнопку Продолжить и завершаем создание триггера. Т.к. нам нужен клик по элементу, который не является ссылкой, выбираем тип триггера Click, в поле Название – указываем понятное название триггера:

Завершение создания триггера

Завершение создания триггера

Сохраняем выполненные настройки и возвращаемся к форме настройки тега. Теперь необходимо указать содержимое тега:

Содержимое тега

Содержимое тега

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

Список тегов в Google Tag Manager

Список тегов в Google Tag Manager

Теперь проверим работу наших настроек, перейдем в режим просмотра версии контейнера.

Режим просмотра в Google Tag Manager

Режим просмотра в Google Tag Manager

В новой версии Google Tag Manager в режиме просмотра активируется режим отладчика, дополнительных инструментов нам не понадобится. Проверяем:

Результат настройки Google Tag Manager

Результат настройки Google Tag Manager

Работает, как нужно, посмотрим в отладчике:

Информация в отладчике Google Tag Manager

Информация в отладчике Google Tag Manager

Проверим через отладчик активацию тега:

Активация тега в отладчике

Активация тега в отладчике

Вывод – выполненная настройка работает, мы фиксируем клик по нужному нам элементу.

Второй пример: клик по ссылке, которая уводит посетителя с сайта.

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

Итак, вы дошли до этапа создания триггера, выбрали тип Click и находитесь на втором этапе создания триггера:

Второй этап создания триггера Google Tag Manager

Второй этап создания триггера Google Tag Manager

Выберите Some Clicks и в условиях укажите, что URL элемента по которому выполнен клик не должен содержать имя вашего домена, пример:

Переход с сайта prometriki.ru

Переход с сайта prometriki.ru

На следующем шаге укажите тип триггера как Link Click, и задайте дополнительное правило:

Дополнительное правило активации

Дополнительное правило активации

после чего можно проверить работу триггера.

Смотрим информацию в отладчике:

Активация тега по клику на ссылке

Активация тега по клику на ссылке

Клик по ссылке в отладчике

Клик по ссылке в отладчике

Приведенным примеры демонстрирую работу по фиксации кликов в новой версии Google Tag Manager.

Не уверен, что подобное может быть у вас, но у меня фиксация кликов в новой версии Google Tag Manager не работала на сайте, где установлена первая версия. Код первой версии шел выше кода новой, вероятно это замечание будет кому-то полезно.

Не забывайте нажать кнопку любой социальной сети ниже поста!

Еженедельная рассылка кейсов!