⬆️ Победители в номинации Search Innovation
Google Premium Partner Award

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

Автор:
Аккаунт-менеджер
Рецензент: Олег Гаврилюк
Руководитель оптимизаторов
5,00 2 оценки
24 631 31 комментарий ,
Настройка e-commerce в Google Tag Manager, полная инструкция

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

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

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

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

Читайте также: Путеводитель по Google Analytics для новичков

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

Реализация

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

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

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

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

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

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

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

  1. Корзина
  2. Заказ в один клик

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

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

См. также: Чеклист по увеличение продаж в интернет-магазине

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

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

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

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

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

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

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

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

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

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

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

Читайте также: 7 лучших инструментов для работы с Google Analytics

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

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

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

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

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

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

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

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

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

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

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

Читайте далее: 19 метрик, о которых должен знать каждый интернет-бизнесмен

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

Задача решена.

Удачи с реализацией!

  • Спасибо, с помощью статьи наконец-то решил перевести один из магазинов на GTM.

    Еще интересно, есть ли возможность отслеживания отправки форм, если событие происходит не обычной отправкой, а через AJAX, например, через функцию $.post().

  • Вадим Мосоха

    Приветствую, Сергей!
    Спасибо за отклик.

    Если у не стоит JS заглушка return=»false» или jQuery preventDefault(), то событие submit произойдет. Другими словами, если не стоит перехватчик события submit, то gtm.DOM перехватит событие и все будет ОК.

  • Загвоздка как раз в том, что отправка данных из формы происходит через конструкцию
    Submit, а на стороне JavaScritpt данные берутся так:
    data = $(«input.data»).val();

    То есть как такового события submit не происходит, все идет на уровне JavaScritpt.

  • Вадим Мосоха

    Тогда submit не отследить. Только отслеживать клик по ссылке, но тогда данные будут не точными из-за некоторого количества не успешных отправок форм.

  • mskrus09

    Здравствуйте, все сделал, как написано.

    У меня кнопка оформлена, как input с типом button. Я настроил отслеживание по кликам где правила сделаны так event=gtm.click, element id=main-form. Но GA отслеживает все клики, любые. Что я не так делаю?

    И еще вопрос, хотел настроить Ab тест, через GA. При создании эксперимента нужно задавать цель, а цель у меня событие, которое настроено в GTM. Как быть в такой ситуации?

  • Вадим Мосоха

    Приветствую!

    Проверьте, чтобы было настроено именно одно правило, в котором заданы два условия, а не несколько отдельных правил.
    На практике не тестил А/В тестирование с участием GTM, но по логике, для GA должно быть все равно, GTM это или нет. В настройках целей в GA Вы можете указать тип Событие, описать Категорию и Действие нужного Вам события. Таким образом у Вас будет фиксироваться цель при фиксировании события. Затем эту цель выбрать в настройках эксперимента.

    Успехов!

  • Артур

    Здравствуйте! Уточните пожалуйста. При оформлении заказа в клик, вместо dataLayer, нужно устанавливать эту часть кода:
    ’transactionId’: ’ID транзакции’ — рандомно.
    ’transactionTotal’: ’общая сумма покупки’, — равна цене товара.
    ’quantity’: ’количество товара’ — всегда будет равно 1.
    если так, то на каких страницах? Если нет, то объясните пожалуйста, что куда мне нужно установить. Заранее благодарен.

  • Роман

    Как быстро отразится действие в Analytics? И в каком отчете?

  • Юлия Береснева

    Здравствуйте! Ломаю голову над настройкой e-commerce через событие (физической страницы «Спасибо за покупку» нет, поэтому пытаюсь настроить подсчет транзакции на моменте заполнения формы). Код e-commerce разместили над кодом GTM на моменте заполнения формы, настроили e-commerce в GTM. При отладке видно, что e-commerce запускается, но данные в Google Analytics не поступают (электронная торговля включена). Из-за чего это может быть и как решить?

  • Вадим Мосоха

    Извините, что долго не отвечал на вопросы. Некоторое время не следил за блогом.

    По вопросу.
    Если есть возможность, то нужно организовать страницу благодарности за заказ, на которой вывести сформированный с нужными данными dataLayer. Или формировать его уже на странице товара, т.е. при открытии страницы любого товара, уже будем иметь сформированный dataLayer. А транзакцию фиксировать по отправке формы заказа.

  • Вадим Мосоха

    Роман, данные отображаются быстро, в течении, буквально, секунды-двух. Данные видны в разделе «В режиме реального времени», в любом из этих отчетов.

  • Вадим Мосоха

    Здравствуйте, Юлия!

    Проверяйте в консоли браузера факт отправки данных. Также, можно пользоваться и функционалом GTM для проверки корректной работы тегов — кнопка Просмотреть, слева от кнопки Опубликовать.
    Также, рекомендую обратить внимание на dataLayer.push, инструкция тут https://developers.google.com/tag-manager/devguide
    Может не работать из-за того, что на момент загрузки кода GTM, dataLayer был не полностью сформирован. dataLayer.push должен помочь.

  • Юлия Береснева

    Спасибо!

  • Михаил

    Добрый день , очень полезная статья. Только у меня один вопрос как правильно формировать DataLayer. Если бы был живой пример было бы хорошо. Как должны подтягиваться цены, количество, добавляться новый объект товара. Не программист по этому не очень понятно. Спасибо.

  • Вадим Мосоха

    Здравствуйте, Михаил!

    DataLayer должен иметь определенный формат, чтобы правильно передавать данные. Все, что нужно, описано в инструкции от Google https://developers.google.com/tag-manager/enhanced-ecommerce

    А вот какими переменными передавать нужные значения в DataLayer, это уже индивидуально в каждом движке. Тут я Вам не подскажу.

  • Михаил

    Спасибо, большое.

  • Максим Булкин

    Здравствуйте, Вадим. Может быть вы решали такую проблему: есть пользовательский параметр «Товар в наличии?» — область действия Товар http://piclair.com/ejp7l. Необходимо через Tag Manager передать значение из транзакции в dataLayer в Universal Google Analytics Подскажите вариант решения, если когда-нибудь сталкивались с пользовательскими параметрами в заказах.

  • Никита Котенко

    Философский вопрос: кто как считает транзакцию и какие показатели важнее для вас? транзакция — это ответ эквайринга об успешной оплате? Или транзакция — это сумма сформированного заказа?

  • photosale

    Это же еще для старой версии GTM?

  • Вадим Мосоха

    Добрый день, Максим!
    К сожалению, с подобным дела имел. При случае попробую и отпишусь сюда.

  • Вадим Мосоха

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

  • Вадим Мосоха

    Да, статья написана еще до появления новой версии.

  • Дарья

    Здравствуйте! Столкнулась с проблемой в e-commerce. Транзакции считывает правильно, а вот источники перехода не подтягивает. Пока отслеживали с помощью «Партнерство», который подтягивается от метки ?source=, но этого явно не достаточно. Как можно исправить отслеживание источника по utm-меткам, а не по source? П.С. utm-метки проставлены на каждой ссылке. Заранее спасибо.

  • IsmailAl

    Хорошая статья, спасибо!

    Остался вопрос: можно ли отправить прибыль с каждого купленного товара или хотя бы общую прибыль? То есть для товара указываем закупочную цену, которую не показываем посетителю (в крайнем случае ajax’ом подгружать) и отправляем ее вместе с остальными параметрами товаров.

    Не могу найти об этом инфу нигде. Можно отправлять тегом transactionTax, но это как-то неправильно и только для всех товаров…

  • Вадим Мосоха

    Добрый день!

    Отдельно фиксирование прибыли не предусмотрено.
    Некоторые наши клиенты подтягивают в dataLayer прибыль вместо стоимости покупки.
    Как вариант, чтобы фиксировать и то и другое, можно настроить параллельно оформление заказа как цель и задать для нее средний показатель прибыли непосредственно в GA. Не очень точно, но хоть как-то позволит оценивать прибыль от каждого канала трафика.

  • IsmailAl

    Спасибо за ответ! Попробую.

  • Владимир Дорошев

    Ребят, подскажите пожалуйста:
    — настроил отслеживание транзакций, все фиксируется в Google Analytics, но при заказе 2 и более товаров в транзакцию подтягивается информация только об одном товаре. Код на thank you page отображается верно для обоих товаров. Стоимость транзакции (включая все заказанные товары) подсчитывается тоже верно. В чем может быть проблема? МБ проблема в том, что не вывожу артикул товара?

    п.с. вот код, который отображается на thank you page:

  • Вадим Мосоха

    Добрый день, Владимир!

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

  • Владимир Дорошев

    Да, всетаки дело было в артикуле. Добавил его — и все стало нормально.

  • Сергей Мирный

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

    https://uploads.disquscdn.com/images/c5ad555837876afcd2491dc34874fd6441c5dc160dcc97af9e8399ce6eeacce4.png

  • Максим Мирошник

    Спасибо за статью! Только GTM уже обновился и предложенная инструкция может местами не сработать…