Настройка плагина "GTM, Enhanced Ecommerce, Google Analytics, Adwords, Метрика, Fb, Vk, Mail"

Question

Опубликовано: 24 февраля 2021

Данный документ актуален для версии плагина 1.5 и выше

Что делает плагин

Собирает данные с сайта
Отправляет данные расширенной электронной коммерции в
- Google Analytics
- Google Tag Manager
- Яндекс Метрику (через GTM)
Отправлять в аналитику дополнительные данные
Отправляет данные для динамического ремаркетинга
- Adwords
- Вконтакте
- Facebook
- Target.Mail.ru

Когда использовать просто Google Analytics, а когда GTM

Работа через Google Tag Manager всегда предпочтительнее, чем просто счетчик Google Analytics. У GTM есть несколько преимуществ:

Асинхронная работа (не тормозит сайт)
Единая “точка входа” для всех скриптов. Через GTM можно подключать все остальные скрипты счетчик и других сервисов (Яндекс Метрика, Facebook и тд).
Удобная настройка аналитики, событий и данных, нет необходимости лезть в код шаблонов.
Данные ecommerce, которые отправляются для GTM понимает Яндекс Метрика.
Нет необходимости следить за актуальностью кода Google Analytics (например последнее нововведение gtag.js в Google Tag Manager поддерживается сразу).

Есть и недостаток:

Нужно немного разобраться как работает GTM и настроить его.

Обычный счетчик Google Analytics Universal довольно прост в установке, для него не требуется дополнительная настройка, но он не так гибок.

Какие события GTM вызываются

Все события, которые отправляет плагин имеют категорию “kmEcommerce”. Категория может быть составной. Действие по событию обычно является второй частью из названия категории события.

Настройка GTM

Для удобства настройка были созданы несколько файлов, который могут быть импортирован, настроены под ваши счетчики и будут работать:

kmgtm-basic	Основной файл для импорта. Обязателен для использования. Содержит настройки для отправки данных в Google Analytics и необходимые переменные. Необходимо заменить идентификатор Google Analytics.
kmgtm-yandex	Импортируйте для подключения кода Яндекс Метрики. Внимание! Если вы используете Вебвизор 2.0, то вам нужно запустить тег “kmgtm Yandex Metrika - webvizor 2.0” и остановить другой.
kmgtm-adword	Импортируйте, если хотите использовать динамический ремаркетинг Adwords. Необходимо заменить идентификатор конверсии.
kmgtm-facebook	Этот файл нужен, если вы хотите использовать ретаргетинг Facebook. Необходимо заменить идентификатор пикселя Facebook.
kmgtm-vkontakte	Для настройки ретергетинга Вконтакте вам надо импортировать этот файл.
kmgtm-targetmail	Чтобы заработал ретаргетинг Target.Mail импортируйте этот файл. Надо поменять идентификаторы счетчика, пикселя mail.ru.
kmgtm-all-in-one	Все теги, триггеры, переменные в одном файле для импорта. Только если вы знаете, что делаете.

Чтобы импортировать файл вам надо зайти в свой аккаунт где находится контейнер GTM, зайти в Администрирование и там выбрать меню “Импорт контейнера”. Лучше не перезаписывать уже существующие теги, а объединить и переименовать при конфликтах имен.

После импорта вам надо зайти в меню “Переменные” и в поменять значение пользовательской переменной, которая отвечает за идентификатор счетчика Google Analytics/Adwords/Метрики и тд.

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

Также рекомендуется установить расширение для браузера Google Chrome:

Tag Assistant
Facebook Pixel
Google Analytics Debugger
AP - Data Layer Inspector+

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

На что стоит обратить внимание

Передаются все данные impressions со страницы категории
При клике на товар возникает событие productClick
При клике на ссылки типа “добавить в избранное”, “сравнить” и тд не возникает событие productClick (ведь в этом случае фактически не происходит перехода на товар)
Срабатывает событие addToCart при добавление в корзину со страницы категории/товара
Срабатывает событие purchase при покупке в 1 клик
В настройках счетчика Universal Analytics задано пустое имя трекера
Присылайте дополнения к этому списку в техподдержку kmwa.ru/support

Настройка Google Analytics

Плагин шлет данные для Расширенной Электронной Торговли и чтобы увидеть их в статистике вам надо подключить эту опцию в настройках Google Analytics. Это делается в административной части Google Analytics. На забудьте указать шаги, которые есть у вас при оформление покупки.

Этапы оформления заказа:

После всей настройки вы сможете в режиме реального времени видеть как в статистику приходят события с сайта:

