Подключаем 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. Но с этим я уже разбираться не стал(
mekirile
24 марта 2016, 07:05
modx.pro
33
5 981
+13

Комментарии: 16

Володя
24 марта 2016, 10:44
+4
Очень полезно, спасибо!
    mekirile
    24 марта 2016, 10:47
    +3
    Форум многое мне дал. Пришло время отплатить, ну по мере возможностей и знаний :)
Алексей Федоров
24 марта 2016, 18:03
0
Большое спасибо!
Виктор
28 апреля 2016, 22:49
0
Сделал по вашей статье просмотр товара и добавление в корзину, в метрике пустно.
    mekirile
    28 апреля 2016, 23:51
    0
    Дайте ссылку на какой-нибудь товар
      Виктор
      29 апреля 2016, 20:02
      0
      Есть возможность отправить лс?
        mekirile
        29 апреля 2016, 22:20
        0
        mekirile@gmail.com
    Stan Ezersky
    18 февраля 2017, 18:00
    0
    Вроде всё уже упростилось, просто события на кнопки вешаются, типа такого

    <button type="submit" class="btn" name="ms2_action" value="cart/add" onclick="yaCounterXXXXX.reachGoal('VKORZINU'); return true;">В корзину</button>
    Для целей подойдёт
      mekirile
      19 февраля 2017, 19:59
      0
      Мой пост немного не об этом :)
Евгений Шеронов
13 марта 2017, 10:02
1
0
Для тех, кто любит, чтобы совсем красиво было — правильный id заказа можно получить так:

miniShop2.Callbacks.Order.submit.response.success = function (response) {
...
var orderId = response.data.msorder;
...
}
Не забудьте дописать response в первой строке.
Nikita
31 марта 2017, 17:04
0
Спасибо за решение! Помогло, но частично.

Есть одна проблема: складывается ощущение, что передает не все данные. Например из 3-ех заказов до Метрики добрался только 1.

Грешу на то, что вынужден подключать скрипты между /body и /html, так как если я ставлю их ДО /body то callback на Minishop2 не срабатывает, ибо его подключение получается ниже и он его не видит.

Да, есть вот такой коммент от Василия, но не очень понимаю что нужно с этим всем делать...? Пробовал вызывать из разных мест — эффект нулевой.

Кто может подсказать? Заранее спасибо.

Ника
05 февраля 2019, 13:37
0
Всем добрый день!
У меня возникает следующая ошибка «Uncaught ReferenceError: miniShop2 is not defined» на данной строчке
miniShop2.Callbacks.Order.submit.response.success = function (response) {

Не подскажите как исправить?
    mekirile
    05 февраля 2019, 14:04
    0
    У вас minishop видимо подключается после того, как вызывается колбек. Попробуйте подключение скрипта перенести в head.

    А лучше использовать компонент готовый – modstore.pro/packages/integration/msyaecommerce там все будет работать из коробки.
Futuris
05 августа 2019, 17:35
0
Добрый день! Под
… и вешаем её на колбэк успешного добавления товара в корзину
как я понял вы имеете в виду, что этот код (ниже) нужно добавить в чанк tpl.msGetOrder, который входит в состав Корзины?
// добавление товара в Корзину
miniShop2.Callbacks.Cart.add.response.success = function() {

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

                }
            ]
        }
    }
});

}
    Виктор
    05 августа 2019, 17:38
    0
    Без разницы где вы разместите этот код. Конечно желательно после того как miniShop иницилизируется и вы сможете присвоить коллбек
      Futuris
      05 августа 2019, 17:45
      0
      Спасибо за ответ! Тоже пытаюсь разобраться)), но если честно пока вообще не понимаю что значит «присвоить колбэк».

      Пока из вашей схемя я уяснил следующее:

      1. Часть кода №1 (Просмотр полного описания товара ) — вешаем на шаблон карточки товара. Здесь вроде все ясно.))

      2. Часть кода №2, про которую я и спрашивал (Добавление товара в корзину) — нужно вешать на некий колбэк.))
      и

      3. Часть кода №3 (Покупка), нужно вешать на шаблон страницы Корзины, понятно с возможными нюансами в случае изменения стилей.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
16