Оглядываясь назад, никогда бы не подумал, что интеграция небольших 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 и названий переменных, которые могут быть уникальны в рамках каждого проекта.