Настройка Яндекс Метрики

Для получения отчетов по расширенной электронной коммерции вам необходиво в настройках счетчика отметить пункт “Отправка в Метрику данных электронной коммерции”:

Настройка плагина

Каждая настройка плагина сопровождается подсказкой, в которой описано что эта настройка делает.

Следует отметить несколько моментов.

Работу плагина можно настроить для каждого домена в отдельности.

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

Настройки Google Tag Manager

Когда вы выделяете опцию “Добавить контейнер GTM” отображается дополнительные настройки для GTM, где вам надо указать идентификатор контейнера GTM.

Также можно разместить код GTM вручную, используя для этого соответствующую настройку и код:

{if $wa->shop}{if class_exists('shopKmgtmPlugin')}{shopKmgtmPlugin::getGTMHeadCode()}{/if}{/if}

- для секции

{if $wa->shop}{if class_exists('shopKmgtmPlugin')}{shopKmgtmPlugin::getGTMBodyCode()}{/if}{/if}

- для размешения сразу после окрытия тега .

Если для сайта уже используется счетчик Google Analytics и вы не планируете переход на GTM, то в следующей секции настроек вы увидите ваш идентификатор счетчика Universal Analytics (из настроек Сайта).

Если вы не используете Google Analytics важно указать идентификатор в поле для того, чтобы плагин знал в какой счетчик отсылать отмены заказов из админки.

Внимание: нет смысла одновременно включать данную настройку для GTM и UA, так как тогда данные могут дублироваться.

Настройка слоя данных

Слой данных (dataLayer) может работать без GTM. Например вы хотите использовать слой данных для отправки расширенной электронной коммерции только в Яндекс Метрику.

Настройки для Enhanced Ecommerce

Предустановленные значения работают для стандартных тем дизайна, однако если у вас нестандартный дизайн, то возможно для корректной работы вам надо изменить их.

Самые сложные поля связаны с селекторами:

Селекторы кнопки быстрого просмотра
Селекторы элементов клика просмотра товара
Селекторы элемента-контейнера для товара
Селекторы элементов названия категории

Яндекс Метрика

Не забудьте указать номер счетчика Метрики, если используете её.

Интеграция с темами дизайна

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

data-kmgtm="category-name"

Например в теме Default это файл category.html:

<h1 class="category-name" data-kmgtm="category-name">   {$category.name|escape} </h1>

Для тега, в котором содержится карточка товара в категории:

data-kmgtm="product"

Для default это файл list-thumbs.html и list-thumbs-mini.html:

<li itemscope itemtype ="http://schema.org/Product" data-kmgtm="product">

Для ссылок, которые ведут на страницу товара атрибут:

data-kmgtm="product-click"

