Отслеживаем эффективность промо-баннеров на сайте с помощью Google Tag Manager

Отслеживаем эффективность промо-баннеров на сайте с помощью GTM

Скоро Новый год (юхууу!) и многие, если не все, интернет-магазины начинают предлагать своим посетителям поучаствовать в различных акциях, распродажах и т.д. Конечно, большая часть таких предложений происходит с помощью рекламных каналов, социальных сетей и e-mail рассылок, но есть еще один очень крутой способ сообщить вашим клиентам о текущих акциях — промо баннера на вашем сайте.

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

В Google Analytics предусмотрен специальный отчет по внутренним кампаниям. Выглядит он примерно вот так:

Пример отчета по внутренним кампаниям в Google Analytics

В этом отчете отображаются все интересующие нас данные, а именно:

  • Название внутренней кампании;
  • Просмотры (внутренняя кампания);
  • Клики (внутренняя кампания);
  • CTR (внутренняя кампания);
  • Транзакции;
  • Доход.

Теперь поговорим о том, как эти данные получить. Самый простой, но не самый быстрый способ для маркетолога, это написать техническое задание программисту, ждать, пока отдел разработки поставит его в приоритет, внедрит, и наконец-таки данные попадут в Google Analytics. Ух, какой долгий процес.. А отслеживать то нужно уже сейчас.

Поэтому мы пойдем своим путем и будем работать с Google Tag Manager. Вот пример баннеров, которые мы будем отслеживать:

Пример промо-баннера для отслеживания

Итак, поехали.

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

1. Передать данные о показе рекламного баннера

  • Тег который будет передавать данные о показе рекламного баннера
  • Тригер, который будет срабатывать при показе рекламного баннера
  • Переменная, в которой мы будем формировать нужный нам массив с данными (этот пункт можно реализовать и более стандартным методом — с помощью отправки данных в уровень данных, но об этом чуть позже)

2. Передать данные о клике по рекламному баннеру

  • Тег который будет передавать данные о клике по рекламному баннеру
  • Тригер, который будет срабатывать при клике по рекламному баннеру
  • Переменная, в которой мы будем формировать нужный нам массив с данными

Поехали

Передаем данные о показе рекламного баннера

Настройка тега, для передачи данных о показе промо-баннера

Тег, с помощью которого мы будем передавать данные в Google Analytics, за исключением одного маленького момента, не отличается от стандартного тега для передачи данных по Enhanced Ecommerce:

Тег для передачи данных о показе промо баннера

Отклонение от стандартной реализации заключается в использовании переменной, вместо стандартного dataLayer, подробнее об этом позже.

Настройка тригера для отслеживания показа промо-баннеров

Совсем недавно Google в честь пятой годовщины диспетчера тегов выкатил очень много обновлений, среди которых тригер “Доступность элемента”, с помощью которого мы и будем передавать данные. Рабочий тригер выглядит примерно так:

Тригер для отслеживания показа промо баннеров

Этапы настройки:

  1. Тип тригера — Доступность элемента.
  2. Метод выбора — поддерживает два варианта: “Идентификатор” и “Селектор CSS”. В нашем конкретном случае я выбрал “Селектор CSS”, так как у нужных элементов нет идентификатора.
  3. Селектор элементов — указываем селектор CSS нужного нам элемента. В нашем случае указанный селектор соответствует элементам с классом main-slider__img или main-page-banner. Более подробно читайте в моей статье — Как использовать селекторы CSS в Google Tag Manager.
  4. Правило запуска этого триггера — есть три варианта:
    • Один раз на страницу — как понятно с названия, если несколько элементов на странице сопоставляются идентификатором или CSS-селектором, этот триггер запускает только один раз, когда первый из них отображается на этой странице;
    • Один раз на элемент — если несколько элементов на странице сопоставляются CSS-селектором, этот триггер будет запускаться когда каждый из них будет видимым на этой странице в первый раз. Если несколько элементов на странице имеют одинаковый идентификатор, только первый согласованный элемент будет запускать этот триггер;
    • При каждом появлении элемента на экране — в этом случае триггер срабатывает каждый раз, когда соответствующий элемент становится видимым.

    В нашем случаем будем использовать правило “Один раз на элемент”.

  5. Минимальный процент видимости — здесь нужно указать какой процент выбранного элемента должен быть виден на экране для срабатывания триггера. Для наших целей 90% вполне достаточно.
  6. Регистрация изменений DOM — этот пункт нужно использовать, если нужный вам элемент не подгружается сразу.
  7. Триггер активируется на следующих страницах — этот пункт большинству уже знаком, в нем нужно указать когда/где будет срабатывать тригер. Мы будем отслеживать промо-баннера на главной странице, поэтому условие соответствует.

