Как настроить события в Google Tag Manager для сайта услуг

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

Чтобы упростить отслеживание событий и уменьшить необходимость вмешательства в код, был создан Google Tag Manager (GTM). В статье рассмотрю, какие настройки GTM необходимы для сайтов услуг.

1. Зачем нужен GTM.
2. Подготовка к настройке Google Tag Manager.
3. Тег «Клик по номеру телефона».
4. Тег «Клик по соцсетям».
5. Тег «Отслеживание call tracking».
6. Тег «Процент скролла страницы».
7. Тег «Отслеживание Формы».
8. Тег «Отслеживание Формы», альтернативный вариант.

Зачем нужен GTM

Это — продукт Google с удобным интерфейсом, он помогает создавать трекеры на сайте. Эти трекеры передают информацию в сервис, например, Google Analytics 4, где ее легко просмотреть и обработать.

С помощью GTM отслеживаются следующие события на сайте:

• регистрация;
• заполнение форм;
• клики на элементы;
• отслеживать, насколько глубоко пользователь прокручивает сайт сверху вниз;
• анализировать работу коллтрекинга, коллбек на сайте (инструмент «перезвоним за 30 секунд» и т. д.);
• процент просмотра youtube-видео на сайте;
• настраивать события электронной торговли.

Tag Manager только запрашивает информацию без вмешательства в код сайта. Вы можете просмотреть собранную информацию в GA4 или передать в другие сервисы.

По направлениям деятельности площадки условно разделяются на две категории:

• продажа услуг;
• электронная коммерция.

На сайтах услуг обычно нет прямой оплаты — только звонок или заявка. У коммерческих — есть корзина и оплата товаров.

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

Подготовка к настройке Google Tag Manager

Сначала создайте учетную запись GTM:

При создании аккаунта вы получите код, который нужно установить на сайт для доступа к нему Менеджеру Тегов (GTM).

Обратитесь к программисту или выполните инструкции самостоятельно:

Тег «Клик по номеру телефону»

Им отслеживается количество нажатий на номер, добавленный на сайт.

Откройте раздел «Теги», назовите тег и создайте его:

Далее система предложит выбрать тип тега — обычно я выбираю Google Analytics, но доступны и другие сервисы и рекламные системы:

Укажите идентификатор потока данных в GA4 и назовите событие — это названия будет отображаться в отчетах. Пример заполненного тега:

Далее настройте триггер — правило, по которому система будет понимать, когда именно учесть событие. То есть что именно должен сделать на сайте пользователь, чтобы это событие активировалось и отобразилось в отчетах GA4.

Нажмите «Триггеры» — в открывшемся окне сначала кликните на «+» в правом верхнем углу, затем «настроить триггер». Система предложит выбрать тип триггера — вам нужны «только клики». То есть чтобы посчиталось событие клика по номеру, пользователь сайта должен нажать именно на номер.

Должен получиться такой триггер:

Как сделать «tel:» в тригере? Рекомендую сначала самостоятельно выполнить действие на вашем сайте в режиме просмотра. Для этого на главном экране GTM нажмите на «Предварительный просмотр»:

Введите адрес ресурса. На странице сайта выполните действие и возвращайтесь в «Тег Менеджер».

Найдите только что выполненное действие. Откройте меню «Переменные» и ищите подсказки, то есть уникальные элементы, связанные с действием — «Click URL» и «Click Text»:

«Click URL» означает, что под номером на сайте вшита ссылка, на которую вы нажали. «Click Text» — это текст самого номера, на который нажимали.

Именно поэтому при настройке триггера вы указали «Click URL» (могли также указать «Click Text»).

Если выбрать в настройках триггера «Click Text содержит текст номера» — вы отследите клик по тексту определенного номера. Это полезно, если есть разные номера для отслеживания.

Также в режиме предварительного просмотра вы увидите, что и строки «Click Classes» и «Form Classes» также связаны с кликами по номеру.

Настраивая триггер, можете выбрать и настройки «Click Classes содержит link.phone».

После настройки нужно опубликовать изменения на главном экране. Рекомендую до публикации всегда проверять, все ли хорошо. Для этого снова зайдите в режим «Предварительного просмотра» и выполните действие, которое планируете отслеживать. Если тег работает правильно, увидите его название в списке сработавших тегов:

Далее публикуйте изменения, они отправляются прямо на сайт.

Тег «Клик по соцсетям»

Эти события будут отслеживать клики по переходам на соцсети с сайта:

Для каждой из сетей нужно настроить отдельный тег и триггер, чтобы это были разные события в статистике. Я настрою его для YouTube, но настройки для всех ресурсов подобные.