Для default это файл list-thumbs.html и list-thumbs-mini.html (обычно такие ссылки содержат {$p.frontend_url} (не надо добавлять новый атирут для ссылок на добавление в корзину, список желаний, сравнения и тд):

<a href="{$p.frontend_url}" title="{$p.name}" data-kmgtm="product-click">

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

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

Дизайн со вкусом 2.0

Селекторы кнопки быстрого просмотра	.quickoverview
Селекторы элементов клика просмотра товара	#product-list .product-list li a.product-img, #product-list .product-list li .product-info a, .related .product-list li a.product-img, .related .product-list li .product-info a, .product-list li a.product-img, .product-list li .product-info a
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li
Селекторы элементов названия категории	.category-name

MegaShop

Селекторы кнопки быстрого просмотра	.image .fprview-more-info
Селекторы элементов клика просмотра товара	#product-list .product-list li a.image-wrapper, #product-list .product-list li .rating a, #product-list .product-list li .thumbs-name a, .related .product-list li a.image-wrapper, .related .product-list li .rating a, .related .product-list li .thumbs-name a, .product-list li a.image-wrapper.product-list li .rating a.product-list li .thumbs-name a
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li
Селекторы элементов названия категории	.category-name

Выгодная Покупка

Селекторы кнопки быстрого просмотра	.image-setting-product-preview
Селекторы элементов клика просмотра товара	#product-list .product-list li .pl-item-image a,#product-list .product-list li .pl-item-info-expandable a,.related .product-list li .pl-item-image a,.related .product-list li .pl-item-info-expandable a,.product-list li .pl-item-image a.product-list li .pl-item-info-expandable a
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li
Селекторы элементов названия категории	.category-name
Замечание	настройка "Ускорить загрузку" может ломать работу плагина

Epika

Селекторы кнопки быстрого просмотра	.quick_view
Селекторы элементов клика просмотра товара	#product-list .product-list div .prd-wrapper a:first, #product-list .product-list div .badge-wrapper a,.related .product-list div .prd-wrapper a:first, .related .product-list div .badge-wrapper a, .product-list div .prd-wrapper a:first, .product-list div .badge-wrapper a
Селекторы элемента-контейнера для товара	#product-list .product-list div, .related .product-list div, .product-list div
Селекторы элементов названия категории	.category-name

Продавай легко

Селекторы кнопки быстрого просмотра	.quick_view
Селекторы элементов клика просмотра товара	#product-list .product-list div .prd-wrapper a:first, #product-list .product-list div .badge-wrapper a,.related .product-list div .prd-wrapper a:first, .related .product-list div .badge-wrapper a, .product-list div .prd-wrapper a:first, .product-list div .badge-wrapper a
Селекторы элемента-контейнера для товара	#product-list .product-list div, .related .product-list div, .product-list div
Селекторы элементов названия категории	.category-name

Clear

Селекторы кнопки быстрого просмотра
Селекторы элементов клика просмотра товара	#product-list .item a.img-wrap, #product-list .item .description-wrap a.model, .category-items-wrap .item a.img-wrap, .category-items-wrap .item .description-wrap a.model
Селекторы элемента-контейнера для товара	#product-list .item, .category-items-wrap .item
Селекторы элементов названия категории	.title-category

Удобная Покупка

Селекторы кнопки быстрого просмотра	.fprview-more-info
Селекторы элементов клика просмотра товара	#product-list .product-list li a, .related .product-list li a, .product-list li a, .products-slider .product-block a
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li, .products-slider .product-block
Селекторы элементов названия категории	.category-name

Профессиональный лендинг

Селекторы кнопки быстрого просмотра	.open-popup
Селекторы элементов клика просмотра товара	.b-catalog__thumbs .b-catalog__item a:not(.open-popup)
Селекторы элемента-контейнера для товара	.b-catalog__thumbs .b-catalog__item
Селекторы элементов названия категории	.category-name

Supreme

Селекторы кнопки быстрого просмотра	a.quick_view
Селекторы элементов клика просмотра товара	#product-list .product a.img_middle, #product-list .product .product_name a, #product-list .product .rating a, .product-list .product a.img_middle, .product-list .product .product_name a, .product-list .product .rating a
Селекторы элемента-контейнера для товара	#product-list .product, .product-list .product
Селекторы элементов названия категории	.category-name

proStore

Селекторы кнопки быстрого просмотра	.product_preview
Селекторы элементов клика просмотра товара	#product-list .product-list li .image_holder a, #product-list .product-list li .border_holder a, #product-list .product-list li .product_buttons a.tooltipstered:last-child, .related .product-list li .image_holder a, .related .product-list li .border_holder a, .related .product-list li .product_buttons a.tooltipstered:last-child, .product-list li a .image_holder a, .product-list li a .border_holder a, .product-list li a .product_buttons a.tooltipstered:last-child
Селекторы элемента-контейнера для товара	#product-list .product-list li, #product-list .product-list li, .related .product-list li
Селекторы элементов названия категории	h1.page-name

TopShop

Селекторы кнопки быстрого просмотра	.preview
Селекторы элементов клика просмотра товара	#product-list .row > div .image-block div:nth-child(1) a, #product-list .row > div .name a, #product-list .row > div .rating-big a, .related .one-product .image-block div:nth-child(1) a, .related .one-product .name a, .related .one-product .rating-big a
Селекторы элемента-контейнера для товара	#product-list .row > div, .related .one-product
Селекторы элементов названия категории	.category-name

Unishop

Селекторы кнопки быстрого просмотра	.js-product-card-dialog[data-href]
Селекторы элементов клика просмотра товара	.products-tile .product-tile a,.products-list .products-list_item a,.products-tbl .product-tbl a
Селекторы элемента-контейнера для товара	.products-tile .product-tile,.products-list .products-list_item,.products-tbl .product-tbl
Селекторы элементов названия категории	.category-name

Формула Успеха

Селекторы кнопки быстрого просмотра
Селекторы элементов клика просмотра товара	#product-list .product-list li a.item_link, .related .product-list li a.item_link, .product-list li a.item_link
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li
Селекторы элементов названия категории	.category-name

Дизайн со вкусом PRO

Селекторы кнопки быстрого просмотра	.products__quickview
Селекторы элементов клика просмотра товара	#product-list .products__item a.products__link, .related .products__item a.products__link, .products__item a.products__link
Селекторы элемента-контейнера для товара	#product-list .products__item, .related .products__item, .products__item
Селекторы элементов названия категории	.category-name

MobiSite 2

Селекторы кнопки быстрого просмотра
Селекторы элементов клика просмотра товара	#product-list .product-list .product-list__item a:not(".product-list__favorite"), .related .product-list .product-list__item a:not(".product-list__favorite"), .product-list .product-list__item a:not(".product-list__favorite")
Селекторы элемента-контейнера для товара	#product-list .product-list .product-list__item, .related .product-list .product-list__item a, .product-list .product-list__item a
Селекторы элементов названия категории	.category-name

Yourshop

Селекторы кнопки быстрого просмотра	a.quick-view
Селекторы элементов клика просмотра товара	#product-list .product-list li a.product-image, #product-list .product-list li h5 a, .related .product-list li a.product-image, .related .product-list li h5 a, .product-list li a.product-image, .product-list li h5 a
Селекторы элемента-контейнера для товара	#product-list .product-list li, .related .product-list li, .product-list li
Селекторы элементов названия категории	.category-name

Купить Просто

Селекторы кнопки быстрого просмотра	.products__quickview
Селекторы элементов клика просмотра товара	#product-list .products__item a.products__link, .related .products__item a.products__link, .products__item a.products__link
Селекторы элемента-контейнера для товара	#product-list .products__item, .related .products__item, .products__item
Селекторы элементов названия категории	.category-name

MobiSite

Селекторы кнопки быстрого просмотра
Селекторы элементов клика просмотра товара	#product-list .product-list li a.all, .related .product-list li a.all, .product-list li a.all, #product-list .product-list li a.link_product, .related .product-list li a.link_product, .product-list li a.link_product
Селекторы элемента-контейнера для товара	#product-list .product-list .one, .related .product-list .one, .product-list .one
Селекторы элементов названия категории	.category-name

Отслеживание списков товаров

Если вы хотите смотреть отчеты по спискам товаров (не категории), то вам необходимо добавить специальный код, который будет отсылать данные о выведенном списке товаров в Google Analytics

{if class_exists('shopKmgtmPlugin')}{shopKmgtmPlugin::impressions($products, $condition)}{/if}

Рекомендуется создать отдельный блок shop.kmgtm_impressions в приложение Сайт с содержимым:

{* Enhanced Ecommerce + GTM, Google Analytics, Яндекс Метрика - kmwa.ru *} {if $wa->shop}{if class_exists('shopKmgtmPlugin')}{if !shopKmgtmPlugin::disabledInInstaller()} {shopKmgtmPlugin::impressions($products, $list)} {/if}{/if}{/if} {* /Enhanced Ecommerce + GTM, Google Analytics, Яндекс Метрика - kmwa.ru *}

В дальнейшем этот блок можно будет вставлять в необходимых местах шаблона:

{$wa->block("shop.kmgtm_impressions", ['products'=>$products, 'list'=>'Название списка'])}

Где $products - переменная с товарами из списка.

Установка код GTM в других приложениях

Для установки кода Google Tag Manager в других приложениях необходимо в шаблонах после тега вставить код:

{* Enhanced Ecommerce + GTM, Google Analytics, Яндекс Метрика - kmwa.ru *} {if $wa->shop}{if class_exists('shopKmgtmPlugin')}{if !shopKmgtmPlugin::disabledInInstaller()} {shopKmgtmPlugin::getGTMCode()} {/if}{/if}{/if} {* /Enhanced Ecommerce + GTM, Google Analytics, Яндекс Метрика - kmwa.ru *}

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

Интеграция с плагинами типа "Быстрый заказ"

Плагин работает "из коробки" с плагинами:

Купить в один клик (до версии 2)
Быстрый заказ (Заказ в один клик)
Купить в один клик

Для поддержки плагина Купить в один клик (версии 2+) необходимо в поле "Сообщение об успешном оформлении" добавить код (редактор должен быть в режиме HTML)

<span data-kmgtm-quickorder="{$order.id}" style="display:none;"></span>

Отладка

При включенном режиме отладки или когда в куках сайта передана кука kmgtmdebug=1 плагин будет отдавать неминимизированные файлы javascript, а также логировать свои действия в консоли браузера и в логах kmgtm.log. Так же в консоли будет логироваться все, что отправляет Метрика.

Логи быстро увеличиваются, поэтому не рекомендуется оставлять режим отладки надолго.

SEO