Главная   ·   Справка   ·   Справка агентствам   ·   Интерфейс   ·   Дополнительные возможности   ·   Установка JS-counter через GTM

Установка трекерного кода AdRiver JS-counter через Google Tag Manager

  • Здесь и далее будет использоваться сокращение GTM вместо Google Tag Manager.
  • Данная инструкция последовательно описывает шаги, которые нужно совершить для размещения кодов AdRiver в GTM. Инструкция не является законченной реализацией, а лишь служит ее демонстрацией. Все указанные в инструкции переменные, триггеры, правила и теги также являются примером.
     

1. Сквозной код (all_site)

Сквозной код необходим для корректной работы остальных кодов системы и должен быть установлен на все страницы сайта.

Установка кода

Для его установки в GTM перейдите в меню «Теги» и нажмите «Создать». В поле «Конфигурация тега» выбираем тип тега «Пользовательский HTML»

Cкопируйте содержимое файла img_all_site.txt и вставьте в текстовое поле конфигурации тега.

В качестве триггера выбираем просмотр страницы «All Pages»

Должно получиться вот так:

Нажмите кнопку «Сохранить», название тега может быть произвольным. Затем нажмите «Отправить» и «Опубликовать», чтобы изменения применились к сайту.

В результате наших действий при посещении каждой страницы сайта увидим вызов кода AdRiver в консоли:

2. Код на карточки товаров (product)

Код на карточки товаров позволяет системе собирать информацию о просмотренных товарах.
Данный код необходимо вызывать при «быстром просмотре» товаров (если такая функциональность есть на сайте) и на страницах товара (карточках товара).
Код должен передавать сведения о просмотренных товарах, а именно – id товара

Установка кода

Для корректной работы кода product в GTM нам потребуется настроить тег, триггер для активации тега и переменную для передачи в тег информации о просматриваемом товаре.

2.1 Настройка переменной для передачи offer_id

В нашем примере на сайте используется передача id товара через JavaScript. В GTM можно получать эти значения через «Переменную JavaScript»:

Код javascript на нашем сайте, который содержит информацию о товаре:

В данном случае нас интересует offerid, в который передается значение M03EWAhM1

В конфигурации переменной GTM указываем название переменной, которая используется на сайте для передачи идентификатора товара:

Внимание! GTM чувствителен к регистру, offerid не будет равно offerID
Название переменной можно выбирать произвольно, для удобства ее дальнейшего использования можно назвать «offerid». Нажимаем «Сохранить» и на этом настройка переменной завершена.

2.2 Настройка триггера

Нам нужно, чтобы код product срабатывал только на карточках товара. В качестве примера, это можно реализовать с помощью триггера просмотра некоторых страниц. Для этого нам понадобится переменная, в которую мы будем передавать тип просматриваемой страницы.
Тип просматриваемой страницы на нашем сайте определяется передачей значения в переменную pageType. Если значение равно productPage, значит мы находимся на странице продукта.

Нам нужно настроить триггер таким образом, чтобы он срабатывал только если pageType получает значение productPage.
Для этого в GTM создадим переменную JavaScript, которая будет получать значение из pageType:

Теперь создадим триггер просмотра страницы:

В условиях активации триггера выберем «Некоторые просмотры страниц», а в качестве событий выберем нашу переменную pageType из списка, равно, и впишем значение, которое должна принимать переменная на карточках товара (в нашем случае productPage):

В названии триггера укажем «Карточка товара», и нажмем «Сохранить». Можно переходить к настройке тега.

2.3 Настройка тега

Создаем тег с типом «Пользовательский HTML», вставляем содержимое файла Товар.txtв поле конфигурации тега, в качестве триггера используем триггер с названием «Карточка товара», который мы настраивали в п. 2.2.
Для передачи id товара в наш код заменяем offer_id в кавычках на переменную, которую мы настроили в п. 2.1 (в нашем случае переменная называется offerid). В GTM для передачи переменных внутри тегов используются двойные фигурные скобки: {{имя_переменной}}
Должно получиться что-то вроде этого:

Сохраняем тег, публикуем изменения в GTM и при посещении карточек товара на нашем сайте вместе со сквозным увидим вызов кода product в консоли:

3. Код на добавление товара в корзину (add_basket)

Установка кода на добавление товара в корзину позволит системе отслеживать пользователей, которые были близки к оформлению заказа на вашем сайте, но покинули сайт, не завершив покупку.
Данный код может быть установлен одним из двух способов:

  • на кнопки «Добавить в корзину» (предпочтительный вариант, т.к. таких действий совершается больше)
  • на страницу корзины пользователя

Код должен передавать сведения о товаре в корзине, а именно – id товара.

Установка кода

