Компонент позволяет интегрировать ваш магазин с расширенной электронной торговлей от Google Analytics

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

Выполнив рекомендации по внедрению, вы получите возможность узнать следующую информацию:

• эффективность списков, каталогов и блоков товаров, используемых на сайте (например, стандартный каталог на сайте, блок рекомендованных товаров или наиболее часто приобретаемых и т.п.);
• взаимодействие посетителя с корзиной на сайте в разрезе каждого товара (добавление, удаление, отношение просмотров карточки товара к числу купленных и т.п.);


• о процессе покупки товаров, настроив шаги, по которым проходит пользователь до фактического приобретения (например, процесс может быть следующим: посещение корзины, проверка адреса, выбор способа оплаты);
• общую картину о процессе покупки на вашем сайте в виде следующих этапов:
  
  • все посещения сайта;
  • посещения, при которых посетители посмотрели карточку товара;
  
  
  • посещения, при которых посетители положили товар в корзину;
  • посещения, при которых посетители начали процесс оформления покупки;
  • и еще один этап, посещения, при которых посетители совершили покупку.
• об эффективности внутренних маркетинговых кампаний на сайте.

Примечания!

1. msEcommerce интегрировано с msDiscount;
2. данные в Google Analytics появляются не сразу, а в течение 24 часов;
3. превышения числа транзакций над конверсией это нормальное явление;

Внедрение на сайт расширенной электронной торговли состоит из 2 этапов:

1. включение расширенной электронной торговли в Google Analytics;
2. настройка msEcommerce;

Включение расширенной электронной торговли

Для включения расширенной электронной торговли в Universal Analytics переходим в раздел «Администратор», выбираем нужное нам представление и переходим в «Настройки электронной торговли»:

На открывшейся странице нажимаем переключатель «Включите электронную торговлю» и кликаем по кнопке «Далее»:

Нажимаем переключатель «Включение отчетов по сопутствующим товарам» и кликаем по кнопке «Далее»:

Нажимаем переключатель «Включение отчетов для расширенной электронной торговли» и кликаем по кнопке «Отправить»:

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

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

Создание маркировки этапов оформления заказа

Как уже было сказано выше, добавление маркировки этапов оформления заказа является не обязательным действием, но если все же вы решили отслеживать этапы оформления заказа, то вам необходимо сделать следующие действия:

1. Перейдите в раздел «Администратор», выберете нужное вам представление и переходите в «Настройки электронной торговли»:
   


2. На открывшейся странице нажимаем «Добавить шаг последовательности»:
   
   
3. Вводим название шага, например первым шагам будем считать «Просмотр корзины» и нажимаем на кнопку «Готово», после чего повторяем данную операцию для всех наших шагов:
   
   
4. После того, как все шаги добавлены, нажимаем на кнопку «Отправить»:
   
   

Настройка валюты представления

1. Переходим в раздел «Администратор», выбираем нужное нам представление и нажимаем на «Настройки представления»:
   
   


2. На открывшейся странице выбираем нужную нам валюту и нажимаем на кнопку «Сохранить»:
   
   

Настройка msEcommerce

1. Получаем идентификатор отслеживания Google Analytics, для этого переходим в раздел «Администратор» в Google Analytics и нажимаем на «.JS Код отслеживания» после чего в появившемся подменю нажимаем на «Код отслеживания»
   
   На открывшейся странице копируем искомый идентификатор отслеживания
   
   
2. Перейдите на страницу настройки msEcommerce и вставьте в поле «Google Analytics ID» идентификатор отслеживания Google Analytics
   
   
3. Для опций «Включить Universal Analytics» и «Включить расширенную электронную коммерцию» выбираем «Да» и нажимаем на кнопку «Сохранить настройки».
   
4. На каждой странице сайта перед закрывающемся тегом
должен быть вызван сниппет

[[!msEcommerce]]

Данный сниппет подключает все необходимые скрипты и коды отслеживания Global Site Tag (gtag.js) Важно! Если у вас уже подключен код отслеживания Global Site Tag (gtag.js), то его следует удалить.

Эти минимальные настройки уже позволяют отслеживать такие события как:

• добавление товара в корзину и удаление из нее (без информации, откуда был добавлен товар в корзину);
• просмотр карточки товара;


• транзакции и возвраты;

