- Отслеживание событий и настройка целей в Google Tag Manager (часть 1)
- Начинаем серию сугубо технических постов: ёмко и без воды
- Отслеживание кликов в GTM
- Не забудьте в первую очередь настроить с помощью GTM Яндекс Метрику или Google Analytics на сайт
- Отправляем в Яндекс
- Отправляем в Google
- Настроим цели в Яндекс Метрике
- Настроим отслеживание событий в Google Analytics
- На сегодня это все
- Настраиваем цели через GTM
Отслеживание событий и настройка целей в Google Tag Manager (часть 1)
Начинаем серию сугубо технических постов: ёмко и без воды
Прошу прощения за долгий перерыв — в декабре надо было перезарядить батарейки, а в короткий рабочий январь как следует поработать, чтобы закрыть все пробелы. Да-да, я работаю только по рабочим дням и, как правило, с 9 до 17. Баланс личной жизни: семья, хобби, спорт и рабочей: клиенты, проекты, блог никто не отменял.
Итак, продолжим копаться в настройках Google Tag Manager. Сегодня распишу, как отслеживать самые попсовые события, которые необходимы абсолютно всем, чтобы минимально понимать, что происходит на вашем сайте, и в правильном ли направлении вы движетесь.
Отслеживание кликов в GTM
Итак, что мы можем отслеживать на сайте? Клики! Клики по ссылкам, баннерам, кнопкам, телефонам, пунктам меню, любому тексту. В итоге все вышеперечисленное — это клики по определенной области на сайте.
Область на сайте можно идентифицировать с помощью HTML-тегов (a href в случае ссылки) и их атрибутов (ID, class, адрес ссылки, target).
Ближе к делу. Сначала надо проверить, настроена ли в GTM работа с кликами. Клики — это объекты, с которыми мы будем работать. Как мы помним из прошлой серии, настройка объектов происходит через переменные. Заходим в Google Tag Manager, жмем “Переменные” — “Настроить”.
Мотаем появившийся список вниз и ищем раздел “Клики”
Пробежимся по разновидностям кликов, с которыми работаю именно я. Этого хватит с лихвой для 95% проектов. Для всего остального добро пожаловать в документацию и на нудные тематические блоги. Я против “воды” и нудятины, поэтому вперед!
- Click Classes (клики по объектам, обернутыми в определенный class, будь то ссылка A HREF, абзац P или вовсе контейнер DIV)
- Click URL (клик по ссылке с определенным адресом внутри HREF=” “)
- Click Text (клик по заданному тексту. Искомый текст указывается с помощью простых условий или регулярных выражений)
Достаточно. Закрываем любым удобным способом окно. Проверяем, что наши клики появились в списке встроенных переменных.
Давайте отследим клики по ссылкам, которые ведут на страницу “best-banner-for-my-site”. Это может быть как баннер или пункт меню на каждой странице, так и одна грустная ссылка на одной из страниц сайта. Неважно. Давайте отслеживать все клики по ней.
На самом деле даже необязательно знать, где эти ссылки находятся на сайте. Таким образом, можно отслеживать и находить страницы и объекты с искомой ссылкой (например, надо найти, где на сайте указан старый неактуальный телефон организации, чтобы заменить его). Но это уже другая история.
Теперь надо прописать условия, при котором будет срабатывать клик по нашей ссылке. Идем в “Триггеры”, чтобы создать новый.
В появившемся окне щелкаем по пустому окну с настройкой триггера, чтобы выбрать его тип. Мы хотим отслеживать клик по ссылке, поэтому здесь все просто — как слышим, так и пишем.
Добавляем условия нашему триггеру: некоторые клики, у которых адрес содержит “best-banner-for-my-site”.
Обзываем триггер, чтобы не запутаться, и сохраняем.
Дело за малым — осталось отправить это событие системам веб-статистики. Сделаем это для Яндекс Метрики и Google Analytics.
Не забудьте в первую очередь настроить с помощью GTM Яндекс Метрику или Google Analytics на сайт
Как настраивать Яндекс Метрику через Google Tag Manager я описал в прошлой серии, а вот про Гугл Аналитику-то забыл… Или нет? Магия монтажа — ловите инструкцию.
Отправляем в Яндекс
Приступим к главному. Наконец, добавляем новый тег.
Называем тег, а затем вводим конструкцию
, где цифры — номер вашего счетчика Яндекс Метрики, а в скобках даем имя событию, которое будет отправляться.
Не забудьте все сохранить и опубликоваться последние изменения.
Отправляем в Google
- Снова создаем новый тег
- В конфигурации тега выбираем первый пункт Google Analytics – Universal Analytics
- Тип отслеживания “Событие”
- Появляются 4 поля: Категория, Действия, Ярлык, Значение. Обязательно к заполнению первые три. Обязательно на английском. Мои значения:
- Категория — UserEvents (т.е. действия пользователей)
- Действие — Click (т.е. непосредственно клик)
- Ярлык — BestBanner (т.е. по чему клик? По нашему баннеру. Чтобы отслеживать разные баннеры, просто отслеживаете разные ярлыки)
- В поле “Настройки Google Analytics” выбираем ранее созданную переменную, чтобы связать это событие с определенным счетчиком GA.
Ниже в блоке триггеров выбираем, как уже делали ранее, нужное условия для срабатывания события. Конечный результат ниже.
Так. События отправляются. Теперь их надо принять на стороне счетчиков.
Настроим цели в Яндекс Метрике
Заходим в настройки, вкладка “Цели”, добавить цель. В нашем случае это Javascript-событие и его идентификатор ClickOnBestBanner, который мы прописывали ранее в Google Tag Manager в параметре reachGoal для Яндекс Метрики. Будьте внимательны! Отправляющее (из GTM) название события должны совпадать с принимающей стороной (в Яндекс Метрике).
И не забудьте звучно, но ненавящего назвать вашу новую цель. Вы ее часто будете видеть в отчетах о конверсии, поэтому постарайтесь.
Не забудьте сохраниться. Итоговый результат ниже.
Настроим отслеживание событий в Google Analytics
Все как в Яндекс Метрике. Заходим в Администратора, в настройках представления (справа) вкладка “Цели”, создаем:
- Установка цели — “Собственная” (в самом низу) — Далее;
- Описание цели — “Событие” — Далее;
- Подробные сведения о цели — прописываем все точь-в-точь как ранее в Google Tag Manager (копипастим категорию, действие и ярлык).
- Сохранить.
Сохраняемся. Готово! Теперь все должно работать.
На сегодня это все
На этом пока прервемся. В следующих сериях будем отслеживать клики по телефонам и отправку форм с сайта.
Источник
Настраиваем цели через GTM
Настраиваем цели через GTM
После того, как вы установили Google Tag Manager на сайт, можно перейти к настройке целей.
Сначала нужно определить, что именно вы хотите отслеживать. Как правило, это клик по какой-либо кнопке, ссылке, посещение страницы сайта, отправка данных из форм и т.д.
Благодаря GTM больше не потребуется добавлять на сайт код при желании расширить его функциональность или подключить к новому сервису. Рассмотрим еще несколько вариантов использования Диспетчера тегов:
- Чтобы добавить на сайт код ретаргетинга «Вконтакте», необходимо создать новый Тег с типом «Пользовательский HTML» и в предложенное поле добавить код ретаргетинга (его можно создать в разделе «Ретаргетинг» кабинета рекламодателя «Вконтакте»). В поле «Триггеры» нужно выбрать вариант «Все страницы». Если необходимо, чтобы код сработал при посещении определенных страниц, то следует указать их URL в триггере типа «Просмотр страницы», после чего сохранить изменения и опубликовать тег. Таким же образом можно добавлять теги ремаркетинга и ретаргетинга других социальных сетей и рекламных систем.
- Чтобы подтвердить права на сайт с помощью GTM (если вы еще не подтвердили их в кабинете вебмастера Google), необходимо в Search Console выбрать соответствующий способ и нажать кнопку «Подтвердить»:
Аналогичным способом подтверждаются все версии сайта.
- Чтобы добавить кнопки шаринга на изображения, необходимо скопировать их код, создать тег типа «Пользовательский HTML» и вставить код кнопок. В качестве триггера активации выберите «Все страницы». Сохраните изменения и публикуйте контейнер, а потом проверьте корректность работы кнопок.
- Чтобы отслеживать внутренние переходы по конкретной ссылке на сайте при помощи Google Tag Manager, выберите в меню «Переменные— Настроить — Click URL»:
Затем в разделе «Триггеры» создайте новый триггер и выберите тип «Клик — Только ссылки»:
Далее отметьте галочкой опции «Ждать теги» и «Все клики по ссылкам». В качестве условия выполнения триггера укажите URL целевой страницы и сохраните изменения:
После того, как триггер будет настроен, необходимо добавить тег отслеживания. Создайте новый тег, выберите тип Universal Analytics. В меню «Триггеры» выберите соответствующее значение. В настройках конфигурации заполните поля «Тип отслеживания», «Категория», «Действие», «Ярлык». При этом для удобства значение в поле «Ярлык» может соответствовать выбранному действию:
После того, как контейнер будет опубликован, вы сможете отслеживать указанное событие в разделе Google Analytics «Поведение — События»:
- Чтобы отслеживать переходы по конкретным внешним ссылкам, Создайте пользовательскую переменную, выберите тип URL. Укажите тип компонента «Полный URL», а в поле «Источник URL» выберите значение Click URL. Далее в условиях активации выберите значение «Некоторые ссылки» и укажите ,что триггер должен активироваться при переходе по конкретному URL:
Затем сохраните триггер, создайте тег Universal Analytics и опубликуйте его в контейнере.
- Чтобы уточнить показатель отказов, создайте новый триггер и выберите тип «Таймер»:
В поле «Интервал» укажите время активации триггера. например, для активации через 30 секунд нужно указать значение в миллисекундах, т.е. 30 000. В поле «Ограничение» укажите значение «1», чтобы таймер активировался один раз для каждой сессии.
Даже в условиях активации триггера укажите адрес, на которых установленный таймер должен срабатывать:
Затем создайте и опубликуйте в контейнере новый тег Universal Analytics. Установленный таймер будет активироваться каждый раз, когда посетитель будет проводить на указанных вами страницах более 30 секунд.
Работа таймера на всех страницах сайта позволяет получить более точный показатель отказов. По умолчанию система аналитики считает отказом все посещения, при которых пользователь просматривает только одну страницу сайта. Если же активировать таймер, то сессии продолжительностью более 30 секунд (в рассмотренном примере) не будут считаться отказом, даже если пользователь просматривает только одну страницу.
- Чтобы отследить взаимодействие с контактной формой, в меню «Переменные» активируйте переменную Form Classes:
После этого создайте триггер, в настройках которого укажите тип «Отправка формы»:
В настройках триггера выберите «Некоторые формы», а в качестве условий активации укажите «Фильтр Form Classes содержит» и также укажите значение атрибута class формы:
После этого создайте соответствующий тег Universal Analytics, сохраните изменения и опубликуйте контейнер.Значение атрибута class формы можно найти в коде страницы.
- Чтобы при помощи GTM отследить клики по кнопкам создайте новый тег, но в качестве триггера выберите не «All Pages», а создание нового триггера:
Зайдите в настройку триггера и в меню «Выберите тип триггера» жмите «Клик» — «Все элементы»:
После этого задайте условие активации триггера — «Некоторые клики». В первом поле в выпадающем меню нажмите «Выбрать встроенную переменную» и в открывшемся окне выбирайте «Click Element.»
Во втором поле выберите условие «соответствует селектору CSS». Чтобы найти этот селектор, нужно перейти на сайт и найти нашу кнопку, при клике на которую GTM должен передавать событие.
Нажмите на нее правой кнопкой мыши и в меню выберите «Посмотреть код»:
В открывшемся окне появится код страницы, а код самой кнопки будет подсвечен. Нажмите на это подсвеченное поле правой кнопкой мыши, выберите «Copy» — «Copy selector»:
После вставьте скопированный элемент в последнее поле в окне «Настройка триггера» в GTM:
Дайте имя триггеру, например, «Клик на кнопку» и сохраните его.
После этого необходимо заполнить блок «Конфигурация тега». Выберите «Google Аналитика — Universal Analytics», тип отслеживания — «Событие». В открывшемся меню обязательно нужно заполнить поля «Категория» и «Действие». Например, «Категория» будет button, а «Действие» — click.
Самому тегу тоже нужно дать название, допустим, «GA — Клик на кнопку».
В «Настройках Google Analytics» выберите идентификатор аккаунта в Google Analytics. Тогда при клике на кнопку в аналитическую систему будет отправляться событие с категорией button и действием click.
Зайдите в Google Analytics и создайте соответствующую цель («Администратор» — «Представление» — «Цели»):
В полке «Установка цели» выберите «Собственная». Назовите ее, например «Клик на кнопку», укажите «Тип » — «Событие». После чего заполните «Подробные сведения о цели»: «Категория» — button, «Действие» — click. Сохраните конверсию в Google Analytics. После этого перейдите в GTM и сохраните тег «GA — Клик на кнопку», опубликуйте его и проверьте корректность работы.
Чтобы настроить аналогичное событие в Яндекс.Метрике, сперва нужно создать цель («Настройка» — «Цели» — «Создать цель») и дать ей название, допустим, тот же «Клик на кнопку». В поле «Тип условия» необходимо выбрать «JavaScript—событие», а в поле «идентификатор цели»— ввести, например, button:
Далее перейдите в GTM и создайте тег с триггером «Клик на кнопку» и конфигурацией «Пользовательский HTML». Пропишите отправку события в Яндекс.Метрику:
где вместо единиц укажите идентификатор аккаунта в Яндекс.Метрике ,а вместо «Идентификатор события» тот ,который указан в описании вашей цели (в нашем примере это button):
Дайте тегу название, например, «Я.Метрика — Клик на кнопку». Сохраните его, отправьте в итоговую версию контейнера и проверьте работоспособность.
- Чтобы отследить переходы по тексту клика (например, когда на сайте есть одинаковые кнопки с разным призывом к действию), необходимо активировать переменную Click Text:
Затем создайте триггер, выберите «Клик — Все элементы», установите галочку в положение «Некоторые клики» и выберите фильтр Click Text. В качестве условия активации триггера отметьте «Содержит» и укажите нужный текст:
Создайте и опубликуйте тег Google Analytics.
- Чтобы отследить конкретные источники внешнего трафика, создайте новый триггер, выберите тип «Просмотр страницы», а в качестве переменной укажите Referrer. Правилом активации выбирайте «Содержит» и добавьте URL источника, который планируете отслеживать:
Далее создайте новый тег с типом отслеживания «Событие» и опубликуйте его в контейнере. Если все будет сделано верно, то Google Analytics будет фиксировать событие при каждом посещении сайта из указанного источника.
Google Tag Manager — настоящая находка для маркетологов и веб—аналитиков. Этот инструмент избавляет владельца сайта от трудностей при интеграции со сторонними сервисами, упрощает мониторинг и аналитику эффективности сайта, ведь используя набор встроенных и пользовательских переменных можно быстро настроить и отслеживать практически любые события на сайте.
Источник