Для корректной работы кода add_basket в GTM нам потребуется настроить тег, триггер для активации тега и переменную для передачи в тег информации о товаре, добавляемом в корзину. Переменная, которая получает id товара у нас уже имеется, мы ее настраивали в п. 2.1 (переменная offerid), поэтому мы можем использовать эту переменную как для кода product, так и для корзинных кодов: add_basket и del_basket.

3.1 Настройка триггера

Для добавления товаров в корзину у нас используются кнопки «Добавить в корзину», настроим триггер так, чтобы он срабатывал при клике на эти кнопки.
Для этого нам потребуется встроенная переменная, которая по умолчанию выключена в GTM. Чтобы ее включить, на вкладке «Переменные» нажмем кнопку «Настроить»:

В выпадающем меню справа поставим галочку рядом с переменной Click Text:

Теперь можно переходить к настройке самого триггера.
Создадим триггер с типом Клик – Все элементы:

В настройках триггера в условия активации укажем «Некоторые клики», в качестве событий выберем переменную Click Text, равно, и впишем текст кнопки, при клике на которую должен срабатывать триггер, в нашем случае – «Добавить в корзину»:

Сохраняем и в качестве названия триггера можно указать «Клик – добавить в корзину».

3.2 Настройка тега

Создаем тег с типом «Пользовательский HTML», вставляем содержимое файла Добавление товара в корзину.txtв поле конфигурации тега, в качестве триггера используем триггер с названием «Клик – добавить в корзину», который мы настраивали в п. 3.1.
Для передачи id товара в наш код заменяем offer_id в кавычках на переменную, которую мы настроили в п. 2.1 (в нашем случае переменная называется offerid). В GTM для передачи переменных внутри тегов используются двойные фигурные скобки: {{имя_переменной}}
Должно получиться что-то вроде этого:

Сохраняем тег с произвольным названием, публикуем изменения в GTM и при клике на кнопки «Добавить в корзину» на нашем сайте увидим вызов кода add_basket в консоли:

4. Код на удаление товара из корзины (del_basket)

Установка кода

Для корректной работы кода del_basket в GTM нам потребуется настроить тег, триггер для активации тега и переменную для передачи в тег информации о товаре, удаляемого из корзины. Переменная, которая получает id товара у нас уже имеется, мы ее настраивали в п. 2.1 (переменная offerid), поэтому мы можем использовать эту переменную как для кода product, так и для корзинных кодов: add_basket и del_basket.

4.1 Настройка триггера

Для удаления товаров из корзины у нас используются кнопки «Удалить», настроим триггер так, чтобы он срабатывал при клике на эти кнопки.
Для этого нам потребуется встроенная переменная, которая по умолчанию выключена в GTM. Как ее включить мы рассказали в п. 3.1.
Создадим триггер с типом Клик – Все элементы:

В настройках триггера в условия активации укажем «Некоторые клики», в качестве событий выберем переменную Click Text, равно, и впишем текст кнопки, при клике на которую должен срабатывать триггер, в нашем случае – «Удалить»:

Сохраняем и в качестве названия триггера можно указать «Клик – удалить».

4.2 Настройка тега

Создаем тег с типом «Пользовательский HTML», вставляем содержимое файла Удаление товара из корзины.txtв поле конфигурации тега, в качестве триггера используем триггер с названием «Клик – удалить», который мы настраивали в п. 4.1.
Для передачи id товара в наш код заменяем offer_id в кавычках на переменную, которую мы настроили в п. 2.1 (в нашем случае переменная называется offerid). В GTM для передачи переменных внутри тегов используются двойные фигурные скобки: {{имя_переменной}}
Должно получиться что-то вроде этого:

Сохраняем тег с произвольным названием, публикуем изменения в GTM и при клике на кнопки «Удалить» на нашем сайте увидим вызов кода del_basket в консоли:

5. Код на подтверждение заказа (order)

При успешном завершении оформления покупки на вашем сайте, пользователь переходит на страницу подтверждения заказа, на которой отображается номер заказа, и краткая информация о нем. Благодаря внедрению кода на этой странице система может отслеживать, какие именно товары приобретают пользователи.
При наличии на сайте возможности «быстрого заказа» («заказ в 1 клик») данный код также должен срабатывать при этом действии.
Код на подтверждение заказа должен передавать сведения о номере заказа, а также желательно его сумму и id заказанных товаров.

Установка кода

Для корректной работы кода order в GTM нам потребуется настроить тег, триггер для активации тега и переменные для передачи в тег информации о заказе.

5.1 Настройка переменных

При совершении заказа на сайте формируется информация о заказе в виде переменных JavaScript:

Нам нужно сообщить эту информацию в GTM. Для этого создадим 3 переменные JavaScript в интерфейсе GTM:

В каждой из которых укажем интересующие нас параметры: order_id, order_sumиorder_products:

Должны получиться 3 переменные:

