Настроить электронную коммерцию через gtm

Настройка отслеживания электронной торговли через 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), который должен содержать имена переменных (обязательные переменные отмечены жирным шрифтом в таблице ниже).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Руководство по расширенной электронной торговле для разработчиков (Universal Analytics)

В этом руководстве описывается, как реализовать на сайте функции Universal Analytics для расширенной электронной торговли с помощью Google Менеджера тегов.

Обзор

С помощью функций расширенной электронной торговли для Google Аналитики вы можете передавать данные о просмотре товаров, промоакциях и покупках вместе с информацией о просмотрах страниц и событиях, отслеживаемых Google Аналитикой. Просмотры страниц используются для отслеживания показов товаров и покупок, а события – для отслеживания кликов по товарам и этапов оформления покупки.

Подготовка к работе

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

Включение функций для расширенной электронной торговли

В большинстве реализаций расширенную электронную торговлю нужно включить для каждого тега просмотра страницы или события Universal Analytics. Это можно сделать в редакторе тегов одним из следующих способов:

• с помощью уровня данных (рекомендуется);
• с помощью собственного макроса JavaScript.

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

Использование уровня данных

Ниже описывается, как использовать уровень данных для отслеживания действий расширенной электронной торговли, таких как:

Очистка объекта электронной торговли

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

Показы товаров

• Показатель электронной торговли: impressions .
• Допустимые данные: массив объектов impressionFieldObjects .

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

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Клики по товарам

• Показатель электронной торговли: click .
• Допустимые данные: list , массив объектов productFieldObjects .

Чтобы подсчитывать клики по ссылкам на товары, передайте на уровень данных действие click и объект productFieldObject для нужных товаров. Пример:

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce .
Действие события: Product Click .
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно productClick .

Показы сведений о товарах

• Показатель электронной торговли: detail .
• Допустимые данные: list , массив объектов productFieldObjects .

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

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Добавление товаров в корзину и удаление их из корзины

• Показатель электронной торговли: add , remove
• Допустимые данные: list , массив объектов productFieldObjects .

Аналогичным образом можно подсчитывать товары, добавленные в корзину или удаленные из нее. Для этого используйте объекты действий add или remove класса actionFieldObject , а также список объектов productFieldObjects .

Добавление товара в корзину

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce .
Действие события: Add to Cart .
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно addToCart .

Удаление товара из корзины

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce .
Действие события: Remove from Cart .
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно removeFromCart .

Внутренняя реклама

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

Показы внутренней рекламы

• Показатель электронной торговли: promoView .
• Допустимые данные: массив объектов promoFieldObjects .

Чтобы подсчитывать показы внутренней рекламы, укажите в качестве ключа promoView переменной на уровне данных электронной торговли объект promoFieldObject , соответствующий показанной рекламе.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Клики по внутренней рекламе

Чтобы подсчитывать клики по внутренней рекламе, передайте на уровень данных действие promoClick , а также массив данных с объектом promoFieldObject , содержащим ее описание.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce.
Действие события: Promotion Click.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно promotionClick .

Оформление покупок

Чтобы отслеживать все этапы оформления покупки, необходимо:

1. Отслеживать каждый этап с помощью действия checkout .
2. Если применимо, отслеживать параметры покупки с помощью действия checkout_option .
3. Вы также можете присвоить понятные названия каждому шагу на пути к покупке. Для этого откройте вкладку Администратор и перейдите в раздел Настройки электронной торговли.

1. Этапы оформления покупки

• Показатель электронной торговли: checkout .
• Допустимые данные: step , массив объектов productFieldObjects .

Чтобы отслеживать весь процесс покупки, который может включать нажатия кнопки оформления заказа, а также действия на разных страницах, где пользователь указывает адрес доставки и платежную информацию, задайте ее этапы с помощью действия checkout и поля step . Также с помощью поля option вы можете запрашивать со страницы дополнительную информацию, например о выбранном способе оплаты.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce .
Действие события: Checkout .
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно checkout .

2. Параметры покупки

• Показатель электронной торговли: checkout_option .
• Допустимые данные: step , option .

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

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Event.
Категория события: Ecommerce .
Действие события: Checkout Option .
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно checkoutOption .

3. Настройка последовательности оформления покупки

Каждому этапу оформления покупки можно присвоить понятное название, по которому вам будет проще узнать этап в отчетах. Для этого откройте вкладку Администратор в веб-интерфейсе Google Аналитики, выберите представление (профиль) и перейдите в раздел Настройки электронной торговли. Задайте названия, следуя инструкциям.

Рис. 1. Настройки электронной торговли: процесс оплаты Примечание. Если не присвоить этапам названия, будут использованы варианты по умолчанию: этап 1, 2, 3 и т. д.

Покупки

• Показатель электронной торговли: purchase .
• Допустимые данные: id (идентификатор транзакции), массив объектов productFieldObjects .

Передайте сведения о транзакции на уровень данных с помощью действия purchase и события event , которое будет активировать тег для расширенной электронной торговли. В примере ниже данные транзакции известны в момент загрузки страницы. Они будут переданы с просмотром страницы в ответе скрипта gtm.js :

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Возвраты

• Показатель электронной торговли: refund .
• Допустимые данные: id (идентификатор транзакции), массив объектов productFieldObjects .

Чтобы получить статистику по полному возврату суммы транзакции, передайте объект refund с действием actionFieldObject вместе с идентификатором возвращенной транзакции.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Чтобы получить статистику по частичному возврату, добавьте список объектов productFieldObjects с идентификаторами товаров и возвращаемыми суммами.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Передача специальных параметров товара

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

Вместо n должно быть указано натуральное число. Пример:

Передача специальных показателей товара

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

Вместо n должно быть указано натуральное число. Пример:

Объединение показов и действий

Информацию о показах и действии можно отправить в одном обращении.

В примере ниже показано, как получить статистику по просмотру сведений о товаре с показами товара в разделе сопутствующих товаров.

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Использование уровня данных: true .
Триггер: event равно gtm.dom .

Использование собственных макросов JavaScript

Если ваш сайт не поддерживает уровень данных, используйте собственный макрос JavaScript для вызова функции, которая возвращает объект данных электронной торговли. В объекте должен соблюдаться синтаксис уровня данных, приведенный выше. Например:

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

Конфигурация тегов, использованная в примере

Тип тега: Universal Analytics.
Тип отслеживания: Pageview.
Функции расширенной электронной торговли: true .
Читать данные из макроса: <> .
Триггер: event равно gtm.dom .

Настройка макроса: gaEcommerceData .
Тип макроса: собственный макрос JavaScript.
Тело функции: см. пример выше.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Источник