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

13 декабря 2018

Одна из основных форм активного взаимодействия пользователя с вашим сайтом — клики по определенным элементам, отслеживание которых является важной задачей для аналитики. Вы не должны менять их названия, если хотите обеспечить правильный подсчёт кликов и получить точную статистику по поведению пользователей на вашем ресурсе. Как обеспечить контроль и сбор информации о поведении клиентов, когда работа над сайтом предполагает регулярные обновления? Я расскажу вам на примере реального кейса, чем GTM поможет вам в решении этой задачи.

Что такое GTM

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

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

Большинство кодов созданы на JavaScript и HTML. JavaScript используется чаще, так как этот язык исполняет «сценарии» обработки данных, дополняя сайт новыми функциями. Добавляемый код и техническое задание по его внедрению должны быть созданы профессиональным программистом, потому что сам GTM помогает только разместить код на сайте и протестировать его, временно отключить и включить снова, а не создать.

Зачем он нужен вашему бизнесу

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

Иногда требуется добавить на сайт какие-нибудь дополнительные функции: установить код аналитического счетчика, код ремаркетинга, пиксель сервиса социальной сети, а также настроить получение или отправки с сайта информации. Вам не нужно сразу бежать к программисту или искать специалиста, который справится с этой работой, потому что модернизировать сайт с GTM вы сможете своими силами. Конечно, если вы не планируете сэкономить своё время для решения более важных задач.

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

Принципы работы GTM на практике

Интернет-магазин косметических средств, который является нашим клиентом, делает ставку на привлечение внимания аудитории к новым продуктами и акциям с помощью графических баннеров. Из 4-5 баннеров составляется слайдер на главной странице сайта. Дизайнеры готовят баннеры для каждого нового продукта или промо-акции. Смена происходит с периодичностью несколько раз в неделю, а иногда и чаще.

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

Google Tag Manager помог решить эту задачу, позволив нам автоматизировать отслеживание кликов даже при частой смене картинок. Веб-мастеру сайта достаточно выкладывать новые баннеры в привычном ему режиме.

Как выглядит схема отслеживания:

  • Пользователь заходит на сайт;
  • Кликает по баннеру;
  • Срабатывает код GTM;
  • Информация о клике по баннеру уходит в Google Analytics;
  • В отчётах вы видите количество кликов по конкретному баннеру;
  • Оцениваете эффективность каждого баннера.

Что нужно для реализации этой схемы:

  1. Установить код контейнера GTM.
  2. Настроить в контейнере две переменных, один триггер и два тега.
  3. Опубликовать контейнер, чтобы настройки начали действовать на сайте.

Пошаговая инструкция

1

Устанавливаем на сайт код контейнера

На первом этапе лучше привлечь программистов.

2

Настраиваем первую из двух переменных

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

Выберем настройки — в окне «Конфигурация переменной»:

  • Тип переменной — «URL»;
  • Тип компонента — «Путь»;
  • Дополнительные настройки — источник URL — «{{Click URL}}».

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

3

Создаём вторую переменную

Она пригодится вам практически для всех других тегов. Эта переменная, по сути, указание адреса, куда следует направить информацию о событиях «клики по баннерам». Назовём её «Идентификатор отслеживания Google Analytics».

Настройки:

  • Тип переменной — «настройки Google Analytics»;
  • Идентификатор отслеживания — «UA-XXXXXXX-X», где вместо «X» необходимо указать номер вашего счетчика (ресурса) Google Analytics.

4

Создаём и настраиваем триггер

Останавливаемся на кратком и информативном варианте названия — «Клик по баннеру».

Настройки:

  • Тип триггера — «Клик — Все элементы»;
  • Условия активации триггера «Click URL содержит /upload/banners/».

Что такое «/upload/banners/»

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

5

Создаём тег с таким же названием, как и триггер

Настройки:

  • Тип тега — «Google Аналитика — Universal Analytics»;
  • Тип отслеживания — «Событие», в) категория — «banners»;
  • Действие — «click»;
  • Ярлык — «{{Название баннера}}»;
  • Настройки Google Analytics — {{UA ID}}«.

При заполнении полей «категория» и «действие» старайтесь использовать английский язык и «верблюжий шрифт» без пробелов: например, клик по баннеру можно обозначить «clickOnTheBanner». Но в нашем кейсе названия состоят из одного слова («banners» и «click»).

6

Публикуем контейнер с изменениями

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

7

Тестовые клики по баннерам

Проверка того, что мы всё сделали правильно. Имитируем поведения пользователя, самостоятельно совершая целевое действие. После 4-5 кликов мы сразу переходим в отчёты по событиям в реальном времени в Google Analytics: раздел «Отчеты» — «В режиме реального времени» — «События». Там уже есть результаты наших кликов. В графах «Категория» и «Действие» мы должны видеть названия «banners» и «click», а в графе «Ярлык» — имя нашего файла вместе с названиями папок каталога сайта.

Это всё GTM

На основе полученных данных вы выстраиваете дальнейшие аналитические отчеты в Google Analytics и отслеживаете результаты по каждому баннеру. Зачем тратить рекламный бюджет на размещения, которые не приводят к целевым действиям пользователей. Лучше перераспределить его на каналы, которые приводят на сайт потенциальных клиентов.

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

Автор: Александр Наене, Биплан (Веб-аналитик компании)

upload1edbxpcy8k