Создаю тег, как для клика на номер, только меняю название события:

Далее необходимо настроить триггер. Для этого ухожу в режим «Предварительный просмотр» и выполняю действие. Теперь ищу «подсказки», на что опираться для построения триггера.

Подойдет «Click URL»:

При настройке вы можете использовать «Click URL» или другую уникальную переменную, которая содержит информацию, необходимую для срабатывания тега.

Настроенный триггер будет выглядеть следующим образом. Он дает команду срабатывать тегу каждый раз, когда пользователь будет нажимать на элементы, внутри которых будет вшитая ссылка с подобной частью «/www.youtube.com/@название канала»:

Перед публикацией тега и триггера проверьте, все ли работает корректно. Через режим предварительного просмотра выполняйте запланированное действие и ищите тег в списке сработавших:

Публикуйте все изменения на сайт.

Принцип настройки кликов по другим соцсетям такой же. Изменится только ссылка, которую вы использовали в «Click URL».

Настройка кликов на почтовый адрес на площадке подобная.

Тег «Отслеживание call tracking»

Многие сайты сейчас используют calltracking — стороннюю систему отслеживания звонков на сайте. Эти системы фиксируют, из каких рекламных кампаний пришел звонок, сохраняют записи звонков, показывают прозрачную аналитику и т.д.

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

Каждая система коллтрекинга имеет свои правила относительно того, как ее связать с сайтом и другими системами. Продемонстрирую на примере коллтрекинга Ringostat. У системы Ringostat есть собственная прямая интеграция с Google Analytics 4.

В этом случае Google Tag Manager не используется, если данные передаются только в GA4. Но когда возникает необходимость отправлять информацию о звонках также в другие рекламные системы — Bing, Meta и т. д. — GTM становится необходимым.

Прямой интеграции с этими сервисами Ringostat не имеет, а значит лучшим способом будет передать данные в Google Tag Manager, а оттуда в другие системы.

Путь такой:

1. Сначала свяжите Ringostat и ресурс с помощью Google Tag Manager.

В аккаунте Ringostat зайдите в раздел, который изображен ниже, скопируйте код:

Далее откройте Google Tag Manager и создайте такие тег и триггер:

Этим тегом вы разместили код Ringostat на каждой странице площадки. Теперь нужно передавать события — звонки.

2. В том же разделе Call Tracking в Ringostat найдите подраздел — Custom JS functions.

Здесь нужно создать событие звонка, которое вы будете передавать в другие сервисы.

Событий звонка предложено несколько:

1. Засчитывать событие, когда пользователь только нажал на звонок и еще никто не поднял трубку.
2. Засчитывать событие, если подняли трубку.
3. Засчитывать событие после окончания звонка.

Название события указывайте свое:

Теперь в аккаунте Ringostat есть статистика по такому событию. Далее событие с помощью Tag Manager нужно передать в Google Analytics.

3. Создайте триггер с названием события, которое создали в системе. Когда в системе будет происходить это событие — это триггер для срабатывания тега:

Добавьте этот триггер в тег для передачи события в Google Analytics:

Сохраните все настройки и тестируйте через режим просмотра до публикации на сайте.

Тег «Процент скролла страницы»

Например, нужно проследить, сколько людей прокручивают сайт меньше 50%.

Сначала создайте тег:

• выберите тип тега — GA4;
• внесите ID потока данных;
• дайте название события для отчетов.

Создайте триггер — выберите его из списка:

Далее отметьте вертикальную прокрутку — большинство сайтов используют именно такое направление. Также указывайте процент скролла и выбирайте параметр «все страницы», если нужно отслеживать прокрутку на всем сайте.

Если вас интересуют конкретные страницы, выбирайте «некоторые страницы» — «Page URL» — укажите ссылку на конкретную страницу:

Далее тестируйте событие через «Режим Просмотра» и публикуйте.

В случае, когда человек зашел на сайт и слишком быстро пролистал всю страницу от начала до конца. Не следует засчитывать такую прокрутку в статистику.

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

Зайдите в триггеры на главном меню, выберите в списке триггер «Таймер» и укажите следующее:

Interval — 10 000 миллисекунд, то есть 10 секунд. Или установите другой интервал.

Limit — количество срабатываний таймера на странице. Например, значение 2 означает, что таймер активируется дважды с интервалом в 10 секунд. Для нашего сценария достаточно одного срабатывания.

В «Page URL» я указала страницу, на которой должен работать таймер.

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

Далее в списке триггеров внизу найдите тип триггера «Trigger Group» и добавьте оба ваших триггера скролла и таймер. Это нужно для того, чтобы два условия работали одновременно:

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

