Все темы → Google Tag Manager и Enhanced Ecommerce →

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

Данный документ актуален для версии плагина 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 и настроить его.

Подробнее о GTM:

https://support.google.com/tagmanager#topic=3441530

https://support.google.com/tagmanager/answer/6102821?hl=ru&ref_topic=3441530

https://support.google.com/tagmanager/topic/6163649?hl=ru&ref_topic=6333310

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

Подробнее в справке Google:

https://support.google.com/analytics/answer/6014841

Какие события 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:

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

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

  1. Передаются все данные impressions со страницы категории
  2. При клике на товар возникает событие productClick
  3. При клике на ссылки типа “добавить в избранное”, “сравнить” и тд не возникает событие productClick (ведь в этом случае фактически не происходит перехода на товар)
  4. Срабатывает событие addToCart при добавление в корзину со страницы категории/товара
  5. Срабатывает событие purchase при покупке в 1 клик
  6. В настройках счетчика Universal Analytics задано пустое имя трекера
  7. Присылайте дополнения к этому списку в техподдержку 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

Легкий старт

Селекторы кнопки быстрого просмотра

.products__quickview

Селекторы элементов клика просмотра товара

.products .product-item a.product-item__title, .products .product-item a.product-item__image, .products .product-item .product-overlay a.btn

Селекторы элемента-контейнера для товара

.products .product-item

Селекторы элементов названия категории

h1.category__title

Исходный файл с данными: https://docs.google.com/spreadsheets/d/1ybZyqwwCFLFCDz8OwpUh8w4uxgsP4y6lGfwy6k7sla4/edit?usp=sharing


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

Если вы хотите смотреть отчеты по спискам товаров (не категории), то вам необходимо добавить специальный код, который будет отсылать данные о выведенном списке товаров в 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+) необходимо в поле "Сообщение об успешном оформлении" добавить код (редактор должен быть в режиме HTML) 

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


Отладка

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

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


Последнее обновление: 29 апреля 2021
kirill рзрбтчк
kmgtm, faq, настройка, инструкция, самостоятельная
Эта статья была полезна? Да Нет

5 комментариев

  • 1
    Олег Олег 23 июля 2019 08:06 #

    скажите а гугл пиксел также будет работать через купить в один клик quickorder ?

    ответить
  • 1
    Иван Иван 9 октября 2019 13:52 #

    Как отключить вебвизор Яндекса совсем? а метрику оставить

    ответить
  • 1
    Дмитрий Петренко Дмитрий Петренко 29 апреля 2021 08:59 #

    Уточните пожалуйста заполняются ли все необходимые значения VALUE для кода динамического ремаркетинга mail.ru?

    Имеется в виду вот этот код

    <!-- Rating@Mail.ru counter dynamic remarketing appendix -->

    <script type="text/javascript">

    var _tmr = _tmr || [];

    _tmr.push({

    type: 'itemView',

    productid: 'VALUE',

    pagetype: 'VALUE',

    list: '1',

    totalvalue: 'VALUE'

    });

    </script>

    <!-- // Rating@Mail.ru counter dynamic remarketing appendix -->

    ответить

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

    Чтобы добавить комментарий, зарегистрируйтесь или войдите