Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда

Привет, друзья! На связи Евгений Тридчиков, и сегодня я расскажу, как можно отслеживать взаимодействия с кнопками в Zero Block на платформе Тильда. А в конце я познакомлю вас с мудаком, благодаря которому появилось это видео.

Виртуальные страницы для готовых блоков

Как вы уже знаете, некоторые готовые блоки Тильды позволяют отслеживать взаимодействия с кнопками и формами по умолчанию. Взять, к примеру, обложку CR12.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Готовый блок

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

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Зеро Блок

Но не все готовые блоки с призывом к действию умеют так делать. Это касается и Zero Block. Если вы работаете в Зеро Блоке с элементом Форма, то вы могли заметить, что она по умолчанию отправляет виртуальные страницы.

Отслеживаем кнопки в Zero Block

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

Находим кнопку

Для начала воспользуемся методом querySelectorAll, который ищет по селектору и возвращает все найденные элементы в виде списка. Как видите, в нашем случае список состоит из двух элементов.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
document.querySelectorAll(‘button’)[1]
Элемент с индексом 0 – это первая кнопка, которая попадается в дереве документа, то есть с начала страницы. Элемент с индексом 1 – это следующая кнопка. Чтобы обратиться к конкретной кнопке, нужно указать ее индекс.

Добавляем нужные действия

Окей, перемещаемся в Диспетчер тегов и создаем тег типа Пользовательский HTML. Вставляем небольшой кусочек кода и давайте разберем его.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Вот и тег

В первой строчке мы находим первую кнопку, и сохраняем в переменную. Затем обращаемся к ней с помощью атрибута onclick. Благодаря нему мы можем добавить необходимые нам действия в момент клика по кнопке.

Как вы уже догадались, здесь мы добавляем вывод в консоль и пару переменных на уровень данных. Сохраняем тег, накидываем триггер Окно загружено (с триггером модель дом готова у меня почему-то не срабатывало) и включаем режим превью.

Отслеживаем несколько кнопок

Обновим страницу и проверим кнопку. Как видите, консоль улыбается нам, а в дебаггере Диспетчера тегов появилось нужное нам событие и переменная eventAction.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Птичка в клетке

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

Согласен, изящно не выглядит, но для данной задачи подходит. Если будут комментарии по этому поводу, пишите – с радостью поучусь у вас.

Ну а дальше вы уже знаете. Создавайте триггер типа Пользовательское событие с именем button и используйте его для ваших тегов. Переменная eventAction выступает как макрос, которая передает номер кнопки.

Поблагодарим Антошу?

Ну и напоследок предлагаю поблагодарить Антошу, потому что если бы не он – то этого видео не было. Дело в том, что Антоша поступил плохо – он кинул меня. Мы договорились с ним на настройку целей для данного проекта.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Антоша

Посмотрите, какой красивый сайт. Ммммм, Антоша просто кудесник Тильды. В итоге я помог разобраться не с одним счетчиком, а двумя, а он стал сливаться на какого-то гендиректора, что нужно ждать и так далее. Уже закрыл мне доступ в Диспетчер тегов, поэтому и демонстрацию я проводил на другом ресурсе.

Меня кинули! Но мы все равно трекаем кнопки в Zero Block на Тильда
Ирония судьбы

А вот к Метрике почему-то забыл. Поэтому пока этот петух не заметил, давайте удалим наши старания. Вот такая вот ирония, друзья. Встретите Антошу, дайте ему леща от меня по-братски.

Смотреть видео

С вами был Евгений Тридчиков, и не смотря на малыша Антошу, я желаю вам великолепного дня!

Рейтинг
( 2 оценки, среднее 5 из 5 )
Евгений Тридчиков/ автор статьи
Загрузка ...
CONTEXT-KILL.BY