Подключаем 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
39
10 101
+13

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

Володя
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
          2
          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
                28 декабря 2021, 16:16
                0
                А лучше использовать компонент готовый – 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 (Покупка), нужно вешать на шаблон страницы Корзины, понятно с возможными нюансами в случае изменения стилей.
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                18