Настройка отправки событий для SPA-сайтов

Краткое содержание

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

Как передать параметры через МТС Тег
Разработчик должен заполнить dataLayer информацией о параметрах URL и реферере. Далее необходимо выбрать один из двух вариантов действий в зависимости от того, размечен ли сайт через МТС Тег.

Вариант 1. Если сайт уже размечен через МТС Тег
В статье описано, как добавить параметры к существующему тегу. Примеры кода для тегов Пользовательский HTML и МТС Аналитика: Событие помогут настроить передачу данных.

Вариант 2. Если сайт НЕ размечен через МТС Тег
В тексте приведена пошаговая инструкция по добавлению переменной типа Переменная уровня данных и тегов МТС Аналитика: Событие или Пользовательский HTML. Также указаны примеры кода для настройки параметров.

Проверка и публикация
После настройки необходимо проверить корректность разметки через Режим проверки и опубликовать контейнер в МТС Теге.

Чтобы корректно собирать статистику на SPA-сайтах, есть возможность переопределять параметры, связанные с URL и реферером.

Какие параметры можно изменить

Параметр	Пример формата значения
Referrer	https://a.mts.ru/tm
PageUrl	https://a.mts.ru/tm/?utm_source=tg&utm_medium=article&utm_campaign=17.09.24
PageProtocol	https
PageHost	aefd.testing.com
PagePort	123
PagePath	/test
PageFileExtension	.csv
PageQuery	utm_source=tg&utm_medium=article&utm_campaign=17.09.24
PageFragments	#anchor

Как передать параметры через МТС Тег

Сначала ваш разработчик должен заполнить dataLayer информацией о параметрах URL и Referer в нужных событиях для переопределения

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'Referrer': '{Ваше значение}',
    'PageURL': '{Ваше значение}',
    'PageProtocol': '{Ваше значение}',
    'PageHost': '{Ваше значение}',
    'PagePort': '{Ваше значение}',
    'PagePath': '{Ваше значение}',
    'PageFileExtension': '{Ваше значение}',
    'PageQuery': '{Ваше значение}',
    'PageFragments': '{Ваше значение}'
  });
</script>

Далее выберите вариант действий в зависимости от того, размечен ваш сайт через МТС Тег или нет.

Вариант 1. Если сайт уже размечен через МТС Тег

Совет

Используйте этот вариант, если у вас уже есть тег типа Пользовательский HTML или МТС Аналитика: Событие.

Добавьте к существующему тегу необходимые параметры:

• Пример для Пользовательский HTML:

'Referrer': '{{Referrer}}',
'PageURL': '{{PageURL}}',
'PageProtocol': '{{PageProtocol}}',
'PageHost': '{{PageHost}}',
'PagePort': '{{PagePort}}',
'PagePath': '{{PagePath}}',
'PageFileExtension': '{{PageFileExtension}}',
'PageQuery': '{{PageQuery}}',
'PageFragments': '{{PageFragments}}'

• Пример для МТС Аналитика: Событие:

Вариант 2. Если сайт НЕ размечен через МТС Тег

Совет

Используйте этот вариант, если ваш сайт ещё не размечен в МТС Теге или у вас не созданы теги Пользовательский HTML и МТС Аналитика: Событие.

1. Перейдите в нужный контейнер в МТС Теге. Подробнее про контейнер.

2. Добавьте переменную типа Переменная уровня данных. Например

Далее изменить параметры можно двумя способами. Ниже выберите подходящий для вас вариант:

Через тег МТС Аналитика: Событие

3. Добавьте тег с типом МТС Аналитика: Событие.

4. Откройте Дополнительные параметры события. Добавьте в поля необходимые параметры и их значения, например

Пользовательский HTML

3. Добавьте тег с типом Пользовательский HTML

4. Добавьте в поле HTML-код необходимые параметры, например

var mtsa_event_params = {
    'EventCategory': `{{eventCategory}}`,
    'EventAction': `{{eventAction}}`,
    'EventLabel': `{{eventLabel}}`,
    'EventContent': `{{eventContent}}`,
    'EventContext': `{{eventContext}}`,
    'ProductName':`{{productName}}`,
    'Referrer': '{{Referrer}}',
    'PageURL': '{{PageURL}}',
    'PageProtocol': '{{PageProtocol}}',
    'PageHost': '{{PageHost}}',
    'PagePort': '{{PagePort}}',
    'PagePath': '{{PagePath}}',
    'PageFileExtension': '{{PageFileExtension}}',
    'PageQuery': '{{PageQuery}}',
    'PageFragments': '{{PageFragments}}',
    'UserID': `{{userId}}`
};
mm("message", `{{event}}`, mtsa_event_params);

Проверьте корректность разметки через Режим проверки и Опубликуйте контейнер.