Начинаем серию сугубо технических постов: ёмко и без воды

Прошу прощения за долгий перерыв — в декабре надо было перезарядить батарейки, а в короткий рабочий январь как следует поработать, чтобы закрыть все пробелы. Да-да, я работаю только по рабочим дням и, как правило, с 9 до 17. Баланс личной жизни: семья, хобби, спорт и рабочей: клиенты, проекты, блог никто не отменял.

Итак, продолжим копаться в настройках Google Tag Manager. Сегодня распишу, как отслеживать самые попсовые события, которые необходимы абсолютно всем, чтобы минимально понимать, что происходит на вашем сайте, и в правильном ли направлении вы движетесь.

Отслеживание кликов в GTM

Итак, что мы можем отслеживать на сайте? Клики! Клики по ссылкам, баннерам, кнопкам, телефонам, пунктам меню, любому тексту. В итоге все вышеперечисленное — это клики по определенной области на сайте.

Область на сайте можно идентифицировать с помощью HTML-тегов (a href в случае ссылки) и их атрибутов (ID, class, адрес ссылки, target).

Ближе к делу. Сначала надо проверить, настроена ли в GTM работа с кликами. Клики — это объекты, с которыми мы будем работать. Как мы помним из прошлой серии, настройка объектов происходит через переменные. Заходим в Google Tag Manager, жмем “Переменные” — “Настроить”.

gtm отслеживание событий 1

Мотаем появившийся список вниз и ищем раздел “Клики”

события google tag manager

Пробежимся по разновидностям кликов, с которыми работаю именно я. Этого хватит с лихвой для 95% проектов. Для всего остального добро пожаловать в документацию и на нудные тематические блоги. Я против “воды” и нудятины, поэтому вперед!

Выбираем:

  • Click Classes (клики по объектам, обернутыми в определенный class, будь то ссылка A HREF, абзац P или вовсе контейнер DIV)
  • Click URL (клик по ссылке с определенным адресом внутри HREF=” “)
  • Click Text (клик по заданному тексту. Искомый текст указывается с помощью простых условий или регулярных выражений)

Достаточно. Закрываем любым удобным способом окно. Проверяем, что наши клики появились в списке встроенных переменных.

события google tag manager 3

Давайте отследим клики по ссылкам, которые ведут на страницу “best-banner-for-my-site”. Это может быть как баннер или пункт меню на каждой странице, так и одна грустная ссылка на одной из страниц сайта. Неважно. Давайте отслеживать все клики по ней.

На самом деле даже необязательно знать, где эти ссылки находятся на сайте. Таким образом, можно отслеживать и находить страницы и объекты с искомой ссылкой (например, надо найти, где на сайте указан старый неактуальный телефон организации, чтобы заменить его). Но это уже другая история.

Теперь надо прописать условия, при котором будет срабатывать клик по нашей ссылке. Идем в “Триггеры”, чтобы создать новый.

создаем новый триггер

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

выбираем тип триггера

Добавляем условия нашему триггеру: некоторые клики, у которых адрес содержит “best-banner-for-my-site”.

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

Обзываем триггер, чтобы не запутаться, и сохраняем.

Видим новый созданный триггер

Дело за малым — осталось отправить это событие системам веб-статистики. Сделаем это для Яндекс Метрики и Google Analytics.

Не забудьте в первую очередь настроить с помощью GTM Яндекс Метрику или Google Analytics на сайт

Как настраивать Яндекс Метрику через Google Tag Manager я описал в прошлой серии, а вот про Гугл Аналитику-то забыл… Или нет? Магия монтажа — ловите инструкцию.

Отправляем в Яндекс

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

Создаем новый тег в GTMПро компанию Яндекс в Диспетчере тегов от Google никто не знает, поэтому в конфигурации тега выбираем знакомый “Пользовательский HTML”. Пропишем вручную, что уж нам теряться.

ПОльзовательский HTML в GTM

Называем тег, а затем вводим конструкцию

<script>
yaCounter12345678.reachGoal('ClickOnBestBanner');
</script>

, где цифры — номер вашего счетчика Яндекс Метрики, а в скобках даем имя событию, которое будет отправляться.

Описываем цель для Яндекс Метрики в GTMДело за триггером. Подключаем ранее созданный, который будет срабатывать каждый раз при клике по ссылке с нашим адресом.

ВЫбираем ранее созданный триггер

Не забудьте все сохранить и опубликоваться последние изменения.

Отправляем в Google

  1. Снова создаем новый тег
  2. В конфигурации тега выбираем первый пункт Google Analytics – Universal Analytics
  3. Тип отслеживания “Событие”
  4. Появляются 4 поля: Категория, Действия, Ярлык, Значение. Обязательно к заполнению первые три. Обязательно на английском. Мои значения:
    1. Категория — UserEvents (т.е. действия пользователей)
    2. Действие — Click (т.е. непосредственно клик)
    3. Ярлык — BestBanner (т.е. по чему клик? По нашему баннеру. Чтобы отслеживать разные баннеры, просто отслеживаете разные ярлыки)
  5. В поле “Настройки Google Analytics” выбираем ранее созданную переменную, чтобы связать это событие с определенным счетчиком GA.

ПРописываем в GTM параметры для события в GA

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

Прописали событие для Гугл Аналитики

Сохраняем, отправляем.

Так. События отправляются. Теперь их надо принять на стороне счетчиков.

Настроим цели в Яндекс Метрике

Заходим в настройки, вкладка “Цели”, добавить цель. В нашем случае это Javascript-событие и его идентификатор ClickOnBestBanner, который мы прописывали ранее в Google Tag Manager в параметре reachGoal для Яндекс Метрики. Будьте внимательны! Отправляющее (из GTM) название события должны совпадать с принимающей стороной (в Яндекс Метрике).

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

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

Не забудьте сохраниться. Итоговый результат ниже.

Цели в Яндекс Метрике

Настроим отслеживание событий в Google Analytics

Все как в Яндекс Метрике. Заходим в Администратора, в настройках представления (справа) вкладка “Цели”, создаем цель типа “Событие”, а дальше прописываем все точь-в-точь как ранее в Google Tag Manager.

Настраиваем цель в Google Analytics

Сохраняемся. Готово! Теперь все должно работать.

На сегодня это все

На этом пока прервемся. В следующих сериях будем отслеживать клики по телефонам и отправку форм с сайта.

Подпишись, будет интересно!

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *