Подключаем 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
6 499
+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