gtag.js ecommerce установка

Простая установка Enhanced Ecommerce с gtag.js. Полный гайд по настройке.

Давайте рассмотрим, как настроить Enhanced Ecommerce с gtag.js (Global Site Tag), и успешно отслеживать все данные о покупках и прочих ecommerce событиях в Google Analytics.

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

Зачем нужен Ecommerce трекинг

Изначально у аналитикса (еще во времена Classic Google Analytics) был простой ecommerce трекинг, который позволят вам отслеживать только транзакции. По сути вы могли отправлять в GA информацию о покупке — чек, который давал понять основную информацию о покупке.

С выходом Universal Google Analytics пришел Enhanced Ecommerce, который внес много нового. А именно: отправлять просмотры продуктов в категориях, детальный просмотр продукта, добавление в корзину, шаги в корзине, дополнительные параметры в корзине, маркетинговые кампании и много другой полезной информации, которая дает понять на каком именно шаге больше всего пользователей покидают воронку покупки.

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

Настройка Google Analytics для Ecommerce

Первое, что вам нужно сделать — это:

  • зайти в настройки Google Analytics и включить Ecommerce на уровне вида (view)
  • по желанию включить отчет Related Products (он вам не помешает)
  • нажать далее и включить Enhanced Ecommerce, как показано на скриншоте ниже
  • далее, по желанию вы можете добавить названия шагов для корзины (например: контакты, доставка, оплата)
  • нажать кнопку submit, или сохранить, чтобы изменения вступили в действие

Ecommerce нужно включать для каждого вида отдельно.

включить ecommerce

Имплементация

Google Analytics может отслеживать следующие ecommerce события:

Product impressions — показы продуктов (например в категориях)
Product clicks — переход на страницу продукта
Product details view — просмотр страницы продукта
Additions to and removals from shopping cart — добавление и удаление продкта из корзины
Promotion impressions — показ рекламы товара на сайте
Promotion clicks — клик по рекламе на сайте
Checkout — корзина
Purchases — покупка
Refunds — возврат.

Все ecommerce данные отправляются событиями.

Product impressions — показы продуктов

Для отслеживания показов продукта отправьте событие view_item_list, например:

Product clicks — переход на страницу продукта

Для отправки кликов по продктам отправьте событие select_content

Product details view — просмотр страницы продукта

После клика по продукту пользователь попадает на его страницу с детальной информацией.Для отслеживания просмотра detail page отправьте событие view_item с данными о продукте.

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

Для добавления в корзину отправьте событие add_to_cart, а для удаления из корзины вместо него установите remove_from_cart.

Promotion impressions — показ рекламы

Показ рекламы — view_promotion.

Promotion clicks — клик по рекламе

Клик по рекламе — select_content.

Checkout — корзина

Для первого шага в корзине отправьте событие begin_checkout

Для следующих шагов в корзине отправляйте событие checkout_progress

В gtag нет параметра step, где надо прописывать номер каждого шага.

Для дополнительных параметров в шаге корзины отправьте событие set_checkout_option

Обратите внимание, что номер шага в корзине прописывается только для отправки дополнительных параметров. Чтобы аналитикс знал — какому шагу присвоить переданное значение.

Purchases — покупка

Для покупок отправьте событие purchase

Refunds — возврат

Для полной отмены транзакции отправьте событие refund

Для частичной отмены отправьте refund с продуктами которые были возвращены

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

В итоге можно сказать, что настройка в Global Site Tag не так уж и сильно отличается от Universal Google Analytics. Теперь только отправка идет сразу со стандартными событиями. Лично я считаю такой способ гораздо удобнее, и немного более понятным, чем предыдущий.

Проверка установки Ecommerce

Для проверки установки я рекомендую использовать как минимум два расширения, которыми пользуюсь я сам, это:

  • GA Debugger — необходимо включить расширение и открыть консоль. В ней будут показано то, что было отправлено в аналитикс. Например:ga debugger console
  • Google Tag Assistant — расширение с графическим интерфейсом, в котором можно посмотреть какие события были отправлены, прочитать рекомендации по установленным тегам, и посмотреть все Measurement Protocol «строки», что были отправлены. Иногда расширение показывает не все события, поэтому рекомендую использовать его в паре с дебаггером описанным выше. Ниже скриншот из Google Tag Assistant:tag assistant инструкция Нажав на значок расширения вы увидите установленные теги. например Google Tag Manager, Analytic, Optimize и т.д.Открыв тег — вы увидите события, которые отправил данный тег.Отрыв событие, например event, или pageview — можно посмотреть все параметры, которые есть в Measurement Protocol.Если при установке были сделаны ошибки — вы можете увидеть что не так выполнив запись в расширении и сделав тестовую покупку. После этого расширение даст вам полный отчет о том. что было передано, на какой странице, где была ошибка и что нужно исправить.Данное расширение является незаменимым помощником любого аналитика!

 

 

Также не забывайте после тестовой покупки проверить отчеты Google Analytics. Обычно данные приходят в течении 10-15 минут.

Спасибо, что прочитали инструкцию до конца, и удачи вам в настройке!

6 комментариев к “Простая установка Enhanced Ecommerce с gtag.js. Полный гайд по настройке.”

  1. Втталий - 2017-11-12 Ответить

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

    • Ruslan - 2017-11-12 Ответить

      Пожалуйста!
      Тут больше нужно не вносить изменения в тег, а дописать новый код (как в примерах выше), который будет отправлять события с ecommerce данными в GA с помощью gtag.js

  2. Наталия - 2017-12-04 Ответить

    Спасибо за статью!
    1. Скажите, если в магазине уже стоит Тег менеджер и через него настроен Аналитикс, не будет конфликта с Gtag и нужен ли он?
    2. Если я установлю все события ЕЕ по этой схеме для передачи данных в Аналитикс мне нужно будет прописывать события в ГТМ или достаточно только поставить на нужные страницы эти скрипты и включить опцию в Аналитиксе?
    3. Я верно понимаю, что скрипты должны стоять только в хеде?

    • Ruslan - 2017-12-04 Ответить

      Пожалуйста 🙂
      1.Если аналитика уже настроена (через analytics.js) — то не нужно. Оставьте как есть. Gtag по сути сам подгружает скрипт аналитикса, и вам не за чем делать это еще раз.
      2. Данная имплементация не требует никакой работы с GTM. В таком случае все отправляет тег gtag.
      3. Не обязательно, просто надо чтобы они стояли после инициализации кода global site tag.

  3. Алексей - 2018-04-16 Ответить

    Подскажите как gtag.js работает с dataLayer?
    Пытаюсь отправить данные с помощью контейнера, но ничего не выходит.

    window.dataLayer = window.dataLayer || []
    dataLayer.push({
    ‘event’: ‘transactionComplete’,
    ‘transactionId’: ‘(номер)’,
    ‘transactionAffiliation’: ‘(магазин)’,
    ‘transactionTotal’: (Сумма),
    ‘transactionProducts’: [{
    ‘sku’: ‘(число)’,
    ‘name’: ‘(имя)’,
    ‘price’: ‘(цена)’,
    ‘quantity’: ‘(количетво)’
    }]
    });

    Переменные условные. Контейнер должен отправляться вместе с событием.

Оставить отклик

Ваш адрес эл.почты не будет опубликован.