Скоро Новый год (юхууу!) и многие, если не все, интернет-магазины начинают предлагать своим посетителям поучаствовать в различных акциях, распродажах и т.д. Конечно, большая часть таких предложений происходит с помощью рекламных каналов, социальных сетей и e-mail рассылок, но есть еще один очень крутой способ сообщить вашим клиентам о текущих акциях — промо баннера на вашем сайте.
Скорее всего вам хочется измерить их эффективность, чтобы в следующем году сделать еще лучшие предновогодние предложения и привлечь еще больше посетителей в ваш интернет-магазин (или по совершенно другим причинам) и Google готов вам в этом помочь.
В Google Analytics предусмотрен специальный отчет по внутренним кампаниям. Выглядит он примерно вот так:
В этом отчете отображаются все интересующие нас данные, а именно:
- Название внутренней кампании;
- Просмотры (внутренняя кампания);
- Клики (внутренняя кампания);
- CTR (внутренняя кампания);
- Транзакции;
- Доход.
Теперь поговорим о том, как эти данные получить. Самый простой, но не самый быстрый способ для маркетолога, это написать техническое задание программисту, ждать, пока отдел разработки поставит его в приоритет, внедрит, и наконец-таки данные попадут в Google Analytics. Ух, какой долгий процес.. А отслеживать то нужно уже сейчас.
Поэтому мы пойдем своим путем и будем работать с Google Tag Manager. Вот пример баннеров, которые мы будем отслеживать:
Итак, поехали.
Реализовывать это мы будем с помощью функционала отслеживания промоакций расширенной электронной торговли. Что нам нужно:
1. Передать данные о показе рекламного баннера
- Тег который будет передавать данные о показе рекламного баннера
- Тригер, который будет срабатывать при показе рекламного баннера
- Переменная, в которой мы будем формировать нужный нам массив с данными (этот пункт можно реализовать и более стандартным методом — с помощью отправки данных в уровень данных, но об этом чуть позже)
2. Передать данные о клике по рекламному баннеру
- Тег который будет передавать данные о клике по рекламному баннеру
- Тригер, который будет срабатывать при клике по рекламному баннеру
- Переменная, в которой мы будем формировать нужный нам массив с данными
Передаем данные о показе рекламного баннера
Настройка тега, для передачи данных о показе промо-баннера
Тег, с помощью которого мы будем передавать данные в Google Analytics, за исключением одного маленького момента, не отличается от стандартного тега для передачи данных по Enhanced Ecommerce:
Отклонение от стандартной реализации заключается в использовании переменной, вместо стандартного dataLayer, подробнее об этом позже.
Настройка тригера для отслеживания показа промо-баннеров
Совсем недавно Google в честь пятой годовщины диспетчера тегов выкатил очень много обновлений, среди которых тригер “Доступность элемента”, с помощью которого мы и будем передавать данные. Рабочий тригер выглядит примерно так:
Этапы настройки:
- Тип тригера — Доступность элемента.
- Метод выбора — поддерживает два варианта: “Идентификатор” и “Селектор CSS”. В нашем конкретном случае я выбрал “Селектор CSS”, так как у нужных элементов нет идентификатора.
- Селектор элементов — указываем селектор CSS нужного нам элемента. В нашем случае указанный селектор соответствует элементам с классом main-slider__img или main-page-banner. Более подробно читайте в моей статье — Как использовать селекторы CSS в Google Tag Manager.
- Правило запуска этого триггера — есть три варианта:
- Один раз на страницу — как понятно с названия, если несколько элементов на странице сопоставляются идентификатором или CSS-селектором, этот триггер запускает только один раз, когда первый из них отображается на этой странице;
- Один раз на элемент — если несколько элементов на странице сопоставляются CSS-селектором, этот триггер будет запускаться когда каждый из них будет видимым на этой странице в первый раз. Если несколько элементов на странице имеют одинаковый идентификатор, только первый согласованный элемент будет запускать этот триггер;
- При каждом появлении элемента на экране — в этом случае триггер срабатывает каждый раз, когда соответствующий элемент становится видимым.
В нашем случаем будем использовать правило “Один раз на элемент”.
- Минимальный процент видимости — здесь нужно указать какой процент выбранного элемента должен быть виден на экране для срабатывания триггера. Для наших целей 90% вполне достаточно.
- Регистрация изменений DOM — этот пункт нужно использовать, если нужный вам элемент не подгружается сразу.
- Триггер активируется на следующих страницах — этот пункт большинству уже знаком, в нем нужно указать когда/где будет срабатывать тригер. Мы будем отслеживать промо-баннера на главной странице, поэтому условие соответствует.
Еще одна возможность, которую поддерживает тригер типа “Доступность элемента”, которую я не упомянул — это минимальное время видимости — как долго выбранный элемент должен быть виден на экране для срабатывания триггера.
Создание переменной для хранения данных о показе промо-баннеров
Примечание: Этот пункт является не совсем стандартным, и представлен больше для ознакомительных целей и демонстрации функционала диспетчера тегов. Предпочтительным будет использовать пользовательский тег для передачи данных в массив dataLayer и работать с ним. Ну и еще одна причина, поскольку метод с переменной работает — почему бы о нем не написать 😉
А теперь о том, как это настроить. На Google Developers приводится следующая информация:
В примере показана переменная для события покупки. Мы по аналогии сделаем для события просмотра промо-баннеров. Выглядит готовая переменная будет вот так:
Как видите ничего необычного в ней нет. Единственное, что может вызвать у вас непонимание/замешательство/интерес, это переменная {{alt_attr}}. Её то мы сейчас и разберем. Это переменная типа “Переменная уровня данных”:
Переменные уровня данных являются чрезвычайно универсальными и gtm.element тому явный пример. Эта переменная хранит в себе множество полезных данных. чтобы более подробно рассказать об этом, нужна отдельная статья, поэтому просто помните, что вы можете использовать точечную нотацию для доступа к свойствам объектов элемента DOM. Например, gtm.element.alt для доступа к информации, которая нам и необходима в этом примере:
При самостоятельной настройке вместо переменной {{alt_attr}} нужно будет указать свою переменную с необходимыми данными.
Собственно, на этом настройка отслеживания просмотров закончена и можно перейти к отслеживанию кликов по баннерам.
Передаем данные о клике по рекламному баннеру
Настройка очень похожа с предыдущей, поэтому ниже приведу только скриншоты с правильной настройкой.
Настройка тега, для передачи данных о клике по промо-баннеру
Настройка тригера для отслеживания кликов по промо-баннерам
Создание переменной для хранения данных о кликах по промо-баннерах
Осталось опубликовать контейнер и ждать пока соберутся данные в Google Analytics. не забудьте включить в представлении отчеты Расширенной электронной торговли:
Если до этого вы уже настроили отслеживание транзакций, то ваш отчет будет выглядеть следующим образом:
Итог
Надеюсь мне удалось показать некий интересный функционал в этой статье. А с помощью полученных данных вы сможете повысить конверсию на вашем сайте. Если у вас остались вопросы или пожелания — пишите их в комментариях. Всех с наступающими праздниками.