Для более тонкой настройки msEcommerce необходимо правка некоторых чанков товара с целью внедрения в них с помощью специальных сниппетов дополнительной метаинформации для Google Analytics, после чего вы можете отслеживать следующую информацию:

1. показ товара — в каком блоке и на какой позиции был показан товар;
2. добавлен в корзину — откуда (карточка товара, блок рекомендуем, поиск и т.д )товар был добавлен в корзину, а также его позиция (порядковый номер) в этом блоке. Если вы будете отслеживать данное событие в расширенном режиме, то обязательно в настройках дополнения отключите опцию «Добавление в корзину» в разделе «Отслеживать события», иначе будет двойное дублирования события;


3. клик по товару — в каком блоке и на какой позиции был товар, когда по нему был сделан клик;
4. отслеживание внутренних рекламных кампаний;
5. отслеживание этапов оформления покупки;

Для отслеживания 1,2 и 3 события в чанк, который отвечает за вывод товара, необходимо к одному из html элементов добавить атрибут data-msec со значением результата выполнения сниппета msEcommerceData.

msEcommerceData может принимать следующие параметры:

• id — ID товара (обязателен);
• list — название блока/списка, где выводится данный товар;
• position — порядковый номер товара в списке;
• cache — будет ли использовано кэширования. Возможные значения 0|1 (по умолчанию 1). Если включено кэширования и товар был изменен, то необходимо очистить кэш modx;

Пример:

<div  id="product-[[+id]]"  data-msec='[[!msEcommerceData ? &id=`[[+id]]`&list =`Top продаж`]]'>
    …..
    …..
</div>

Для отслеживания события добавления товара в корзину у кнопки, при нажатии на которую будет происходить добавление, должен быть класс «msec-to-cart». Если при добавлении товара в корзину есть возможность указать количество товара, то кнопки следует добавить еще атрибут «data-msec-quantity», который должен содержать название ID элемента, в котором хранится количества товара.

Пример:

<div  id="product-[[+id]]"  data-msec='[[!msEcommerceData? &id=`[[+id]]` &list=`[[*pagetitle]]` &position=`[[+idx]]`]]'>
    <input type="text" value="2" id="quantity-[[+id]]">
    <a href="#" class="msec-to-cart" data-msec-quantity="quantity-[[+id]]">Add to cart</a>
    …..
</div>

Если кнопка добавления в корзину находится вне блока с атрибутам «data-msec», то кнопки следует добавить еще один атрибут «data-msec-source», который должен содержать ID элемента, у которого есть атрибут «data-msec»

Пример:

<div  id="product-[[+id]]"  data-msec='[[!msEcommerceData? &id=`[[+id]]` &list =`Top продаж`]]'>
    <input type="text" value="2" id="quantity-[[+id]]">
    …..
</div>
<a href="#" class="msec-to-cart" data-msec-quantity="quantity-[[+id]]" data-msec-source="product-[[+id]]">Add to cart</a>

Для отслеживания события добавления клика по товару элементу, который будет реагировать на клик необходимо добавить класс «msec-click»

Пример:

<div  id="product-[[+id]]"  data-msec='[[!msEcommerceData? &id=`[[+id]]` &list =`Top продаж`]]'>
    <a href="/" class="msec-click">More</a>
    …..
</div>

Если элемент, по которому происходит клик, находится вне блока с атрибутам «data-msec», то ему следует добавить атрибут «data-msec-source», который должен содержать ID элемент, у которого есть атрибут «data-msec»

Для отслеживания показа внутренней рекламы, а также клику по ней, необходимо элементу, содержащему рекламный материал, добавить класс «msec-promo», а также атрибут «data-msec-promo», который должен содержать следующую мета информацию:

• id — идентификатор акции (Обязательный);
• name — название акции (Обязательный);


• creative — источник перехода (например, баннер);
• position- позиция (например, позиция в слайдере).

Пример:

<a href="/"  class="msec-promo" data-msec-promo='{"id": "PROMO_1234","name": "Summer Sale","creative":"summer_banner2","position": "banner_slot1"}'>
            <img src="pic1.jpg">
        </a>

Для отслеживания этапов оформления покупки на каждом шаге необходимо делать вызов сниппета msEcommerceCheckout
msEcommerceCheckout принимает следующие параметры:

• step — номер шага (берется на страницы Google Analytics)
  
  
• option — дополнительная информация (например, о способе оплаты), выбранная при оформлении покупки.

