Как настроить и работать через GTM

Как настроить и работать через GTM на примере работы с Snapchat

Подключение Snap Pixel

Добавление шаблона Snap Pixel

Для начала перейдём на страницу с уже созданным тегом и зайдем в раздел Шаблоны

На странице Шаблоны в блоке Шаблоны тегов нажимаем Поиск в галерее

В открывшемся окне нажимаем на иконку поиска

В поле поиска вставляем Snap Pixel и нажимаем на блок, который показал поиск

Далее нажимаем на кнопку Добавить в рабочую область

Далее соглашаемся с тем, что спрашивает GTM и нажимаем кнопку добавить

Настройки шаблона Snap Pixel

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

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

В поле Значение вставляем ID пикселя и нажимаем сохранить

для лучшего понимания что это за константа, можно назвать её GTM Snap Pixel ID.

Настройка тега.*

Переходим в раздел Теги и нажимаем Создать

Нажимаем Конфигурация тега, листаем до Пользовательские и выбираем Snap Pixel

В открывшемся окне нажимаем на Pixel ID

В открывшемся окне выбираем ранее созданную нами переменную с ID пикселя.

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

Листаем ниже и нажимаем на Триггеры
Далее выбираем All pages

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

Добавление события на кнопку

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

В открывшемся окне нажимаем на Настройки триггера, листаем до блока Клик и выбираем Все элементы

В открывшемся окне выбираем Некоторые клики

В первом селекте выбираем Click Element, если такого пункта нет, то нажимаем на селект и выбираем Выбрать встроенную переменную и из открывшегося списка выбрать Click Element
Во втором селекте выбираем “соответствует селектору CSS”
В третье поле пишем селектор (селектор кнопки можно посмотреть через DevTools)
если есть класс - селектор будет с точкой, например .callBtn (как на скрине ниже)
если есть id - то будет с решёткой, например #callBtn