Установка и настройка счетчика для SPA-сайтов

Инициализация счетчика

Чтобы использовать счетчик метрики на SPA-сайтах, выполните следующие действия:

1. Создайте и установите код счетчика на сайт, если он еще не установлен.

2. При инициализации счетчика для параметра defer укажите значение true. Это нужно, чтобы отключить автоматическую отправку данных о просмотрах. Чтобы фиксировать показы страниц, используйте функцию hit при необходимости, как описано в п. 3.
   Пример инициализации счетчика:

   ym(XXXXXX, 'init', {
       defer: true,
       clickmap:true,
       trackLinks:true,
       accurateTrackBounce:true
   })
   

3. Чтобы важные изменения страницы фиксировались Яндекс Метрикой, проанализируйте логику работы сайта и вставьте функцию hit в нужные места кода так, чтобы она вызывалась каждый раз, когда вы считаете, что страница изменилась.
   Вызов функции hit:

   ym(XXXXXX, 'hit', url[, options]);
   

   Параметры, которые можно передать функции hit:

   Параметр	Значение по умолчанию	Тип	Описание
   url	—	String?	URL страницы, с которой совершен просмотр. Если URL не передан, будет использовано значение из window.location.href.
   options	—	Object	—
   Поля объекта options
   options.callback	—	Function	Callback-функция, вызываемая после отправки данных о просмотре
   options.ctx	—	Object	Контекст, доступный в callback-функции по ключевому слову this
   options.params	—	Object	Параметры визита
   options.referer	—	String	URL с которого посетитель загрузил содержимое текущей страницы
   options.title	document.title	String	Заголовок текущей страницы
   Поля объекта options.params:
   order_price	—	Double	Доход по цели. Вы можете указать цену как в валюте, так и в условных единицах.
   currency	—	String	Используйте это поле, если хотите передать цену цели в валюте. Метрика распознает трехбуквенный код валюты по ISO 4217. Если передается другая валюта, будут отправлены нулевые значения вместо валюты и суммы.

   Пример вызова функции hit

   ym(XXXXXX, 'init', {});
   //...
   ym(XXXXXX, 'hit', '#contacts', {params:{
       title: 'Контактная информация',
       referer: 'http://example.com/#main'
   }});
   

Отправка достижения цели

Для отслеживания событий на сайте, при которых URL страницы не меняется, используйте функцию reachGoal:

ym(XXXXXX, 'reachGoal', 'TARGET_NAME);

Примеры установки цели в коде.

Передача параметров визитов и посетителей

ym(XXXXXX, 'params', {param1: 'param_value1'})

ym(XXXXXX, 'userParams', {param1: 'param_value1'})

Передача данных Ecommerce

Для передачи данных подключите электронную коммерцию в Метрике.

Для корректного сбора данных электронной коммерции нужно вставить один раз функцию hit при переходе на новую страницу.

dataLayer.push({
    "ecommerce": {
        "purchase": {
            "actionField": {
                "id" : "TRX987"
            },
            "products": [
                {
                    "id": "25341",
                    "name": "Толстовка Яндекс мужская",
                    "price": 1345.26,
                    "brand": "Яндекс / Яndex",
                    "category": "Одежда/Мужская одежда/Толстовки и свитшоты",
                    "variant": "Оранжевый цвет"
                },
                {
                    "id": "25314",
                    "name": "Толстовка Яндекс женская",
                    "price": 1543.62,
                    "brand": "Яндекс / Яndex",
                    "category": "Одежда/Женская одежда/Толстовки и свитшоты",
                    "variant": "Белый цвет",
                    "quantity": 3
                }
            ]
        }
    }
});

Подключение Вебвизора, карт кликов и ссылок, аналитики форм

К SPA-сайту можно подключить Вебвизор, карту кликов и карту ссылок. Карта скроллинга, аналитика форм и Вебвизор 1.0 не поддерживаются.

Выключение Метрики на SPA

Чтобы отключить Метрику, используйте метод .destruct() на экземпляре счетчика. Этот способ работает только на новой версии кода счетчика Метрики.

• Для счетчиков, инициализированных через конструктор Ya.Metrika2:

  // Инициализируем счетчик
  const counter = new Ya.Metrika2(counterId);
  
  // Деинициализируем счетчик
  counter.destruct()    
  

• Если инициализация происходит с настройками:

  // Инициализируем счетчик
  const counter = new Ya.Metrika2({
    id: counterId,
    trackLinks: true
  });
  
  // Деинициализируем счетчик
  counter.destruct()    
  

Используйте метод destruct только для остановки Метрики.