Отслеживание промокодов с помощью Google Tag Manager
Мой личный кейс по отслеживанию промокодов на сайте (как активных, так и использованных) с помощью Google Tag Manager. Разными способами, с ошибками в процессе настройки и личными комментариями по каждому этапу.
Начало
Владельцы многих сайтов используют промокоды и специальные купоны со скидками в качестве стимуляции продаж, привлечения новых клиентов и продвижения своего товара или услуги в Интернете. Как правило, такие акции приурочены к каким-то особенным датам (праздники, дни рождения, юбилеи, всемирная распродажа, черная пятница и пр.). Но иногда промокоды доступны и на определенные действия - скидка на первый заказ, заказ от суммы X руб., купон на бесплатную доставку, на определенные товары/категории и т.д. и т.п.
Промокоды могут быть размещены как на самом сайте, где проводится акция, так и на сайтах-партнерах. В Интернете существует целая категория таких порталов, где представлено множество магазинов с промокодами и скидками. Например, promokodi.net, promokodus.com, skidka.ru и другие:
Некоторые предложения имеют ограничения по времени или по количеству раз использования. Поэтому не всегда промокод, который вы найдете на таком сайте, может работать в данный момент. Иногда срок его действия уже истек...
Да что там говорить, порой сами пользователи, сохраняя промокод, не успевают его ввести до даты окончания акции. А потом пишут с просьбами о продлении. Или когда-то давно у меня была рассылка и прокомод уже не работает, но человек все равно пробует ввести его в поле, в надежде на то, что он еще активен.
Примечание: на osipenkov.ru есть отдельная страница с промокодами и акциями.
Мне стало интересно, какое количество раз пользователи вводят промокоды у меня на сайте в целом и какое количество раз из них вводят промокоды, срок действия которых уже истек (так называемые "старые", "просроченные" купоны). И, желательно, чтобы это были разные события - одно фиксировало успешные применения купона, а другое - нерабочие.
Как это сделать? Необходимо найти какое-то условие, которое позволяло бы отличить одни промокоды от других. Поскольку мой сайт разработан на WordPress, и я использую плагин электронной коммерции WooCommerce, то могу на странице корзины после добавления промокода использовать соответствующее уведомление - Код купона успешно добавлен если он активен, и извлечь само значение промокода, введенного пользователем:
Сообщение Время действия этого купона истекло позволит регистрировать события, когда срок действия промокода истек:
А когда пользователи вводят несуществующие промокоды, можно отслеживать еще одно событие - несуществующие промокоды:
Так или иначе, окончательную логику по отслеживанию промокодов на сайте определяете вы сами, а соответствующие уведомления на эти действия могут быть заложены как в сам CMS-движок, который вы используете (как у меня для WordPress и WooCommerce), так и реализованы с помощью вашего программиста.
На osipenkov.ru такие сообщения есть, поэтому мне остается только выполнить все настройки в Google Tag Manager. Давайте приступим!
Для того, чтобы отслеживать события по вводу промокодов, необходимо:
- настроить переменные для извлечения значения промокода со страницы;
- настроить триггеры на соответствующие уведомления;
- настроить теги для Яндекс Метрики и Google Analytics 4.
Этот кейс примечателен тем, что данные на странице расположены в разных местах, что затрудняет (и в то же время увлекает гораздо сильнее) отслеживание. Я также буду использовать разные способы извлечения данных и сами триггеры. Некоторые из этих приемов вы можете использовать в своих проектах.
Успешные (активные) промокоды
Начнем с переменных. Поскольку для разных событий промокоды отображаются в разных местах на странице, нам нужно создать несколько переменных. Начнем с промокода для успешного применения:
Как видите, после применения он присутствует на странице в виде текста. Мы можем попробовать проинспектировать данный элемент, чтобы найти его селектор. Но здесь есть важный нюанс - он должен быть общим для всех промокодов, которые будут вводиться посетителями моего сайта.
Сделав это, я заметил в исходном элементе data-атрибут data-coupon, который содержит значение самого промокода:
Если ввести другой промокод, то в data-coupon будет сохраняться новое значение, и так далее:
Дата-атрибут - это пользовательский атрибут на HTML-элементе, название которого начинается с data- . Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JavaScript при помощи собственного API.
Получается, что в данном конкретном случае data-атрибут data-coupon является самым простым способом отслеживания разных активных промокодов на моем сайте. Нужно только извлечь само значение после знака равно (=). Это и будет сам купон. В моем блоге есть отдельная статья, посвященная отслеживанию событий в GTM с помощью data-* атрибутов. Обязательно прочитайте ее!
Первым делом мы должны убедиться, что на странице корзины присутствует всего лишь один элемент с атрибутом data-coupon:
1 |
document.querySelectorAll('[data-coupon]'); |
В консоли разработчика это будет выглядеть так:
Нулевой индекс (0) означает, что элемент на странице с заданным условием всего один. Это нам и нужно, поскольку мы легко сможем извлечь из него значения промокодов. Сделать это можно с помощью метода getAttribute:
1 2 3 |
var myCoupon = document.getElementsByClassName ('woocommerce-remove-coupon'); var coupon = myCoupon[0].getAttribute('data-coupon'); coupon |
Сначала с помощью переменной myCoupon и команды document.getElementsByClassName возвращается значение всех элементов по имени класса woocommerce-remove-coupon. Затем с помощью переменной coupon мы получаем из атрибута data-coupon по 0 (=единственному) элементу значение введенного промокода:
Класс определяется по элементу, входящему в него:
Этот код я добавлю в пользовательскую переменную типа Собственный код JavaScript с учетом особенностей определения функции и возврата значения с помощью оператора return:
Конечно же, это не единственный способ отслеживания. Во-первых, у вас может не быть дата-атрибутов, и тогда придется использовать другой способ отслеживания. Например, благодаря пользовательской переменной Элемент DOM вы можете задать Селектор элемента (промокода) и извлечь с помощью нее значение текста, содержащееся в этом элементе. Но для этого само значение промокода обязательно должно присутствовать на странице, иначе это сделать не получится.
Альтернативным решением созданной выше переменной Собственный код JavaScript для моего сайта будет такая переменная Элемент DOM с заданным селектором элемента и названием атрибута:
Переменная примет значение, полученное из этого атрибута (например, data-coupon="hny1"). В противном случае значением переменной будет текст, содержащийся в элементе DOM.
Подробнее о том, как находить селекторы у конкретных элементов, читайте в моих других материалах блога:
- DOM (Document Object Model) и BOM (Browser Object Model)
- CSS-селекторы в Google Tag Manager. Часть I
- Селекторы в jQuery. Часть II
- Регулярные выражения в CSS-селекторах и GTM
- CSS Selector Tester и его аналоги
- Google Tag Manager и jQuery
Во-вторых, у вас в принципе может не отображаться значение промокода на странице после успешного его применения. Тогда отслеживание усложняется тем, что вам придется:
- поручить задачу программисту, который сформирует dataLayer и передаст на уровень данных значение промокода, а затем вы извлечете его с помощью переменной уровня данных;
ИЛИ
- сохранить значение промокода в локальном хранилище (localStorage) или файлах cookie, а затем использовать его в любом месте сайта и передать вместе с событием в инструменты аналитики.
Условие должно быть общим для всех промокодов, которые будут вводиться посетителями вашего сайта. А то получится так, что вы нашли селектор элемента для одного промокода, но совершенно забыли про все остальные. И тогда ваше отслеживание будет некорректным.
С переменной для успешных промокодов разобрались. Теперь необходимо настроить триггер, который будет срабатывать только тогда, когда купон успешно применен. Для этого я буду использовать триггер типа Видимость элемента, где в качестве метода выбора задам Селектор CSS, а его значение - селектор элемента на странице с уведомлением Код купона успешно добавлен.
Скопировав значение у соответствующего элемента, я добавлю его в триггер. И чтобы быть точно уверенным, что данный триггер будет срабатывать только на успешное добавление промокода, когда текст в всплывающем окне будет равен или содержать Код купона успешно добавлен. я создам дополнительное условие с пользовательской переменной Элемент DOM:
А сам триггер с дополнительным условием будет выглядеть так:
Поскольку на osipenkov.ru уведомление до ввода промокода не отображается в структуре DOM-дерева, необходимо поставить галочку Регистрация изменений DOM. Тогда после появления HTML-элемента на странице с таким уведомлением мы сможем зарегистрировать событие и активировать нужные теги.
Для активных (успешных) промокодов осталось только создать теги для Яндекс Метрики и Google Analytics 4. Перейдите в раздел Теги и создайте тег типа Google Аналитика: событие GA4. Задайте:
- идентификатор потока данных G- вашего ресурса Google Analytics 4;
- название события для отслеживания активных промокодов (например, promocode_good);
- параметр события (например, user_coupon);
- значение параметра события - переменная Собственный код JavaScript или Элемент DOM для активного промокода, созданная на предыдущем шаге;
- в качестве триггера активации выберите триггер успешного промокода. В моем примере - это Видимость элемента с дополнительным условием активации по тексту уведомления.
Итоговый тег события Google Analytics 4 будет выглядеть таким образом:
Чтобы проверить окончательные настройки, воспользуйтесь режимом предварительного просмотра Google Tag Manager. Перейдите на страницу с вводом промокода, введите активный купон и посмотрите как срабатывает событие и активируется тег. Как оказалось, триггер я настроил верно, и сам тег события GA4 успешно активируется. Только в параметре события значение активного промокода не передается:
Открыв в режиме отладки вкладку Переменные, я увидел, что на событие Видимость элемента моя переменная не принимает нужного значения. Она становится неопределенной:
На другое событие (например, Клик/Click) она отображает корректное значение:
Получается, что в момент появления на странице уведомления об успешной активации промокода и срабатывании триггера Видимость элемента само значение промокода перестает быть доступным. Таким образом, мне ничего не остается, как воспользоваться своим же советом и использовать локальное хранилище (localStorage) или файлы cookie для записи значения промокода с последующим его извлечением.
Дополнительные материалы в моем блоге:
Конечно же, есть и другой вариант отслеживания событий, более простой - настроить триггер на клик по кнопке Применить купон, а не на уведомление об успешном применении, а само значение промокода извлекать из соответствующего поля:
Но тогда мы точно не будем знать какие купоны являются активными, а какие уже устарели. Я в этом кейсе специально описываю наиболее сложные и нетривиальные шаги по настройке, чтобы вы имели представление о том, как это может быть реализовано через диспетчер тегов Google.
Давайте сохраним значение промокода в локальное хранилище. Но для этого нам необходимо дополнительно кое что сделать. Чтобы сохранить значение в localStorage браузера пользователя, нам нужно сначала это значение туда поместить. А сделать это можно с использованием соответствующего поля для ввода промокода (извлечь из него значение), а триггером указать как раз клик по кнопке Применить купон. Сложно? Сейчас все поймете!
Используя локальное хранилище, нам не важно в какой момент пользователь вводит промокод. Главное - записать это значение в браузер пользователя раньше, чем срабатывает наше событие Видимость элемента. Поэтому вернемся на страницу корзины и скопируем селектор поля, в которое пользователи могут вводить сам промокод:
Используя нижеприведенную конструкцию, я добавлю ее в пользовательскую переменную типа Собственный код JavaScript:
1 2 3 4 |
function () { var promo = document.querySelector('#coupon_code').value; return promo; } |
, где вместо #coupon_code вы должны указать селектор CSS своего HTML-элемента (поле, в которое можно ввести промокод) если будете использовать схожее извлечение.
Эта функция предназначена для получения значения, введенного пользователем в поле с кодом купона, и возврата этого значения. В принципе, если эта переменная на триггер Видимость элемента будет отображать правильное значение, то можно использовать и ее как значение для параметра события. Если она тоже принимает undefined, значит продолжаем пробовать нетривиальные способы отслеживания.
Теперь я создам триггер для клика по кнопке Применить купон. Он мне понадобится для тега установки localStorage. Простой триггер, который не требует дополнительных комментариев:
Теперь мне необходимо создать тег типа Пользовательский HTML и добавить в него нижеприведенный код:
1 2 3 4 5 6 |
<script> var localName = "promocode"; // название ключа var localValue = "{{CJS - promo}}"; // значение промокода пользователя localStorage.setItem(localName, localValue); </script> |
В переменной localName мы устанавливаем названием ключа, которое будет записано в браузере пользователя, а в localValue - значение из переменной, созданной на предыдущем шаге. В нем как раз будет содержаться сам промокод, введенный пользователем. А localStorage.setItem - это сам метод Web Storage API, который позволяет сохранять данные в локальном хранилище браузера. Данные, сохраненные с помощью этого метода, остаются доступными даже после закрытия вкладки или перезагрузки страницы. Что нам и нужно. Таким образом, мы сможем сохранить название ключа promocode и значение промокода в localStorage. А сохранять его будем на клик по кнопке Применить купон, поэтому в качестве триггера активации для данного тега указан именно он.
После этого можно перейти в режим отладки GTM и проверить текущую настройку. Введя промокод в соответствующее поле, я нажал кнопку Применить купон. В локальное хранилище моего браузера записалось значение ключа promocode, которое мы прописали в теге, а также само значение, которое я ввел в поле Код купона. Локальное хранилище браузера расположено на вкладке Приложение (Application) - Storage.
Примечание: при вводе нового промокода старое значение будет перезаписываться новым.
Отлично! Теперь нам необходимо извлечь это значение из localStorage, чтобы передать его в аналитику. Для этого я создам еще одну пользовательскую переменную типа Собственный код JavaScript с таким кодом:
1 2 3 4 |
function() { var lStorage = localStorage.getItem('promocode'); return lStorage; } |
Если в локальном хранилище есть элемент с ключом promocode, функция вернет его значение. Если такого элемента нет, функция вернет null.
Вновь запустив режим предварительного просмотра Google Tag Manager, я проверил собственные настройки:
Вот теперь все хорошо. Переменная принимает нужное значение на нужный триггер Видимость элемента. Теперь эту переменную можно использовать в теге события Google Analytics 4, заменив предыдущую на новую.
В режиме отладки триггер срабатывает, активирует тег события GA4, в котором передается событие promocode_good с параметром события и значением активного! промокода в Google Analytics 4:
А используя отчет В реальном времени или инструмент DebugView, прямо в интерфейсе GA4 вы можете убедиться, что данные доходят до вашего ресурса:
Выполняя такую же или схожу реализую, не забудьте создать специальный параметр с областью действия Событие, чтобы видеть статистику в разрезе по вашему параметру события в отчетах и Исследованиях:
Чтобы передать аналогичное событие в Яндекс Метрику, необходимо перейти в интерфейс счетчика аналитики и создать цель типа JavaSript-событие. Задав идентификатор цели (например, promocode_good) скопируйте итоговую конструкцию:
И вставьте ее в тег типа Пользовательский HTML между тегами <script></script>. В качестве триггера активации задайте тот же самый триггер, что и для тега события Google Analytics 4. Но не спешите сохранять тег Метрики, потому что нужно еще добавить четвертый аргумент в нашу конструкцию JS-события и передать сам параметр события (значение активного промокода).
Пример такой реализации показан на скриншоте ниже:
А подробнее о параметрах событий Яндекс Метрики читайте в других материалах моего блога:
Вот только после этого мы можем сохранить новый тег и проверить финальные настройки для аналитических тегов. Для Яндекс Метрики я рекомендую использовать режим отладки GTM и специальный параметр _ym_debug=2, который работает только, если на сайте установлен новый код счетчика Метрики.
Как и в случае с тегом GA4, в режиме отладки диспетчера тегов Google триггер срабатывает, активирует тег события Яндекс Метрики, в котором передается JS-событие promocode_good с параметром события и значением активного! промокода:
Внизу страницы на вашем сайте нажмите значок - появится панель отладки. Информация о достижении цели видна во вкладке Events и Console (более подробная), а параметр события будет отображаться на вкладке Parameters:
Через некоторое время, по мере регистрации события с активными промокодами, в отчетах Параметры событий и Параметры визитов вы будете видеть все введенные пользователями промокоды, которые были активны в момент их использования:
Нерабочие (старые) промокоды
Для нерабочих промокодов и тех, которые в принципе никогда не существовали, условие на странице на моем сайте выводится в другом месте:
И:
Несмотря на это, последовательность действий по отслеживанию таких промокодов точно такая же. Необходимо:
- создать триггер на всплывающие уведомления для нерабочих промокодов;
- создать переменную для извлечения значения промокода со страницы;
- создать теги для Google Analytics 4 и Яндекс Метрики.
Триггер я могу использовать того же самого типа - Видимость элемента, а дополнительные условия активации объединить с помощью регулярного выражения, добавив тексты сообщений - Купона не существует и Время действия этого купона истекло.
Извлечение значения промокода со страницы я подробно описал в части, посвященной отслеживанию активных промокодов (см. выше). Там я использовал разные методики, включая собственный код JavaScript, элементы DOM и сохранение значения купона в локальном хранилище браузера пользователя. Именно последний вариант является наиболее подходящим для моего сайта. Поэтому я буду использовать его и для нерабочих промокодов.
Переменная, которая извлекает значение нерабочего/несуществующего промокода из localStorage, выглядит аналогично:
Если в локальном хранилище есть элемент с ключом promocode, функция вернет его значение. Если такого элемента нет, функция вернет null.
Пример тега события Google Analytics 4 для нерабочих промокодов может выглядеть так:
И тег для Яндекс Метрики:
Для Яндекс Метрики не забудьте создать отдельную цель типа JavaScript-событие, задав идентификатор цели (например, procomode_bad), и скопировать итоговый код цели
Вся последующая отладка выполняет точно так же, как и для активных промокодов. В завершение не забудьте опубликовать контейнер Google Tag Manager, чтобы ваши настройки вступили в силу для всех пользователей.