Тег «Отслеживание Формы»

На сайтах вы постоянно видите многообразие форм — записи на какую-то услугу, для получения бесплатной консультации и т. д. Когда вы выбирали триггеры для своих предыдущих событий, могли в списке триггеров увидеть такой желанный «Form Submission»:

Работать с ним очень просто:

• создайте тег, как делали до этого;
• выберите триггер типа «Form Submission».

Если на сайте существует только один тип формы или же вам нужно только общее количество заполнений всех форм по сайту без разделения на их виды — выбирайте «All Forms».

Если нужно отследить конкретную форму из нескольких разных — нажмите «Some Forms». И ведите ссылку на нее в случае, когда форма имеет свой URL адрес, отличающийся от других на сайте:

Если форма не имеет собственной уникальной ссылки, обычно она содержит идентификатор, видимый только в коде сайта.

Чтобы увидеть такой идентификатор, выполните следующие действия:

1. Правой кнопкой мыши нажмите на необходимую форму.
2. Из выпадающего меню выберите «Просмотреть код». Откроется окно с кодом сайта.
3. Найдите идентификатор вашей формы, воспользовавшись командой «Cntr + F» для поиска и введя «form». Смотрите «id» рядом с формой. Дополнительная подсказка — на экране она подсвечивается синим цветом:

4. Скопируйте идентификатор и идите в настройки триггера. Выберите следующие настройки:

5. После сохранения проверьте, работает ли тег в режиме просмотра и публикуйте.

Тег «Отслеживание Формы», альтернативный вариант

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

Покажу способ без «Form Submission», если отслеживание форм не срабатывает.

Выберите форму, в примере это запись на бесплатную консультацию. Создайте тег — его тип GA4 event, ID потока данных — и дайте название ивенту:

Далее создайте триггер «Element Visibility», который отслеживает появление текста, кнопки или другого элемента на экране пользователя:

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

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

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

После триггера выберите CSS-селектор, как у меня:

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

Как найти CSS-селектор

Нажмите правой кнопкой мышки на нужный элемент. Покажу на примере текста после заполнения формы.

Из перечня функций нажмите «Увидеть Код». Далее ведите мышкой по элементам кода, пока на экране не подсветится нужный текст:

Нажмите на него правой кнопкой мыши и выберите следующие настройки:

Внесите скопированный селектор в нужное окошко в настройке триггера кнопками «Ctrl+V». Результат будет иметь следующий вид:

Через режим просмотра выполните действие и проверьте, корректно ли все работает.

Этот триггер полезен для многих событий на сайте. Например, он позволяет фиксировать не только финальный текст после заполнения формы, но и момент открытия пользователем формы с полями для ввода.

Создав события «form_start» и «form_complete», вы определите количество пользователей, которые дошли до заполнения формы. Низкий процент может свидетельствовать о неудобном интерфейсе, слишком длинной или непонятной форме, требующей оптимизации.

Все это реализуется через триггер Element Visibility, вставив как CSS-селектор элемент всей открытой формы для события «form_start». Для «form_complete» вместо такового можно использовать финальный текст.

Google Tag Manager— это мощный инструмент, который позволяет не только отслеживать события, но и считывать данные и даже изменять элементы сайта. Его возможности особенно полезны для владельцев ecommerce, но требуют осторожного использования, контроля доступов и глубоких знаний.

Выводы

GTM — универсальный инструмент для сайтов всех типов, помогающий лучше понимать поведение пользователей и на основе полученных данных улучшать бизнес-процессы.

Учтите важные моменты работы:

1. Правильная интеграция — после создания контейнера GTM его код нужно установить на сайт. Это единственный момент, когда может понадобиться помощь программиста для базовой настройки.
2. Проверка настроек — каждый созданный тег нужно тестировать в «Режиме Просмотра», чтобы убедиться, что он работает корректно.
3. Контроль доступов — Google Tag Manager предоставляет прямой доступ к сайту, поэтому важно контролировать, кто имеет права на редактирование и внедрение изменений.
4. Передача данных — GTM собирает информацию, но не анализирует ее. Полученные данные передаются в Google Analytics 4, Meta, Bing и другие аналитические и рекламные платформы.
5. Гибкость интеграции — Google Tag Manager помогает связать сайт с различными сервисами и автоматизировать отслеживание ключевых событий.

Перечисленные теги — основа базовых возможностей GTM, которые помогают значительно улучшить аналитику сайта:

• «Клик по номеру телефона»;
• «Клик по соцсетям»;
• «Процент скролла»;
• «Отслеживание Формы»;
• «Отслеживание Формы», альтернативный вариант.