Еще одна возможность, которую поддерживает тригер типа “Доступность элемента”, которую я не упомянул — это минимальное время видимости — как долго выбранный элемент должен быть виден на экране для срабатывания триггера.

Создание переменной для хранения данных о показе промо-баннеров

Примечание: Этот пункт является не совсем стандартным, и представлен больше для ознакомительных целей и демонстрации функционала диспетчера тегов. Предпочтительным будет использовать пользовательский тег для передачи данных в массив dataLayer и работать с ним. Ну и еще одна причина, поскольку метод с переменной работает — почему бы о нем не написать 😉

А теперь о том, как это настроить. На Google Developers приводится следующая информация:

Пример кода для отслеживания донных о показах промо-баннеров

В примере показана переменная для события покупки. Мы по аналогии сделаем для события просмотра промо-баннеров. Выглядит готовая переменная будет вот так:

Переменная для хранения данных о показе помо-баннера

Как видите ничего необычного в ней нет. Единственное, что может вызвать у вас непонимание/замешательство/интерес, это переменная {{alt_attr}}. Её то мы сейчас и разберем. Это переменная типа “Переменная уровня данных”:

Переменная уровня данных с данными атрибута alt

Переменные уровня данных являются чрезвычайно универсальными и gtm.element тому явный пример. Эта переменная хранит в себе множество полезных данных. чтобы более подробно рассказать об этом, нужна отдельная статья, поэтому просто помните, что вы можете использовать точечную нотацию для доступа к свойствам объектов элемента DOM. Например, gtm.element.alt для доступа к информации, которая нам и необходима в этом примере:

Необходимая информация в коде странице

При самостоятельной настройке вместо переменной {{alt_attr}} нужно будет указать свою переменную с необходимыми данными.

Собственно, на этом настройка отслеживания просмотров закончена и можно перейти к отслеживанию кликов по баннерам.

Передаем данные о клике по рекламному баннеру

Настройка очень похожа с предыдущей, поэтому ниже приведу только скриншоты с правильной настройкой.

Настройка тега, для передачи данных о клике по промо-баннеру

Тег для передачи данных о клике по промо-баннеру

Настройка тригера для отслеживания кликов по промо-баннерам

тригер для отслеживания кликов по промо-баннерам

Создание переменной для хранения данных о кликах по промо-баннерах

переменная для хранения данных о кликах по промо-баннерах

Осталось опубликовать контейнер и ждать пока соберутся данные в Google Analytics. не забудьте включить в представлении отчеты Расширенной электронной торговли:

Включить настройку расширенной электронной торговли

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

Отчет по внутренным промо в Google Analytics

Итог

Надеюсь мне удалось показать некий интересный функционал в этой статье. А с помощью полученных данных вы сможете повысить конверсию на вашем сайте. Если у вас остались вопросы или пожелания — пишите их в комментариях. Всех с наступающими праздниками.

  • http://prorod.ru nicklob

    Макс, класс, спасибо! Настроил, всё работает.

    А можно ли передавать в название кампании не alt, а aria-label? У меня через gtm.element.aria-label не получилось.

    P.S. Код бы текстом, а не картинкой.

  • Паша Дмитриев

    Спасибо за материал. Уточните пожалуйста, почему у вас в контейнере указано имя переменной gtm.element.alt ,а в коде просто alt? Или я что-то не так понимаю?