К примеру, если у нас оформление заказа состоит из 2 шагов «Просмотр корзины» и «Оформление заказа», то на странице вывода корзины вызываем сниппет

[[!msEcommerceCheckout? &step=`1`]]

[[!msEcommerceCheckout? &step=`2`]]

Если же мы хотим отслеживать еще и выбор способ оплаты и Вариант доставки, то у нас этот выбор происходит на странице заказа, т.е. мы не можем вызвать сниппет msEcommerceCheckout на отдельной странице для данных шагов, то тогда есть 2 варианта: либо добавить номера этих шагов на странице настройки дополнения, либо же самостоятельно вызвать JavaScript функцию «checkout» или сгенерировать специальное события «msec:checkout» для document подробную информацию. Смотрите в разделе JavaScript методы и события

Дополнительные настройки

Отправка события о покупке в Google Analytics по умолчанию происходит при изменении статуса заказа на «Оплачен». В системных настройках компонента (ключ msecommerce.ec_status_purchase) можно указать ID любого другого статуса заказа для которого должно отправляться данное событие.

Отправка события о возврате в Google Analytics по умолчанию происходит при изменении статуса заказа на «Отменён». В системных настройках компонента (ключ msecommerce.ec_status_refund) можно указать ID любого другого статуса заказа для которого должно отправляться данное событие.

Отладка

Часть событий отправляется на стороне сервера и для того что бы их просмотреть необходимо в системных настройках компонента включить «Режим отладки» (ключ msecommerce.debug) после чего вся информация будет появляется логе Modx.

Важно! в режиме отладки сами запросы в Google Analytics отправлены не будут.

JavaScript методы и события

Все вышеперечисленные события вы можете отправить в Google Analytics из своего JavaScript кода, используя для этого либо объект MsEc.App, либо используя генерацию события на document

Все методы принимают 1 обязательный параметр data, который являет объектам и в зависимости от вызываемого метода содержит определенный список полей и 2-й необязательный — это функция, которая будет вызвана после того как данные будут отправлены в Google Analytics

Для событий необходимо указать 2 обязательных параметра: type — тип события и msec — объект аналогичный data для методов. 3-й необязательный параметр это cb — функция, которая будет вызвана после того, как данные будут отправлены в Google Analytics

Список методов и событий

метод          | событие
---------------------------------------
promo          | msec:promo
click          | msec:click
checkout       | msec:checkout
addToCart      | msec:addToCart
removeFromCart | msec:removeFromCart

Пример:

var callback  = function () {
    console.log(‘Send to Google Analytics’)
};

var data = {
    'id': 'P12345',                   // Product ID (string).
    'name': 'Android Warhol T-Shirt', // Product name (string).
    'category': 'Apparel',            // Product category (string).
    'brand': 'Google',                // Product brand (string).
    'variant': 'black',               // Product variant (string).
    'price': '29.20',                 // Product price (currency).
    'quantity': 1                     // Product quantity (number).
};

var dataClick = {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'position': 1
};

var dataPromo = {
    'id': 'PROMO_1234',             // Promotion ID. Required (string).
    'name': 'Summer Sale',          // Promotion name (string).
    'creative': 'summer_banner2',   // Creative (string).
    'position': 'banner_slot1'      // Position  (string).
};

var dataCheckout = {
    'step': 1,                      // A value of 1 indicates this action is first checkout step.
    'option': 'Visa'                // Used to specify additional info about a checkout stage, e.g. payment method.
};


MsEc.App.addToCart(data, callback); или

$(document).trigger({
    type: 'msec:addToCart',
    msec:data,
    cb: callback
});

MsEc.App.click(dataClick, callback); или

$(document).trigger({
    type: 'msec:click',
    msec:dataClick,
    cb: callback
});

MsEc.App.checkout(1,'Visa', callback); или

$(document).trigger({
    type: 'msec:checkout',
    msec:dataCheckout,
    cb: callback
});

Полезные ссылки:

• документация Google Analytics «расширенная электронная торговля»;
• вебинар «Google Analytics для электронной коммерции. Настройки и первичный анализ»;
• Google Analytics Debugger — Расширение для хрома позволяющее видеть какие именно данные уходят в Google Analytics. Инструмент является надстройкой для консоли, в которую он передает информацию о том, что уходит в ГА. Чтобы включить нажимаем на ярлык рядом с командной строкой, и открываем консоль (CTRL+SHIFT+I) и выбираем консоль;