f93d982e306d7b2ade82c695cf7ee280

Настройка e-commerce в Google Tag Manager, полная инструкция

Настройка e-commerce в Google Tag Manager, полная инструкция

Эта статья по настройке Google Tag Manager на примере сайта бронирования авиабилетов, поэтому мы предполагаем, что вы уже знакомы с основными понятиями Google Tag Manager (GTM). 

В этом материале мы рассмотрим функционал отслеживания транзакций Google Analytics (GA), которые являются одной из основных метрик, необходимых для понимания эффективности разных каналов трафика. Внедрять систему мы будем с помощью GTM.

В этот раз подопытным выступает уже другой сайт — интернет-магазин спортивного питания, который интересен тем, что имеет два варианта оформления заказа: стандартный заказ через корзину и быстрый заказ «в один клик».

Постановка задачи

Для отслеживания эффективности каналов привлечения трафика на сайт нам нужно понимать не только количественные показатели, такие как факт совершения покупки, но и его качественные характеристики, т.е. сумму каждой транзакции. Можно решить эту задачу присвоением некой усредненной ценности для настроенных в GA целей. По правде, это будет проще, но не так интересно 🙂 Нам же важно научиться и обкатать решение с отслеживанием электронной торговли именно с помощью GTM. К тому же, это решение обеспечит дополнительные полезные отчеты в аналитике.

Реализация

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

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

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

Выглядит он таким образом:

добавлением кода

Внедрение на сайте

Логика заказа

На сайте реализованы два варианта совершения заказа:

  • Корзина
  • Заказ в один клик

Настройка e-commerce в Google Tag Manager, полная инструкция

Оба пути заказа должны завершаться отправкой данных транзакции в GA.

Оформление заказа через корзину

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

Важно учесть, что уровень данных должен выводится выше кода GTM. В противном случае Данные не будут собраны GTM. Если нет возможности вывести dataLayer до кода GTM, то нужно использовать следующий код:

dataLayer.push({'<wbr></wbr>variable_name': 'variable_value'});

Он покажет GTM требуемый массив данных. Подробнее об этом способе — в инструкции Google. В нашем же примере код выводится до кода GTM, а значит, dataLayer.push нам здесь не нужен.

Итак, у нас настроен GTM, включен счетчик аналитики, отслеживаются автоматические события (клики, отправка форм), настроены другие события. Вот так выглядит список тегов для нашего сайта:

Настройка e-commerce в Google Tag Manager, полная инструкция

Теперь убедимся, что в нужном месте на сайте выводится уровень данных:

Настройка e-commerce в Google Tag Manager, полная инструкция

Возвращаемся к GTM.

Нам интересен тег «Транзакция Корзина». Как его создать:

Справка Google: Преимущества Universal Analytics

  1. Создаем новый тег и выбираем тип Universal Analytics.
  2. Указываем идентификатор отслеживания (из GA).
  3. Указываем, что тег обрабатывает транзакцию.
  4. Переходим к настройке условий активации.

Настройка e-commerce в Google Tag Manager, полная инструкция

Настройка e-commerce в Google Tag Manager, полная инструкция

В условиях активации тега, нам необходимо определить событие, выполнение которого приведет к запуску тега. Оно уникально для каждого сайта. Даже в рамках одного сайта условия у нас будут разными. В нашем случае, при оформлении заказа через корзину, мы видим классический пример страницы благодарности за заказ. URL при этом меняется (на многих сайтах весь процесс оформления происходит без смены URLа, и придется искать другое условие). На странице благодарности мы получаем URI такого вида:

/?order4_confirmation_quick=yes&order_success=yes&paymentMethodID=1&orderID=3034

Начиная с &paymentMethodID URI может отличаться, потому нас тут интересует первая половина

/?order4_confirmation_quick=yes&order_success=yes

Зададим его как условия активации:

{{url}} содержит /?order4_confirmation_quick=yes&order_success=yes

И для наглядности зададим условие окончательной загрузки страницы:

{{event}} равно gtm.dom

Визуально это выглядит так:

Настройка e-commerce в Google Tag Manager, полная инструкция

Сохраняем правило. Сохраняем тег. Публикуем версию контейнера. Проверяем в консоле бразера отправку транзакции: либо с помощью GA Debugger, либо во вкладке Network смотрим запросы transaction и item:

Настройка e-commerce в Google Tag Manager, полная инструкция

Оформление заказа в один клик

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

’transactionId’: ’ID транзакции’ – рандомно.
’transactionTotal’: ’общая сумма покупки’, – равна цене товара.
’quantity’: ’количество товара’ – всегда будет равно 1.

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

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

Приступим к настройке.

Справка Google Tag Manager: Прослушивание событий

Как и в заказе через корзину, нам нужно создать тег Universal Analytics, указать идентификатор отслеживания и назначить тип отслеживания «Транзакция». Называем его «Транзакция Купить в один клик». Переходим к настройке правил активации.
Одним из условий будет наличие автоматического события «Прослушивание отправок форм». Выглядит оно так: {{event}} равно gtm.formSubmit. Далее, нам необходимо уточнить, отправка какой именно формы будет активировать выполнение тега. Форма имеет айди «oneClickOrder» — это позволит нам абсолютно точно выделить ее среди остальных, т.к. формы у нас прослушиваются по всему сайту.

В GTM правило {{element id}} равно oneClickOrder будет выглядеть так:

Настройка e-commerce в Google Tag Manager, полная инструкция

Сохраняем правило. Сохраняем тег. Публикуем версию контейнера и проверяем. Все должно заработать. Теперь, при успешном заполнении формы Заказ в 1 клик, GTM выполнит тег транзакции, который получит данные из dataLayer и отправит их в Google Analytics.

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

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.
Если у вас есть доп. списки — будем рады если прикрепите их в комментарии.

Источник

Отправить ответ

Please Login to comment
Войти с помощью: 
  Subscribe  
Notify of
Authorization
*
*
Войти с помощью: 
Registration
*
*
*
Войти с помощью: 

seventeen − 9 =

Password generation