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

Автор: Роман Романчук
Настройка электронной коммерции в Google Analytics

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

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

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

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

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

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

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

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

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

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

Настройка электронной торговли в Google Analytics

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

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

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

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

Настройка тега отслеживания электронной торговли

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

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

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

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

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

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

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

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

Имя переменной Описание Тип
transactionId Уникальный идентификатор транзакции Строка
transactionAffiliation Партнер или магазин Строка
transactionTotal Общая сумма транзакции Число
transactionShipping Стоимость доставки для данной транзакции Число
transactionTax Сумма налога для данной транзакции Число
transactionProducts Список приобретенных товарных единиц для данной транзакции Массив объектов товаров

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

Имя переменной Описание Тип
name Название товара Строка
sku Идентификатор товара Строка
category Категория товара Строка
price Цена за единицу товара Число
quantity Количество единиц товара Число

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

      Отчеты по электронной торговле в Google Analytics

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

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

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

Эксперт по маркетинговой и продуктовой аналитике, ex-директор по аналитике Сравни.
37 replies on “ Настройка отслеживания электронной торговли через Google Tag Manager ”

  1. Спасибо за отличную статью!
    Один вопрос, что подразумеваете под «разместите после условия редиректа»… это где?

    Ответить

  2. А вы планируете делать обзор подключение расширенной электронной торговля?

    Ответить

  3. Роман, спасибо большое за статью. Остался один вопрос, вы пишите:»так как код электронной торговли должен быть размещен выше контейнера GTM…» А потом в коде ЭТ используетет метод push: «dataLayer.push({ ….» Но ведь этот метод мы используем для передачи данных на уровень данных ниже кода ГТМ контейнера (если я не ошибаюсь). то есть или код ЭТ мы размещаем после ГТМ и тогда пуш, или метод отправки данных дб — dataLayer = [{}]; Внимание вопрос: куда вы впиливаете код ЭТ?) до или после контейнера ГТМ на странице «спасибо».

    Ответить

    1. сам себе отвечаю) чтобы докидывать данные по транзакциям с помощью метода пуш (у нас, например, все данные по транзакции живут в боди, а
      ГТМ в хэдах), нужно после объявления данных сделать еще событие по которому будет активироваться тег, докидывающий данные в аналитику. то есть последовательность загрузки кодов дб такая: контейнер ГТМ (в хэде), данные по транзакции через пуш (в боди), событие джаваскриптовое типа send_transaction, и по нему уже делаем триггер и активируем тег ГТМ транзакция, который подхватит данные и отправит их в аналитику) проверено работает!

      Ответить

      1. Здравствуйте, Екатерина!
        Извиняюсь за столь поздний ответ и давайте по пунктам:
        1) «так как код электронной торговли должен быть размещен выше контейнера GTM…»
        Да, именно так. Потому что это рекомендация Google https://developers.google.com/tag-manager/devguide
        2) Все будет работать корректно, так как в коде есть проверка объявлена ​​ли глобальная переменная dataLayer. Если да, то push().
        Вот эта строка:
        window.dataLayer = window.dataLayer || []
        3) «событие джаваскриптовое типа send_transaction, и по нему уже делаем триггер и активируем тег ГТМ транзакция, который подхватит данные и отправит их в аналитику»
        Это какай-то лишний костыль 😉 И без него все работает.

        Ответить

        1. спасибо, я понял. теперь все что кидаю на уровень данных, кидаю этим способом.

          Ответить

  4. Роман, здравствуйте. Спасибо, отличный мануал. У меня вот проблема — все работает, а в отчетах пусто. Можете предположить где искать ошибку? — Настраивал по вашей инструкции.
    Уточню: тег срабатывает по триггеру «Окно загружено» — Некоторые события «Окно загружено». Вроде бы все правильно, но в отчеты ничего не приходит.
    https://uploads.disquscdn.com/images/63ea857d293366fcd47b9dd0ff106049fd1406a51523f15efdbfd0208e8e1a5c.png

    Ответить

    1. Извиняюсь за столь поздний ответ. Разобрались с проблемой?
      И я бы советовал все же использовать триггер «Модель DOM готова», поскольку пользователь может не дождаться полной загрузки страницы (все скрипты, изображения и тп) и транзакция не уйдет в GA.

      Ответить

      1. Здравствуйте. Нет, проблему не решил. Я в режиме отладки вижу, что триггер срабатывает, но в отчетах GA ничего нет. Я со стороны специалиста привлекал, он тоже не смог добиться появления данных в отчетах. Грешу на Битрикс или защитные механизмы, которые разработчики сайта поставили на сервер.

        Ответить

        1. 1) В настройках GA вы включили функции электронной торговли?
          2) Может быть какой-нибудь фильтр GA срабатывает? Проверьте.
          3) В консоли разработчика проверьте не блокируются ли скрипты GA.

          Ответить

          1. Роман, спасибо. Действительно скрипты чем-то блокируются. Буду решать проблему с разработчиками сайта.

          2. Роман, здравствуйте. У меня похожая проблема. Вроде все настроено корректно, но транзакций в отчетах нет. Как вы выяснили, что скрипты GA блокируются именно на стороне сайта?

          3. Константин, я выяснил не сам — попросил разработчиков проверить эту версию. Как они выясняли я не в курсе.

          5. Зайдите в консоль разработчика, обновите страницу и посмотрите, какие из скриптов ga подсвечиваются красным.

          6. Роман, спасибо за совет. Разработчики помогли разобраться. Вы не планируете опубликовать подобное руководство для отслеживания заказов «в 1 клик»? Бьемся над этим сейчас ))

  5. Роман, здравствуйте. Спасибо за статью. Подскажите пожалуйста в какое место в шаблоне confirm.php нужно вставлять этот код http://joxi.ru/5mdJWLptkK81eA ?
    Если настраивать не через GTM, а классическим способом.

    Ответить

        1. Да, строчка эта.
          А проверить можно сделав несколько тестовых заказов) Если все настроено правильно, то через некоторое время транзакции должны появится в отчетах.

          Ответить
  7. Уведомление: Почему нельзя избегать программистов при настройке электронной коммерции
  8. Уведомление: Почему нельзя избегать программистов при настройке электронной коммерции | testdrive

  9. Здравствуйте!
    Скажите, что может быть, открыл код страницы, а там одна часть кода тег менеджера есть, а одной нету, ну она пустая. При том что просматривая код шаблона из админки, он есть.
    При этом Tag Assistant говорит что все в порядке, ошибок нету. На странице спасибо за покупку, при просмотре через ГТМ показывает код отработал.
    Спасибо!
    https://uploads.disquscdn.com/images/886cd87aceef6a0107e3ca6503949a50bf4dc072cd726f9c4f37d72f83154e50.png

    Ответить

      1. Тригер настроен так как указано в инструкции выше. На данный момент данные стали поступать в аналитику. Была проблема в том, что cms меняла местами вставленые кода gtm и собственно код отправки данных в dataLayer. Что я сделал, после чего заработало: разместил коды gtm и dataLayer только на странице завершения покупки, в нужном порядке. После этого данные стали поступать в аналитику. Вообщем кто знает, что там было) Оттестил кучей заказов, пока все корректно передает. Спасибо за очень крутой гайд.

        Ответить

      1. Та в том то и дело)) суть я понимаю, а вот правильно прописать код не. Но все равно спаисбо))

        Ответить
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *