Полезности

Настройка плагина Google Tag Manager for WordPress

Решил написать небольшую шпаргалку по настройке расширенной электронной торговли при помощи плагина Google Tag Manager for WordPress. На всякий случай вот ссылка на оригинальную инструкцию (на английском). Всё что ниже будет мой вольный пересказ плюс личный опыт. Исходим из того, что плагин уже установлен и активен.

Первым пунктом нужно зайти в настройки плагина - вкладку Integration tab, нажать на WooCommerce (см картинку ниже):

Настройка плагина Google Tag Manager for WordPress

и отметить галочкой Track enhanced e-commerce. А в поле Products per impression заменить нолик на 10. Пролистать вниз и сохранить, кликнув по Save.

Какие теги, триггеры и константы указать для плагина?

Подозреваю, что большинство из вас читают данный текст ради этой информации 🙂

Итак, переходим в диспетчер тегов Google. Для начала создадим парочку пользовательских переменных. Переходим в раздел "Переменные" нажимаем "Создать" и задаём константу UA ID в которую поместим наш ID из Гугл Аналитики. Получится примерно так:

UA ID

Кроме этого создадим переменную типа "Настройки Google Analytics". В качестве идентификатора отслеживания укажем {{UA ID}}, который создали на прошлом шаге. А также убедимся что галка в разделе "Электронная торговля" снята.

Настройки Гугл Аналитикс
После этого переходим к созданию триггеров. Нам понадобится 7 штук. Шесть из них, а именно:

  • gtm4wp.productClickEEC
  • gtm4wp.addProductToCartEEC
  • gtm4wp.removeFromCartEEC
  • gtm4wp.checkoutOptionEEC
  • gtm4wp.checkoutStepEEC
  • gtm4wp.changeDetailViewEEC

создаются так:

Создаём триггеры для аналитик на Вукомерц

Название: Любое
Тип триггера: Пользовательское событие
Имя события: (одно из списка, например: gtm4wp.productClickEEC)
Использовать регулярные выражения: Ставим галочку

Седьмой триггер создаётся похожим образом. Его имя gtm4wp.productImpressionEEC, но галочку напротив "Использовать регулярные" выражения не ставим.

Создание триггера gtm4wp.productImpressionEEC

Теперь переходим к настройке тегов. Всего из нужно три.
Настройка первого разблокирует такие опции как:

  • Product detail page
  • Checkout funnel first step
  • Transaction/order tracking

Настройка тега в tagmanager

Название: Любое. (Например: GA - Pageview - All pages)
Тип тега: Google Аналитка - Universal Analytics
Тип отслеживания: Просмотры страниц
Настройки Google Analytics: {{GA Settings}} (та самая переменная, которую мы создали в самом начале)
Включить переопределение настроек в этом теге: Ставим галочку
Раскрываем список Дополнительные настройки и в пункте "Электронная торговля" в пункте "Включить расширенные функции электронной торговли" выбираем "True", а также ставим галочку напротив "Использовать уровень данных"

Триггер активации в гугл тэг менеджер

Второй тег будет отвечать за события, такие как добавление/удаление товара из корзины и тп. Для примера назовём его GA - Event - Ecom Events (но вы можете и на русском что-нибудь попонятнее придумать).

Создание тега типа event
Название: Любое. (Например: GA - Event - Ecom Events)
Тип тега: Google Аналитка - Universal Analytics
Тип отслеживания: Событие
Категория: Ecommerce
Действие: {{Event}}
Не взаимодействие: False
Настройки Google Analytics: {{GA Settings}} (та самая переменная, которую мы создали в самом начале)
Включить переопределение настроек в этом теге: Ставим галочку
Раскрываем список Дополнительные настройки и в пункте "Электронная торговля" в пункте "Включить расширенные функции электронной торговли" выбираем "True", а также ставим галочку напротив "Использовать уровень данных"

Настраиваем гугл тэги для плагина Google Tag Manager for WordPress

В качестве триггера активации задаём те шесть, которые создали самыми первыми (gtm4wp.productClickEEC, gtm4wp.addProductToCartEEC, gtm4wp.removeFromCartEEC, gtm4wp.checkoutOptionEEC, gtm4wp.checkoutStepEEC, gtm4wp.changeDetailViewEEC).

После этого у нас заработают такие отчёты как:

  • Product list clicks
  • Add to cart
  • Remove from cart
  • Product detail views on variable product pages
  • Checkout steps after the first step
  • Selecting checkout options (shipping method and payment method)

Третий тег будет отвечать за и его настройка похожа на предыдущий, но с парочкой поправок:

tagmanager

Название: Любое. (Например: GA - Event - Ecom Events)
Тип тега: GA - Product Impression
Тип отслеживания: Событие
Категория: Ecommerce helper
Действие: {{Event}}
Не взаимодействие: True
Настройки Google Analytics: {{GA Settings}} (та самая переменная, которую мы создали в самом начале)
Включить переопределение настроек в этом теге: Ставим галочку
Раскрываем список Дополнительные настройки и в пункте "Электронная торговля" в пункте "Включить расширенные функции электронной торговли" выбираем "True", а также ставим галочку напротив "Использовать уровень данных"

Настраиваем гугл тэги для плагина Google Tag Manager for WordPress

В качестве триггера активации задаём gtm4wp.productImpressionEEC. В результате картинка получится такой:

Диспетчер тегов Гугл

Остаётся только отправить данные, нажав соответствующую кнопку.

Ещё пара слов о настройке плагина

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

Настройка плагина гугл тэг менеджер в вордпрес

Т.е я отметил Track enhanced e-commerce, Cart as 1st checkout step, Cart content in data layer, Order data in data layer, Exclude tax from revenue, Exclude shipping from revenue, Use SKU instead of ID.

Настройка плагина Google Tag Manager в WooCommerce

А также я добавил в код шаблона, сразу после открывающего <body> следующий код:

<?php if (function_exists('gtm4wp_the_gtm_tag')) {gtm4wp_the_gtm_tag();} ?>

Надеюсь, что материал оказался вам полезен и вы поделитесь им с друзьями.


Рейтинг:

2020-11-20 | | 0 комментариев | , ,

Альтернативный заголовок изображения

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

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