Как настроить отслеживание кликов по кнопкам с помощью Google Tag Manager

Умение работать с Google Tag Manager (GTM) — must-have для каждого интернет-маркетолога, ведь это позволяет сэкономить драгоценное время на написание технического задания и ожидание его реализации разработчиками.
Базовый навык, с которого можно начать работу в GTM, — настройка отслеживания кликов по кнопкам.

В статье — пошаговый план из пяти этапов, который поможет все правильно реализовать.

Настройка отслеживания клика по кнопкке

Важное замечание перед началом настройки: сам по себе факт клика не стоит считать ключевой целью на сайте, вокруг которой можно строить маркетинговую стратегию и принимать решения о дальнейшем перераспределении бюджета. Однако он может служить вспомогательным фактором при анализе поведения пользователя на сайте на пути к основной цели (покупке, отправке формы).

Этап 1. Включите встроенные переменные

Прежде чем отслеживать клики по любой кнопке, нужно включить встроенные переменные типа «Клики». Это позволит в дальнейшем выбрать правильные условия для триггера активации, а также они понадобятся при настройке тегов.

Чтобы настроить встроенные переменные, перейдите в раздел «Переменные» и нажмите «Настроить». В открывшемся окне установите галочки напротив всех доступных переменных в разделе «Клики».

Этап 2. Создайте вспомогательный триггер

В контейнере GTM существует два типа триггеров для отслеживания кликов: «Все элементы» и «Только ссылки».

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

Подробнее о создании обоих тегов — в следующем разделе.

Для настройки отслеживания клика по кнопке необходимо знать её уникальный идентификатор.

Этап 3. Определите уникальный идентификатор кнопки

Среди основных типов идентификаторов:

• Id;
• сlass;
• name.

Чтобы определить его:

1. Откройте в браузере страницу, где находится кнопка, которую нужно отследить.
2. Кликните по ней правой кнопкой мыши и выберите пункт «Посмотреть код» или «Инспектировать элемент» — в зависимости от операционной системы и типа браузера.
3. Появится код сайта с подсвеченным элементом, который соответствует кнопке. Левой кнопкой мыши выделите кнопку, которую хотите отследить. Подсвеченная строка в коде страницы — это и есть уникальный идентификатор вашей кнопки.

Альтернативный способ определения уникального идентификатора кнопки на сайте — вспомогательный триггер «Клик — Все элементы». Он служит помощником, но не понадобится для настройки тега.

Чтобы включить триггер:

1. Перейдите в раздел «Триггеры» и создайте триггер типа «Клик — Все элементы» (Click — All elements). В качестве условия срабатывания выберите «Все клики», поскольку важно зафиксировать все клики и определить уникальные идентификаторы кнопки, которую вы хотите отследить.

2. Сохраните триггер и активируйте режим «Предварительного просмотра».
3. Перейдите на сайт и нажмите на кнопку, которую планируете отслеживать. Посмотрите значения переменных, которые были активированы на первом этапе. Для этого в левой боковой панели «Шкала событий» нажмите на событие «Клик» (Click), затем — на вкладку «Переменные» (Variables). Здесь вы увидите, какие значения приняли переменные.

Кнопка имеет идентификатор элемента (Click ID) и класс (Click Classes). Эта информация понадобится при настройке дополнительных условий срабатывания триггера.

Как определить уникальный идентификатор

Алгоритм следующий:

1. Если у элемента есть ID, тогда в качестве условия срабатывания триггера можно использовать Click ID — «равен» или «содержит».

2. Если у элемента есть Class, тогда условием срабатывания триггера будет Click Classes — «равен» или «содержит».

3. Если ни одного из этих элементов нет, выбирайте: Click Element — «соответствует CSS-селектору».

Этот вариант требует более глубоких знаний о том, что такое CSS-селектор, поэтому в статье я его не рассматриваю.

Этап 4. Настройте триггер и создайте для него тег

Для этого:

1. Перейдите в контейнере в раздел «Триггеры».
2. Нажмите «Создать» и выберите тип триггера — «Клик — Все элементы». На этот раз в разделе «Срабатывание триггера» выберите «Некоторые клики».

3. В поле для выбора дополнительных условий срабатывания триггера укажите: Click ID — содержит — vin-submit.

4. Сохраните настройки и перейдите в раздел «Теги».
5. В правом верхнем углу нажмите «Создать.

6. Выберите тип тега «Событие Google Analytics 4». 

В настройках тега:

1. Переименуйте тег.
2. Добавьте идентификатор счетчика — это идентификатор Google Analytics, тег которого уже установлен на сайте и настроен в вашем GTM-контейнере.

3. Добавьте название события. Учитывайте, что оно будет отображаться в разделе «События» в ресурсе GA4. При выборе названия нового события придерживайтесь следующих правил:

• в названиях учитывается регистр (my_event и My_Event — это разные события);
• названия могут содержать слова и буквы на английском и других языках;
• не используйте зарезервированные префиксы и названия событий (подробнее — в справке Google);
• название должно начинаться с буквы — используйте только буквы, цифры и символ подчеркивания, не используйте пробелы.

7. В качестве триггера выберите настроенный в начале этапа 4 триггер «Клик на кнопку Отследить». Нажмите «Сохранить».

Этап 5. Проверьте настройки

Чтобы это сделать:

1. Активируйте режим предварительного просмотра. 

2. На сайте, который автоматически откроется в режиме предварительного просмотра, нажмите на кнопку, отслеживание которой вы настроили.
3. Вернитесь к шкале событий и выберите событие «Клик».
4. Если в разделе «Теги» вы увидите, что тег активировался — значит, все сделано правильно.

5. Можно опубликовать контейнер. Нажмите «Отправить» и все изменения опубликуются.

Отслеживание клика по кнопке-ссылке

Рассмотрю вариант, когда нужно отследить клик по кнопке-ссылке.

1. Вернитесь к вспомогательному триггеру, который вы создали на втором этапе.
2. Включите режим предварительного просмотра и кликните на кнопку, например, ссылку на социальные сети.

3. Перейдите к шкале событий и выберите пункт «Клик по ссылке». Найдите переменную Click URL и значение, которое она приняла. Это значение нужно использовать как условие срабатывания триггера. 

Процесс настройки триггера «Клик по ссылке» включает те же шаги, что и для предыдущего типа триггера. Разница в том, что в поле «Тип триггера» выберите «Клик — Только ссылки», а в качестве условия срабатывания триггера укажите: Click URL содержит ‘адрес ссылки’.

Перейдите к этапу 4 — созданию тега. В качестве триггера выберите только что созданный «Клик по ссылке». Затем выполните этап 5 — проверьте настройки в режиме предварительного просмотра. Если все работает корректно — публикуйте контейнер.

Выводы

Навыки работы с Google Tag Manager помогут самостоятельно настраивать отслеживание событий без привлечения разработчиков.

1. Включите встроенные переменные типа «Клики».
2. Создайте вспомогательный триггер.
3. Определите уникальный идентификатор кнопки.
4. Настройте триггер с этим идентификатором и создайте тег с соответствующим названием.
5. Проверьте настройки в режиме предварительного просмотра.
6. Опубликуйте GTM-контейнер.

Это обновленная версия статьи. Первая версия была опубликована 07.10.2019 и ее автором был Олег Дудко.