Зачастую, для привлечения трафика интернет-магазин использует сразу несколько ремаркетинговых систем, таких как Google Ads, пиксель Facebook, VK, myTarget и т. д.

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

Нам понадобиться диспетчер тегов Google Tag Manager (далее GTM) с уже настроенной передачей данных о расширенной электронной торговле в Google Analytics (далее GA). Если вы еще не настроили расширенную электронную торговлю, то с легкостью найдете в интернете множество статей на эту тему.

Зачем все это?

Возможно, у вас уже возник вопрос: «А зачем это нужно? Пусть программист разбирается …»

Да, программист все сможет настроить сам, но это чревато:

1. Вам необходимо будет ставить задачу программисту на каждую ремаркетинговую систему отдельно и ждать своей реализации.
2. Если у вас нет своего программиста, то каждое задание стороннему разработчику потребует дополнительной оплаты.
3. В каждый отдельный код счетчика будут передаваться свои данные о товарах и заказах. И далеко не факт, что программисты настроят все идентично для всех систем. Вам необходимо будет уделить немало времени на контроль передаваемых данных.

Именно этих проблем мы избежим с помощью 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 и укажем триггеры срабатывания счетчика.

Теперь подробнее.

Шаг 1. Создаем переменные в GTM

Для начала заходим в диспетчере тегов в раздел «Переменные» и создаем новую переменную (кнопка «Создать”).

В конфигурации переменной указываем тип “Переменная уровня данных” и называем эту переменную. В данном случае настраиваем отправку данных об 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».

Используемая литература:

1. Документация Google Analytics по расширенной электронной торговле
2. Документация myTarget по динамическому ретаргетингу
3. Руководство Google Tag Manager для разработчиков
4. Data Layer Variable in GTM: What, Why, and Where?