Подключаем Ecommerce в Яндекс.Метрике

Всем привет. На форуме куча полезной информации по разработке магазинов. Я же в свою очередь хочу рассказать про настройку аналитики.

Итак мы будем передавать информацию из магазина miniShop в Яндекс.Метрику для того, чтобы в полном объёме пользоваться отчётами Электронной коммерции .

Сразу скажу, что информация ниже рассчитана на новичков. Я не владею программированием и не нашел пошагового решения в интернете, поэтому потратил немало времени. Надеюсь этот пост пригодится другим юзерам.

Итак мы будем передавать в метрику 3 события:

• Просмотр полного описания товара
• Добавление товара в корзину
• Покупка

Просмотр полного описания товара

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

Для начала нам нужно на каждую страницу товара (в шаблон карточки товара) добавить код:

var productData = {
    "price" : "[[+price]]",
    "name" : "[[*pagetitle]]"
}
window.dataLayer = window.dataLayer || [];
// просмотр товара
dataLayer.push({
    "ecommerce": {
        "detail": {
            "products": [
                {
                    "name" : productData.name,
                    "price": productData.price.replace(/\s+/g, '')
                }
            ]
        }
    }
});

Суть в том, что мы создаем объект productData, в него передаём значения названия товара и цены и потом эти значения передаём в специальный контейнер window.dataLayer. Тут всё согласно документации Яндекса.

"price": productData.price.replace(/\s+/g, '')

Этот метод удаляет пробелы из цены 1 500 приводит к виду 1500.

Добавление товара в корзину

Здесь всё тоже самое, только используем немного другую конструкцию из документации Яндекса и вешаем её на колбэк успешного добавления товара в корзину:

// добавление товара в Корзину
miniShop2.Callbacks.Cart.add.response.success = function() {

dataLayer.push({
    "ecommerce": {
        "add": {
            "products": [
                {
                    "name": productData.name,
                    "price": productData.price.replace(/\s+/g, '')

                }
            ]
        }
    }
});

}

Покупка

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

Здесь многое зависит от того как свёрстана ваша корзина. У меня все классы и id стандартные, я их не менял, так что будьте внимательны. Итак, следующий код надо разместить на странице Корзины:

window.dataLayer = window.dataLayer || [];

miniShop2.Callbacks.Order.submit.response.success = function () {
var productData = [];

$('.Cart__item').each(function() {
   var item = $(this);
   productData.push({
    name: item.find('.title a').text(), // находим все названия товаров в корзине
    price: item.find('.price').text().replace(/\s+/g, '').replace('руб.', ''), // приводим 1 500 руб. к виду 1500
    quantity: item.find('input[name="count"]').val() // передаем количество каждого товара
   });
  })

var orderId = Math.floor(Math.random() * (1000000 - 1) + 1); // генерируем случайное значение
dataLayer.push({
    "ecommerce": {
        "purchase": {
            "actionField": {
                "id" : orderId,
                "goal_id" : "XXXXXX",  // здесь надо указать id цели Заказ.
            },
"products": productData
}
}
});
yaCounterXXXXXXX.reachGoal('SUCORD'); // код вашего счётчика и идентификатор цели - успешный заказ.

}

После всех этих действий в метрике появится вся информация о заказах, корзинах и товарах. Вот такая красота

P.S.

var orderId = Math.floor(Math.random() * (1000000 - 1) + 1); // генерируем случайное значение

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

miniShop2.Callbacks.Order.submit.response.success = function (response) {
...
var orderId = response.data.msorder;
...
}

// добавление товара в Корзину
miniShop2.Callbacks.Cart.add.response.success = function() {

dataLayer.push({
    "ecommerce": {
        "add": {
            "products": [
                {
                    "name": productData.name,
                    "price": productData.price.replace(/\s+/g, '')

                }
            ]
        }
    }
});

}