ecommerce.js - Электронная коммерция (Яндекс.Метрика и Google Analytics) для сайтов на базе MODX + miniShop2

Привет!

Хочу поделиться js скриптом, который позволяет передавать данные электронной коммерции в системы аналитики Яндекс.Метрика и Google Analytics.

Из особенностей отмечу то, что мое решение выполнено не в виде дополнения для MODX, а в виде одного js файла и не имеет в своем составе php кода (сниппетов и т.п.). Также я применил, пожалуй, не самый стандартный подход в том, как будут получаться данные о товарах на страницах сайта.

Введение

Если вам не совсем знакома тема, рекомендую сначала почитать (или аналогичные материалы от гугл):
yandex.ru/support/metrica/data/e-commerce.html
yandex.ru/support/metrica/ecommerce/data.html#data

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

В принципе, чтобы сбор данных заработал, нужно добавить код счетчика на ваш сайт, включив в настройках электронную коммерцию, и далее в JavaScript-массив window.dataLayer (контейнер данных) в глобальном пространстве имен (window) добавлять данные методом push.

Чем плох самый простой путь передачи данных?

В целом мы можем просто в нужных местах сайта добавлять такие вставки кода (это пример от Яндекса):

<script type="text/javascript">
    // Используем метод push для добавления Ecommerce-объекта
    window.dataLayer.push(
        {
            "ecommerce": {
                "currencyCode": "RUB",
                "<actionType>": {
                    "actionField": <actionField>,
                    "products" : [<productFieldObject>, <productFieldObject>, ...]
                }
            }
        }
    );
</script>

и оно будет работать. Но управлять этим, вспоминать о том, где и какой код размещен, искать его через админку MODX то еще удовольствие. Да и получим десятки inline скриптов на странице, что вряд ли понравится оптимизатору.

По какому пути решил пойти?

Что ж, соберем весь js код в один файл, а в html нужно оставить только какую-то разметку с данными. Тут мне и вспомнилась семантическая разметка Schema.org. Ведь там уже описаны такие вещи, как товар Product и заказ Order, а именно их и нужно передавать в системы аналитики.
Если в html код добавить семантическую разметку, то при помощи javascript можно получить данные непосредственно из html разметки.

Возможности

Предлагаемый скрипт позволяет отправлять в системы аналитики такие данные, как:
1. Просмотр списка товаров (т.е. мы будем видеть, какие листинги товаров пользователи просматривают, какие в них товары присутствуют, популярные товарные категории)
2. Клики по ссылкам на товар (увидим из каких списков кликают, на товары по каким позициям и т.п.)
3. Просмотры карточек товаров
4. Добавление и удаление товаров в корзину
5. Оформление заказа (номер заказа, товары в нем)

Из всей этой кучи данных таже Яндекс.Метрика строит большое количество интересных отчетов!

Как настроить

Опишу по шагам, сначала подключим скрипт, а далее распишу по порядку по всем типам действий из документации Яндекс.Метрики:

1. Подключите скрипт
Создайте файл ecommerce.js с этим кодом и подключите его на страницы сайта после инициализации счетчиков Яндекс.Метрики и Google Analitycs, после подключения скриптов miniShop и mSearch (если используете). Сейчас скрипт еще не отправляет никаких данных, т.к. он не знает, какую информацию отправлять. Давайте его познакомим с тем, как на вашем сайте выглядят товары.

2. Действие «impression» — Просмотр списка товаров
Данные должны отправляться в момент открытия списка товаров.

Ваши товары отображаются в неких списках, это может быть список товаров в разделе или в блоке «популярные». Покажем скрипту эти блоки, для чего добавим пару атрибутов с префиксом data-ecommerce слою обертке (классы не нужны, просто указываю их для упрощения восприятия):

<div class="product-list" data-ecommerce="impressions" data-ecommerce-list="Популярные">
  ... товары
</div>

А теперь для товаров внутри этих блоков добавим микроразметку, пример на минималках:

<div class="ms2_product" itemscope itemtype="http://schema.org/Product">
    <meta itemprop="identifier" content="{$id}" />
    <meta itemprop="description" content="{$longtitle}" />
    <meta itemprop="category" content="{$parent | resource : 'pagetitle'}" />
    <meta itemprop="price" content="{$price | replace : ' ' : ''}" />
    <meta itemprop="priceCurrency" content="RUB" />
    <a href="{$id|url}"  itemprop="name" data-ecommerce="click">{$pagetitle}</a>
    .. прочий код
</div>

В этом примере: 1) указываем identifier, name, description, category, price и priceCurrency товара. Помимо этих полей Яндекс поддерживает еще brand, variant, я их не использовал. 2) list (список) мы указали на предыдущем шаге 3) важно заметить, что названия полей в schema.org не совпадает с modx и системами аналитики, скрипт это учитывает (identifier => id).

Всё, «impression» должны передаваться.

3. Действие «click» — Клик по товару из списка
Данные должны передаваться в момент, когда пользователь совершил клик по ссылке товара.

А мы это уже решили, обратите внимание на атрибут data-ecommerce=«click» у ссылки (тег ) из предыдущего блока с кодом. Этого достаточно.

4. Действие «detail» — Просмотр товара
Данные должны отправляться в момент открытия страницы с карточкой товара.

В шаблоне карточки товара нужно добавить один data- атрибут и разметку schema.org для товара, краткий пример:

<div data-ecommerce="detail" itemscope itemtype="http://schema.org/Product">
    <h1 itemprop="name">{$_modx->resource.pagetitle}</h1>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="price" content="{$price | replace : ' ' : ''}" />
        <meta itemprop="priceCurrency" content="RUB" />
    </div>
    <meta itemprop="identifier" content="{$_modx->resource.id}" />
    <meta itemprop="category" content="{$_modx->resource['parent'] | resource : 'pagetitle'}" />
    <meta itemprop="description" content="{$_modx->resource.description}" />
</div>

5. Действие «add» — Добавление товара в корзину
Данные должны отправляться в момент добавления заказа в корзину. Например, при нажатии кнопки «Добавить в корзину».

Если вы сделали предыдущие шаги — скрипт должен отработать корректно без дополнительной настройки.
Он отслеживает событие минишоп Cart.add.response.success и обрабатывает его. Чтобы получить данные о товаре — ищет на странице блок с микроразметкой товара с соответствующим id и берет данные из этого блока.

6. Действия «add» и «remove» при нахождении в корзине.
Данные должны отправляться в момент добавления и удаления заказа из корзины.

Вот тут пока вопрос сложный, дело в том, что в событиях Cart.remove.response.success, Cart.change.response.success мы получаем только id товара и его цену, в случае с remove еще и кол-во товара. А вот название товара, сколько его было добавлено (или изменено в случае change) — не знаем. Поэтому данные передаются частично… вопрос не до конца проработан.

6. Действие «purchase» — Покупка
Данные должны отправляться в момент подтверждения заказа.

Я реализовал его через микроразметку на странице оформления заказа.
В том чанке, который изначально называется «tpl.msOrder.success» нужна примерно такая разметка:

<div itemscope itemtype="http://schema.org/Order" data-ecommerce="purchase">
    <meta itemprop="orderNumber" content="{$order.num}">
    <h2>Ваш заказ принят, спасибо!</h2>
    {foreach $products as $p}
        <div itemprop="orderedItem" itemscope itemtype="http://schema.org/OrderItem">
            <meta itemprop="orderQuantity" content="{$p.count}">
            <div itemprop="orderedItem" itemscope itemtype="https://schema.org/Product">
                <meta itemprop="identifier" content="{$p.id}" />
                <meta itemprop="name" content="{$p.pagetitle}">
                <meta itemprop="description" content="{$p.description}">
                <meta itemprop="category" content="{$p.parent | resource : 'pagetitle'}" />
                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <meta itemprop="price" content="{$p.price | replace : ' ' : ''}">
                    <meta itemprop="priceCurrency" content="RUB">
                </div>
                {foreach $p.options as $option => $value}
                    <div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
                        <meta itemprop="name" content="{$option}">
                        <meta itemprop="value" content="{$value | join : ', '}">
                    </div>
                {/foreach}
            </div>
        </div>
    {/foreach}
</div>

скрипт найдет по атрибуту data-ecommerce=«purchase» и обработает корректно.
Из недостатков приёма — если страницу обновить — данные о заказе продублируются.

Поддержка mFilter2

Она есть, скрипт обрабатывает событие mse2_load чтобы передать данные о новом просмотре списка товаров (impressions) и клике по товару.

Заключение

Мы реализовали почти всё возможности электронной коммерции, кроме действий promoView и promoClick. Я ими не пользуюсь :)

Есть ложки дегтя:
— не до конца обрабатываются действия в корзине, а именно изменение кол-ва товара в ней;
— не везде передаются такие данные о товаре, как position или list.

Плюсики:
— сами того не желая мы добавили на страницу разметку schema.org, которую должны оценить поисковые системы.

В общем будет интересно услышать мнение сообщества, может кому-то пригодится)

p.s. еще раз ссылка на файл:
gist.github.com/createit-ru/2575f7a672060f839747b65383223421

— Если вам понравился мой подход и пригодился скрипт — можно угостить чашкой кофе:



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

В целом мы можем просто в нужных местах сайта добавлять такие вставки кода (это пример от Яндекса):

miniShop2.Callbacks.Order.submit.response.success = function (response) {
//Тут сбор данных и отправка
}

Uncaught TypeError: Cannot read properties of undefined (reading 'id')

if (identifierElement && identifierElement.content === row.id) {