Настройка отслеживания электронной торговли через Google Tag Manager

Если вы как специалист (или даже владелец), работаете с интернет-магазином, то вам наверняка захочется собирать и анализировать данные о покупках и транзакциях. Для этого лучше всего подойдет группа отчетов Google Analytics «Электронная торговля».

Чтобы в отчетах появились данные по электронной коммерции, необходимо сделать следующее:

1. Включить электронную торговлю в отчетах.
2. Настроить тег и триггер в GTM.
3. Добавить код сбора данных на сайт или в приложение.
4. Настроить подстановку параметров заказа и товаров в код.

Ну что ж, начнем.

Включаем электронную торговлю в отчетах

Существует два основных способа реализации отслеживания электронной торговли:

• Стандартная электронная торговля.
• Расширенная электронной торговля.

Сегодня мы будем настраивать стандартную электронную торговлю (e-commerce), которая содержит данные по покупкам совершенным на вашем сайте, а именно информацию о товарах, транзакциях, средней стоимости заказов, коэффициенте транзакций, источнике и канале трафика и т. д.

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

Переходим в раздел «Администратор» Google Analytics, далее выбираем уже готовое представление, либо заводим новое (приоритетный вариант, дабы не испортить данные в существующем) и выбираем пункт меню «Настройки электронной торговли» где включаем отслеживание.

Настройка тега и триггера в Google Tag Manager

Чтобы код электронной торговли сработал, нам необходимо задать условия при которых это должно происходить. Лучше всего для этого подходит отдельная страница «Спасибо за покупку», которая появляется после оформления заказа и есть практически в любом интернет-магазине. Возможны варианты, когда такой страницы нет, на одностраничниках, либо при покупке через «Заказ в один клик», но такие случаи я не буду разбирать.

Заходим в GTM и создаем новый тег со следующей конфигурацией:

• Тип тега — Universal Analytics
• Тип отслеживания — Транзакция
• Включить переопределение настроек в этом теге — да
• Идентификатор отслеживания — тут ваш идентификатор Google Analytics (в моем случае использована переменная).

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

Настройки следующие:

• Тип триггера — Просмотр страницы — Модель DOM готова (так как код электронной торговли должен быть размещен выше контейнера GTM, что не всегда возможно, рекомендую настроить активизацию тега после полного окончания загрузки страницы)
• Триггер активируется на следующих страницах — Некоторые события «Модель DOM готова»
• Активировать триггер при наступлении события и выполнении всех этих условий — тут указываем URL адрес (или часть адреса) вашей страницы «Спасибо за покупку».

Сохраняем триггер и тег (но пока не публикуем).

Добавление кода электронной торговли на сайт

Чтобы в Google Tag Manager попали сведения о заказе нужно использовать уровень данных (dataLayer), который должен содержать имена переменных (обязательные переменные отмечены жирным шрифтом в таблице ниже).

Данные о транзакции

Данные о товарах

Пример кода уровня данных на JavaScript из документации Google:

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'transactionId': '1234',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38,26,
   'transactionTax': 1,29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'футболка',
       'category': 'одежда',
       'price': 11,99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'носки',
       'category': 'одежда',
       'price': 9,99,
       'quantity': 2
   }]
});
</script>

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

Я решил хоть как-то осветить этот немаловажный пункт.

Настройка подстановки параметров заказа и товаров в код

Внедрять электронную торговлю будем на сайт под управлением 1С Битрикс. Для этого нам понадобятся следующие файлы компонента «Одношаговое оформление заказа» (sale.order.ajax), который должен находиться в папке вашего шаблона сайта:

• template.php — шаблон оформления заказа
• confirm.php — шаблон страницы «Спасибо за покупку»

Информацию о заказе необходимо отправлять только тогда, когда покупатель попал на страницу «Спасибо за покупку». Для этого подходит стандартный шаблон confirm.php, куда попадает пользователь при успешном оформлении. В нем доступен массив $arResult, который содержит все необходимые сведения о заказе. Основная проблема здесь — не дать отправить в Google Analytics данные второй раз, допустим, когда пользователь обновит страницу или зайдет на нее еще раз. Это решается установкой метки в сессии при заполнении полей заказа (в стандартном шаблоне — template.php, после условия редиректа) и удалением ее при первом заходе на confirm.php.

Код установки метки в сессии для шаблона template.php (разместите после условия редиректа):

<?
$_SESSION['GA_ON']=true; // метка в сессии нужна для дедубликации 
?>

Код отправки данных в dataLayer который нужно добавить в самое начало шаблона confirm.php:

<?
 if($_SESSION['GA_ON']==true){ // метка в сессии, добавляем данные в dataLayer если разрешено
?>

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
    'transactionId': '<?=$arResult["ORDER"]['ID']?>', // номер заказа
    'transactionTotal': '<?=$arResult["ORDER"]['PRICE']?>', // сумма заказа
    'transactionTax': '<?=$arResult["ORDER"]['TAX_VALUE']?>', // сумма налога
    'transactionShipping': '<?=$arResult["ORDER"]['PRICE_DELIVERY']?>', // стоимость доставки
    'transactionProducts': [
     <?
        $arItems=array();
        $arIds=array();
        $basItems=CSaleBasket::GetList(array(),array('ORDER_ID'=>$arResult["ORDER"]['ID'])); // достаем информацию о товарах в корзине
        while($basItem=$basItems->Fetch()){?>
    {
        'sku': '<?=$basItem['PRODUCT_ID']?>', // артикул товара
        'name': '<?=str_replace("'",'"',$basItem['NAME'])?>', // название товара
        'category': '', // тут категория, если есть
        'price': '<?=$basItem['PRICE']?>', // стоимость товара
        'quantity': '<?=$basItem['QUANTITY']?>' // количество единиц товара
    },
          <?}?>
]
});
</script>

<?}
    unset($_SESSION['GA_ON']); // удаляем метку разрешения отсылки транзакции, чтобы не было дублей
?>

Тестирование, отладка и запуск

После того как электронная торговля включена в представлении Google Analytics, настроен тег и триггер в Google Tag Manager, а также размещен код в шаблонах сайта самое время приступить к тестированию.

Выполните следующие действия:

1. 1. Проверьте наличие контейнера GTM на странице «Спасибо за покупку» (по хорошему, контейнер должен быть установлен абсолютно на всех страницах сайта).
   2. Зайдите в режим предварительного просмотра GTM и в этом режиме перейдите на тестируемый сайт.
   3. Добавьте любой товар в корзину и оформите заказ.
   4. На странице «Спасибо за покупку» в отладчике GTM проверьте правильность срабатывания тега и триггера, добавления данных в dataLayer и подстановки параметров заказа и товара.
      
   5. Если тег и триггер сработали, все параметры подставились в код правильно, то обновляем страницу «Спасибо за покупку» и проверяем чтобы эти данные не ушли в Google Analytics еще раз (как раз для этого мы и проставляли метку в сессии).
   6. Через некоторое время (5-15 минут) данные по электронной торговле должны появиться в отчетах Google Analytics.

      

   7. Выходим из режима предварительного просмотра GTM, публикуем тег и пользуемся отчетами!

Буду рад ответить на возможные вопросы в комментариях.

• Об авторе
• Свежие записи

Роман Романчук

Эксперт по маркетинговой и продуктовой аналитике, ex-директор по аналитике Сравни.

• Как правильно организовать работу с гипотезами? - 21.11.2023
• Кейс: как построить отдел аналитики в большой компании? - 06.05.2023
• Учимся применять оконные функции - 29.09.2020