На этом настройка переменных завершена, можно переходить к настройке триггера.

5.2 Настройка триггера

В нашем случае мы хотим вызывать код order при клике на кнопку «Оформить заказ», настроим триггер так, чтобы он срабатывал при клике на эту кнопку.
Для этого нам потребуется встроенная переменная, которая по умолчанию выключена в GTM. Как ее включить мы рассказали в п. 3.1.
Создадим триггер с типом Клик – Все элементы:

В настройках триггера в условия активации укажем «Некоторые клики», в качестве событий выберем переменную Click Text, равно, и впишем текст кнопки, при клике на которую должен срабатывать триггер, в нашем случае – «Оформление заказа»:

Сохраняем и в качестве названия триггера можно указать «Клик – оформление заказа».

5.3 Настройка тега

Создаем тег с типом «Пользовательский HTML», вставляем содержимое файла Оформление заказа.txtв поле конфигурации тега, в качестве триггера используем триггер с названием «Клик – оформление заказа», который мы настраивали в п. 5.2.
Для передачи информации о заказе в наш код нужно будет заменить текст в кавычках на переменные, которые мы настроили в п. 5.1. В GTM для передачи переменных внутри тегов используются двойные фигурные скобки: {{имя_переменной}}
Заменяем "lead_id" на "{{order_id}}"
Заменяем "order_sum" на "{{order_sum}}"
Заменяем "offer_id" на "{{order_products}}"

Должно получиться что-то вроде этого:

Сохраняем тег с произвольным названием, публикуем изменения в GTM и при клике на кнопку «Оформление заказа» на нашем сайте увидим вызов кода order в консоли:

Если декодировать вызванный код, то увидим, что в кастомы передаются корректные значения:

sid=0&bt=62&sz=order&custom=10=M03EWAhM1,DOT4FSD2,SEN4GSS0;150=GF-5123903;151=1140

Альтернативная передача параметров через уровень данных (dataLayer)

Иногда данные, которые мы хотим использовать при активации тегов, могут загружаться только после взаимодействия пользователя со страницей (например, динамическое формирование id заказа)
В этом случае для передачи информации внутрь GTM нам поможет уровень данных (подробнее можно ознакомиться тут: https://developers.google.com/tag-manager/devguide)
Чтобы настроить уровень данных, добавьте в начало страницы перед установленным контейнером GTM следующий фрагмент кода:

<script>
    dataLayer = [];
</script>

Приведенный выше фрагмент кода представляет собой пустой объект, который может быть заполнен информацией для передачи в Google Менеджер тегов.
Заполнить уровень данным можно вызовом push(), который добавляет переменные в уровень данных и заменяет их. Самый простой синтаксис для настройки динамических переменных уровня данных выглядит так: 

dataLayer.push({'variable_name':  'variable_value'});

Здесь variable_name – название переменной уровня данных, которую нужно настроить, а variable_value – значение переменной, которое нужно задать или заменить.
Допустим, нам нужно передать информацию о только что сформированном заказе на уровень данных GTM (а в последствии и в наш код). Сделать это можно вызовом следующего кода на сайте: 

dataLayer.push ({ 
  		'order_sum': '1140',
		'order_id': 'GF-5123903', 
		'order_products': 'M03EWAhM1,DOT4FSD2,SEN4GSS0', 
});

Для получения этой информации в GTM нужно будет использовать переменную уровня данных:

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

Назовем эту переменную «order_products» и сохраним.
Теперь, когда мы будем вызывать эту переменную в GTM, она будет возвращать нам свое значение, в нашем случае это список товаров, оформленных при заказе: M03EWAhM1,DOT4FSD2,SEN4GSS0

Как и все переменные в GTM, переменные уровня данных вызываются через двойные фигурные скобки: {{имя_переменной}}

Пример конфигурации тега в GTM для кода order с вызовом переменных:

В консоли браузера при такой конфигурации тега увидим следующий вызов кода с передаваемыми параметрами:

Проверка корректности настройки тегов и триггеров (Tag Assistant)

В GTM есть возможность после каждого изменения проверить корректность работы настроенного тега.
Для этого нужно кликнуть на кнопку «Предварительный просмотр»:

В предложенном окне введите URL, на котором нужно проверить настроенные теги, и нажмите «Подключить»:

Информация о имеющихся тегах на странице будет на странице Tag Assistant:

Здесь также будет показано какие из тегов были активированы, а какие нет, таким образом можно будет проверить, что тег срабатывает при настроенных триггерах.
Кликнув на тэг, можно узнать при каких условиях он активируется и какой код он при этом выполняет.

После настройки всех тэгов в GTM, изменения нужно опубликовать, чтобы они применились к сайту для всех посетителей. Для этого нужно кликнуть по кнопке «Отправить» и подтвердить действие.