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

Прошу прощения за долгий перерыв — в декабре надо было перезарядить батарейки, а в короткий рабочий январь как следует поработать, чтобы закрыть все пробелы. Да-да, я работаю только по рабочим дням и, как правило, с 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

Все как в Яндекс Метрике. Заходим в Администратора, в настройках представления (справа) вкладка “Цели”, создаем:

  1. Установка цели  — “Собственная” (в самом низу) — Далее;
  2. Описание цели —  “Событие” — Далее;
  3. Подробные сведения о цели — прописываем все точь-в-точь как ранее в Google Tag Manager (копипастим категорию, действие и ярлык).
  4. Сохранить.

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

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

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

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

Подпишись, будет интересно!
23 комментария
  1. А клики по ссылке можно внешние URL указывать? То есть те, что не ведут на наш сайт.

    1. Конечно! Вешайте событие на клик по ссылке (click url) с определенным адресом: внутренним или внешний, — без разницы. Единственное, имейте в виду, что проще указать “содержит адрес”, а не “равно”, чтобы срабатывало и при site.ru, и http://www.site.ru, и https://site.ru. Мало ли как у вас ссылка прописана.

  2. Спасибо. Завтра запилю. Расшаривал сам, но много белых пятен заполнил. Красавчик.

  3. Что то не так пошло.
    В футере на сайте клиента, интерактивные номера телефонов, хочу конверсионные действия создать. Завернуты номера в контейнер div. (два номера) Что бы особо не утруждаться, решил что пусть это будет одно действие конвресия.
    Телефоны:+77777777777777777777
    1- Создал встроенную переменную ClickClasess
    2- Создал Тег, GA. Обозначил категорию, действие, ярлык. (продублировал это все в GA при создании цели события).
    3- Задал переменную для GA (код идентификатора)
    4-Создал триггер: CliclClasess равно Телефоны:+77777777777777777777

    Но чот не пошло…. Ладно завтра еще разок запилю.
    Если где то ошибся, поправьте пжлст, в тих 4 шагах
    Спасибо 🙂

    1. Ну как дела? Заработало?

      Я в последние время триггерю не обёрткой телефонов (div), а содержимым (a href=”tel:777777″).

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

      На примере:

      1. В триггере выбираю тип “отслеживание кликов (just ckicks)”
      2. Некоторые клики (Some Link Clicks)
      3. А дальше ищем содержимое: Click URL (клик по ссылке) – contains (которая содержит) – tel:+7911111111

      Таких триггеров надо создать со всеми возможными написаниями телефонов (если менеджеров много, понаписать на сайте могут всякого), например tel:89111111

      И все эти триггеры потом уже перечислить в теге (tags).

      P.S. Но всё это работает, если телефонные номера размечены как ссылки 😉

      1. Да воюю до сих пор. Пробовал и в классе Див, и по ссылке Herf, и по ID.
        Ничо понять не могу.
        Создал встроенную переменную, создал триггер и тег, настроил строки в целях Аналитикса. Как бы упустить не понятно что можно? Хм

        1. Да и шут с ним с Аналитиксом. До него ещё дойти надо. Надо сначала понять, где ошибка: при срабатывании события (т.е. не срабатывании) или при отсылке его в Google Analytics.

          В первую очередь надо понять, срабатывает ли оно вообще.

          Проверяли его в режиме Предварительного просмотра (Preview) в Google Tag Manager? После клика по телефону должно появится событие Link Click (в самом левом столбце). Если на него щёлкнуть, то там куча параметров вылазит. Вот их можно изучить и взять для триггера. А то порой может зачесаться какой-нить пробел лишний и всё…

          1. Да, я обращал внимание что при предварительном просмотре, в столбце слева, есть такое значение Link Click
            Спасибо за подсказку, поюзаю там… может что то от туда прояснится.

  4. В принципе, глянул сейчас через предвариловку. При клике на номер телефона, в контейнере в принципе по Click_URL, отражается информация, string И собственно номер телефона.
    Значит переменная корректно настроена, дело в передаче данных на трекер.

  5. Ага, в метрике пошло…. Аналитикс не сдается)
    Всё, спасибо в любом случае. Вы в добавленных)

  6. Ребят, вот набор методов, для нового счетчика Метрики,
    ym(XXXXXXX, ‘reachGoal’,”Target name”);

    Всё получилось, не знаю в чем проблема была.

  7. Здравствуйте! Подскажите, пожалуйста, как отследить событие: Клик по баннеру -> Регистрация по форме (форма улетает в другой сервис, на сайте только html с полями заполнения) .

    1) Настроила триггер с Типом Отправка формы
    2) поставила 2 условия активации- 1 -click URL c адресом картинки, где лежит баннер (всё сложно), 2 – Form ID содержит *id формы*

    Не работает)

    Если добавить в Тег отдельно триггеры по клику на баннер и отдельно на заполнение формы, работать будет неверно, я так полагаю. Там ведь стоит условие ИЛИ?

    1. Варвара, добрый день! Попробуйте найти какой-нибудь другой уникальный параметр формы, если одного ID вам маловато. Поставьте сначала в условие тригера “отправка всех формы”, а затем в режиме отслеживания после удачной отправки изучайте, какие параметры можно забрать.

  8. Здравствуйте,

    ломаю голову над вопросом отслеживания конверсий в Гугл Рекламе через Таг Менеджер. По сути нужно поймать событие успешной отправки данных формы.

    Трудности в том, что:
    а) я не могу связать аккаунты Адс и ГА (судя по всему ограничение рекл/аккаунта), пробую через ГТМ;
    б) используемое решение для отправки данных посетителя скорее скриптовым способом отправляет данные (и поддерживает опцию выполнения пользовательского кода при успешной отправке формы)

    Вопрос:
    как настроить триггер, чтобы он отправлял сигнал тегу отслеживания конверсий (чтобы данные ушли в Адс)?

    Для ГА использовал функцию gtag(), может и для этого тега будет достаточно? И возникает следующий логичный вопрос: нужно ли дополнительно к глобальному тегу ГТМ подключать глобальный тег gtag.js (указано подключение в инструкции в Адс).

    Надеюсь, понятно изложил мысль))
    Буду признателен за помощь!

  9. Добрый день. Спасибо за материал. Было бы круто если бы видос записали и под текстом разместили. Очень сложно в первые разбираться в это всем + по фото не совсем шаги понятны. их или больше вставлять нужно. Например на последнем, итоговом фото пропущено пару шагов. че в них выбирать хз.
    И еще вопрос. В ГА только 19 целей доступно? Как то слабовато, по сравнению с яндексом (100 штук вроде)

    спасибо

    1. Александр, спасибо за совет с видео! Подумаем!

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

      Ну да ограничение в 20 целей. Но можно делать до 25 представлений для сайта и в каждом добавлять свой набор целей (всего 500 целей). Экзотические задачи — экзотические решения.

  10. У вас в статье указано крупным шрифтом “НЕ ЗАБУДЬТЕ В ПЕРВУЮ ОЧЕРЕДЬ НАСТРОИТЬ С ПОМОЩЬЮ GTM ЯНДЕКС МЕТРИКУ ИЛИ GOOGLE ANALYTICS НА САЙТ”.

    Подскажите пожалуйста, а если яндекс метрика на сайте уже установлена, то в GTM все равно нужно это сделать? Перед тем как настраивать события и цели? Или можно сразу переходить к шагам из этой статьи?

    1. Вся суть GTM в том, что всё хранится в одном месте. Поэтому конечно удобнее и грамотнее будет перенести код Яндекс Метрики в GTM. Просто вырежьте и скопируйте этот же код в GTM (куда именно, я писал ранее).

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

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