Ростислав Павлуша

Для оценки эффективности работы сайта необходимо отслеживать множество параметров. К счастью, сервис Google Tag Manager позволяет настраивать отслеживание событий без внесения изменений в код сайта. Рассмотрим самый простой вариант отслеживания событий – клик по определенной кнопке.

4.9/5 - (65 голосов)

Содержание

  1. Находим идентификатор элемента
  2. Создаем триггер в GTM
  3. Создание нового тега
  4. Настраиваем цель для Яндекс Директ
  5. Проверка цели

 

Находим идентификатор элемента

 

Для начала нам надо определить идентификатор кнопки, сделать это можно открыв код сайта кнопкой «F12» (на ноутбуках может понадобиться нажать комбинацию «Fn+F12»). Откроется меню разработчика. В зависимости от настроек оно может располагаться внизу или сбоку страницы.

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-1

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

 

Создаем триггер в GTM

 

В интерфейсе GTM нам нужно создать «Триггер» — событие на сайте, которое запустит нужную нам цепочку действий. В нашем случае это клик на выбранную кнопку.

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-2

В создании триггера выбираем: «Клик» — «Все элементы» и «Некоторые клики». 

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-3

В поле Click Classes —  call-one-click-btn это идентификатор кнопки который мы определяли в самом начале. 

 

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

 

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-4

Переходим на вкладку «Теги» и создаем новый Тег.

Для Google Ads указываем названия тэга, выбираем тип и заполняем поля: 

  • «Категория» — задаем значение one_click.
  • «Действие»  — задаем значение Send.
Настройка цели на нажатие кнопки через Google Tag Manager - изображение-5

В «Триггеры» добавляем ранее созданный нами триггер по клику на кнопку и сохраняем. 

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-6

Аналогичную цель событие нужно настроить в Google Analytics.

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-7

 

Настраиваем цель для Яндекс Директ

 

Для настройки аналогичной цели в Яндекс Директе в настройках «Конфигурации тегов» выбираем «Пользовательский HTML».

В окне HTML вставляем скрипт с номером Метрики и названием идентификатора, который может быть произвольным, в данном случае это one_click.

Так же добавляем ранее созданный нами триггер и сохраняем.

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-8
Настройка цели на нажатие кнопки через Google Tag Manager - изображение-9

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

 

Проверка цели

 

Далее переходим к проверке цели, используем предварительный просмотр: 

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-10

Открываем наш сайт, и производим тестовую отправку формы:

Настройка цели на нажатие кнопки через Google Tag Manager - изображение-11

Как видим обе цели сработали, дополнительно стоит перепроверить срабатывания целей через Яндекс Метрика и Google Analytics.