Настраиваем динамический ремаркетинг в GTM без программиста
Зачастую, для привлечения трафика интернет-магазин использует сразу несколько ремаркетинговых систем, таких как Google Ads, пиксель Facebook, VK, myTarget и т. д.
Для работы динамического ретаргетинга в каждую систему вы должны настроить передачу данных с сайта по посещениям карточек товаров, добавлениям в корзину, завершениям оформления заказа и другим действиям.
Я вам расскажу, как это сделать, не привлекая каждый раз программиста. Для примера будем настраивать динамический ретаргетинг в myTarget.
Нам понадобиться диспетчер тегов Google Tag Manager (далее GTM) с уже настроенной передачей данных о расширенной электронной торговле в Google Analytics (далее GA). Если вы еще не настроили расширенную электронную торговлю, то с легкостью найдете в интернете множество статей на эту тему.
Зачем все это?
Возможно, у вас уже возник вопрос: «А зачем это нужно? Пусть программист разбирается …»
Да, программист все сможет настроить сам, но это чревато:
- Вам необходимо будет ставить задачу программисту на каждую ремаркетинговую систему отдельно и ждать своей реализации.
- Если у вас нет своего программиста, то каждое задание стороннему разработчику потребует дополнительной оплаты.
- В каждый отдельный код счетчика будут передаваться свои данные о товарах и заказах. И далеко не факт, что программисты настроят все идентично для всех систем. Вам необходимо будет уделить немало времени на контроль передаваемых данных.
Именно этих проблем мы избежим с помощью GTM. Мы возьмем данные, переданные для GA, и отправим в нужные нам счетчики ремаркетинговых систем.
Углубимся немного в то, как GTM собирает данные, чтобы это реализовать.
dataLayer в GTM
Все данные о посещениях страниц, просмотренных товарах и любых действиях пользователя на сайте помещаются в коде GTM в переменную уровня данных с именем dataLayer.
Например, в карточке товара при настроенной расширенной электронной торговли переменная dataLayer содержит:
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});Как видите, в данном примере dataLayer включает в себя свойства товара, передаваемые в GTM: наименование товара (name), ID товара (id), цена (price) и т. д., а также информацию о действии пользователя: в нашем случае это просмотр карточки товара (detail). Подробнее про содержимое dataLayer смотрите в руководстве по GTM.
Именно из dataLayer мы будем вытаскивать данные о товарах и заказах, чтобы передать в myTarget.
Настраиваем ретаргетинг в myTarget
По документации myTarget для динамического ретаргетинга, необходимо реализовать передачу id товара и цену товара при просмотре карточки товара в его счетчик.
Для этого создадим в GTM две новые переменные, в которых будем по отдельности собирать ID товара и его цену. Затем добавим ссылки на эти переменные в код счетчика myTarget и укажем триггеры срабатывания счетчика.
Теперь подробнее.
Для начала заходим в диспетчере тегов в раздел «Переменные» и создаем новую переменную (кнопка «Создать”).
В конфигурации переменной указываем тип “Переменная уровня данных” и называем эту переменную. В данном случае настраиваем отправку данных об ID, поэтому называем переменную ProductID .
Тип Переменная уровня данных означает, что мы обращаемся к содержимому dataLayer (вытаскиваем оттуда id товара).
В поле “Имя переменной уровня данных” пишем строку “ecommerce.detail.products.0.id” и нажимаем Сохранить“:
Итак, теперь в списке переменных у нас есть одна дополнительная переменная ProductID:
Используя этот прием, вы можете просто заменить “id” на название любой другой переменной из кода выше (name, variant и т. п.), чтобы записать значение этой переменной в созданную в GTM переменную.
Например, для получения цены я буду использовать строчку “ecommerce.detail.products.0.price”.
Аналогично добавляю переменную с ценой и называю ее ProductPrice.
Шаг 2. Добавляем переменные в код счетчика
Теперь мы можем использовать переменные в коде ремаркетинга myTarget для передачи данных о просмотренных товарах.
Для этого перейдем в теги и добавим новый тег для myTarget. Код счетчика берем из инструкции по использованию myTarget и подставляем в него созданные переменные в нужных строках кода (см. ниже).
Обратите внимание, что при добавлении переменных нужно обязательно добавить две фигурные скобки — и перед, и после названия переменной:
{{ProductID}}{{ProductPrice}}
Шаг 3. Добавляем триггер для myTarget
В качестве триггера выбираем тип Пользовательское событие и далее выполняем действия:
- в поле Имя события указываем gtm-ee-event,
- в условии активации триггера выбираем Некоторые специальные события,
- а ниже выбираем, какое именно событие — GTM EE Event Action равно Product Details.
Сохраняем триггер и созданный тег.
Эти настройки означают, что наш код будет срабатывать только тогда, когда в GTM в dataLayer будут отправляться данные о детальном просмотре карточки товара. Таким образом, мы гарантированно будем передавать данные в myTarget, только если мы получили данные о товаре в GTM.
Отлично! Данные, передаваемые о товаре для GA, автоматически отправятся и в счетчик ремаркетинга myTarget.
Если товаров много…
Данные о просмотре карточки товара мы успешно передали. Но по требованиям myTarget мы, как минимум, должны передать и данные по сделанному заказу (ID товаров и сумма заказа). В заказе может быть больше одного товара, что усложняет задачу.
Посмотрим, как выглядит код dataLayer для сделанного заказа с несколькими товарами:
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345',
'affiliation': 'Online Store',
'revenue': '35.43',
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': ''
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>В данном случае в заказе два товара (внутри блока products). Мы должны собрать ID и сумму всех товаров.
Для этого создадим еще одну переменную уровня данных, где сохраним информацию о товарах в заказе. Затем напишем два небольших JavaScript обработчика этой переменной (для сбора ID и суммы заказа) и передадим результаты в новый счетчик ремаркетинга myTarget.
Шаг 1. Создаем переменную уровня данных
Возвращаемся в GTM в раздел «Переменные» и создаем новую переменную уровня данных — Allproducts_purchase. При этом в свойство «Имя переменной уровня данных» нужно подставить строку “ecommerce.purchase.products”.
Тем самым мы передали все данные о купленных товарах (из блока products) в одну переменную GTM. И теперь из нее нужно извлечь все нужные данные о товарах.
Шаг 2. Получаем сумму товаров
Создадим еще одну переменную — ProductsPrices_purchase, но уже выберем конфигурацию “Собственный код JavaScript”:
Запишем в поле “Собственный код JavaScript” следующий код:
function() {
a = {{Allproducts_purchase}};
var prod_value = 0;
for (var i=0; i<a.length; i++) {
prod_value += +a[i].price * +a[i].quantity;
}
return prod_value;
}Этот несложный код обращается к созданной ранее переменной “Allproducts_purchase”, собирает из нее все цены товаров и суммирует их. Сохраним эту переменную и двинемся дальше. К этим данным мы еще вернемся.
Шаг 3. Собираем ID товаров
Аналогичным образом нам нужно собрать все ID товаров в заказе, причем необходимо учесть формат передачи ID товаров в myTarget:
[ID1,ID2…]
Создаем еще одну переменную с конфигурацией “Собственный код JavaScript” и названием “ProductIDlist_purchase”. Добавляем в нее код и сохраняем:
function() {
a = {{Allproducts_purchase}};
var lst = '[';
for (var i=0; i<a.length; i++) {
var prod = a[i].id;
if (i==a.length-1) {
lst += prod;
}
else {
lst += prod + ',';
}
}
lst += ']';
return lst;
}Итак, мы сохранили ID всех товаров в переменную ProductIDlist_purchase и сумму заказа в переменную ProductsPrices_purchase. Нам остается передать все полученные данные в нужный тег и установить триггер.
Шаг 3. Отправляем данные в счетчик myTarget
Переходим в раздел «Теги», создаем новый тег и добавляем в него код ремаркетинга от myTarget для страницы покупки. В нужные строки кода включаем название переменных с нашими данными о товарах — {{ProductIDlist_purchase}} и {{ProductsPrices_purchase}}:
Шаг 4. Добавляем триггер сделанного заказа
В качестве триггера также выбираем тип «Пользовательское событие» и далее выполняем действия:
- в поле «Имя события» указываем «gtm-ee-event»,
- в условии активации триггера выбираем «Некоторые специальные события»,
- ниже выбираем событие — будьте внимательны! — GTM EE Event Action равно Purchase.
Сохраняем триггер и созданный тег.
В этом триггере мы указали, что код должен срабатывать только тогда, когда GTM получает данные о сделанном заказе для Google Analytics.
Для выполнения минимальных требований myTarget остается добавить тег с кодом myTarget для страницы «Корзины».
Сделать это можно, повторив все шаги передачи данных о сделанном заказе (из раздела «Если товаров много…»). Отличие состоит только в том, что в переменной уровня данных вам следует указать «ecommerce.checkout.products», а в триггере в событие — выбрать «равно Checkout».
Используемая литература: