Настройка отслеживания данных электронной коммерции в Я.Метрике

Оглядываясь назад, никогда бы не подумал, что интеграция небольших js-скриптов для отслеживания поведения пользователей может стать серьезной проблемой. Но опыт показал обратное. Цель данной заметки — рассмотреть основные моменты, с которыми может столкнуться разработчик, интегрирующий модуль электронной коммерции от Я.Метрики (или любой другой аналогичный сервис (Альтернативный модуль от GA, скрипты от FB, Criteo One Tag и так далее)) на сайт.

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

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

Этап 1. Настройка счетчика и контейнера. 

Первый этап самый простой: Нужно в настройках счетчика включить опцию «Отправка данных электронной коммерции» и обновить код счетчика метрики на сайте. Далее создать внутри head сайта (на всех необходимых страницах) контейнер dataLayer. По умолчанию, он такого формата:

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
</script>

Как видите, ничего сложного. Далее можно переходить к настройке отправки самих событий.

Этап 2. Отправка событий электронной коммерции в Метрику.

События ecommerce можно условно разделить на три типа: Статичное событие с одним товаром (Например, просмотр детальной страницы товара), динамическое событие с одним товаром (например, клик по кнопке «В корзину» на странице товара) и событие с несколькими товарами (например, передача данных о заказе). К слову, последнее событие может также быть динамичным, в зависимости от ситуации.

2.1. Статичное событие ecommerce

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

Сам скрипт будет выглядеть примерно следующим образом:

dataLayer.push({
    "ecommerce": {
        "detail": {
            "products": [
                {
                    "id": "<?//Тут переменная ID товара?>",
                    "name" : "<?//Тут переменная названия товара?>",
                    "price": <?//Тут переменная цены товара?>,
                    "brand": "<?//Тут переменная бренда товара?>",
                    "category": "<?//Тут переменная категории товара?>"
                }
            ]
        }
    }
});

На большинстве популярных CMS, так как они работают на php, нужно будет вставить в соответствующую переменную в каждую из строк. Например, там где требуется ID товара, будет что-то вроде:

"id": "<?=$product['ID'];?>

Переменные для каждого конкретного случая можно найти, внимательно изучив шаблон детальной страницы товара (или обратиться к документации данной CMS). После добавления на страницу вышеуказанного скрипта и указания всех необходимых переменных, в Метрику начнут отправляться данные о просмотренных товарах. Спустя какое-то время, данные начнут появляться в соответствующих отчетах Метрики на вкладке «Электронная коммерция».

2.2. Динамичное событие ecommerce

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

Для того, чтобы передавать соответствующие данные, следует выполнить несколько простых шагов:

Следует найти id кнопки или элемента, по клику на который нужно будет отслеживать данные.  Если никакого id у нужной кнопки нет, то следует его добавить. Для данного примера, предположим, что у на шаблоне карточки товара есть такая кнопка:

<button id="InCart">В корзину</button>

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

$( "#InCart" ).click(function() {
dataLayer.push({
    "ecommerce": {
        "add": {
            "products": [
                {
                    "id": "<?//Переменная ID?>",
                    "name": "<?//Переменная названия?>",
                    "price": <?//Переменная цены?>,
                    "brand": "<?//Переменная бренда?>",
                    "category": "<?//Переменная категории?>",
                    "quantity": <?//Переменная количества?>
                }
            ]
        }
    }
});
});

Как видно из приведенного кода, он (код) очень похож на предыдущий. Добавляется только условие активации по клику. Отдельно следует сделать замечание по поводу переменной количества — если со страницы можно отправить в корзину только один товар, то данную строку можно записать так:

"quantity": 1

Т.е. передавать постоянное значение количества, равное единице. На этом можно завершить этап, посвященный событиям по клику, так как маловероятно, что могут понадобится какие-то дополнительные условия активации скрипта. Единственное замечание — следует всегда помнить, что использования id для активации события более предпочтительно, чем использование класса. Так как id на странице всегда уникален, в то время как класс может применяться к разным элементам.

2.3. Событие с несколькими товарами

Сложность интеграции данного события в том, что в скрипт нужно передавать данные не об одном товаре (как было рассмотрено до сих пор), а нескольких. В качестве примера будет рассмотрен скрипт передачи данных о заказе в Я. Метрику. Все необходимые циклы будут представлены в довольно абстрактной форме, ввиду того, что для каждой CMS они будут уникальны. Предполагается, что товар — это php-объект с атрибутами Id, название, цена etc.

Скрипт будет выглядеть следующим образом:

dataLayer.push({
    "ecommerce": {
        "purchase": {
            "actionField": {
                "id" : "<?// Переменная id/имени заказа?>"
            },
            "products": [
<?/* Ниже следует цикл, который "проходит" по всему списку товаров в корзине и отправляет данные 
о каждом из них в метрику */?>
<? foreach($arResult['BASKET_ITEMS'] as $arItem?>
                {

<?// Все переменные будут начинаться с $arItem (Например, $arItem['price'])?>
                    "id": "<?// Переменная id товара?>",
                    "name": "<?// Переменная названия товара?>",
                    "price": <?// Переменная цены товара?>,
                    "brand": "<?// Переменная бренда товара?>",
                    "category": "<?// Переменная категории товара?>"
                },
<?endforeach;?>
            ]
        }
    }
});

Вкратце, суть цикла в том, что для каждого товара в заказе он генерирует блок с «атрибутами» данного товара и передает их в метрику. Если не добавить данный цикл, то скрипт будет «видеть» только один товар в заказе (Скорее всего, последний), что будет не совсем соответствовать действительности. Если нужно, чтобы событие срабатывало по клику, то весь представленный выше код следует «обернуть» .click-событие.

На этом, собственно, можно заканчивать данную заметку. Основные ситуации, связанные с интеграцией электронной коммерции на сайт, были рассмотрены. Все прочие действия и альтернативные js-интеграции делаются по аналогии. Стоит заметить, что заметка получилась довольно абстрактной и ctrl + c и ctrl + v в данном случае не поможет, но такова дань разнообразию CMS и названий переменных, которые могут быть уникальны в рамках каждого проекта.