Привет, друзья! На связи Евгений Тридчиков, и сегодня я расскажу, как можно отслеживать взаимодействия с кнопками в Zero Block на платформе Тильда. А в конце я познакомлю вас с мудаком, благодаря которому появилось это видео.
Виртуальные страницы для готовых блоков
Как вы уже знаете, некоторые готовые блоки Тильды позволяют отслеживать взаимодействия с кнопками и формами по умолчанию. Взять, к примеру, обложку CR12.
В настройках вы можете поставить галочки, и при клике по кнопкам в системы веб-аналитики будут отправлять виртуальные страницы. Вам останется лишь настроить цели на них.
Но не все готовые блоки с призывом к действию умеют так делать. Это касается и Zero Block. Если вы работаете в Зеро Блоке с элементом Форма, то вы могли заметить, что она по умолчанию отправляет виртуальные страницы.
Отслеживаем кнопки в Zero Block
Но как быть с кнопками? Если их несколько и они одинаковые, то стандартными средствами Google Tag Manager их поймать не получится. Поэтому вы можете использовать такой прием.
Находим кнопку
Для начала воспользуемся методом querySelectorAll, который ищет по селектору и возвращает все найденные элементы в виде списка. Как видите, в нашем случае список состоит из двух элементов.
document.querySelectorAll(‘button’)[1] Элемент с индексом 0 – это первая кнопка, которая попадается в дереве документа, то есть с начала страницы. Элемент с индексом 1 – это следующая кнопка. Чтобы обратиться к конкретной кнопке, нужно указать ее индекс.
Добавляем нужные действия
Окей, перемещаемся в Диспетчер тегов и создаем тег типа Пользовательский HTML. Вставляем небольшой кусочек кода и давайте разберем его.
В первой строчке мы находим первую кнопку, и сохраняем в переменную. Затем обращаемся к ней с помощью атрибута onclick. Благодаря нему мы можем добавить необходимые нам действия в момент клика по кнопке.
Как вы уже догадались, здесь мы добавляем вывод в консоль и пару переменных на уровень данных. Сохраняем тег, накидываем триггер Окно загружено (с триггером модель дом готова у меня почему-то не срабатывало) и включаем режим превью.
Отслеживаем несколько кнопок
Обновим страницу и проверим кнопку. Как видите, консоль улыбается нам, а в дебаггере Диспетчера тегов появилось нужное нам событие и переменная eventAction.
Чтобы отслеживать таким образом вторую и последующие кнопки вы можете просто скопировать код, заменив индекс и значения переменных для следующей кнопки.
Согласен, изящно не выглядит, но для данной задачи подходит. Если будут комментарии по этому поводу, пишите – с радостью поучусь у вас.
Ну а дальше вы уже знаете. Создавайте триггер типа Пользовательское событие с именем button и используйте его для ваших тегов. Переменная eventAction выступает как макрос, которая передает номер кнопки.
С вами был Евгений Тридчиков и я желаю вам великолепного дня!