Установка и настройка счетчика на сайт с AMP
Счетчик Яндекс Метрики предполагает выполнение JavaScript-кода. При установке кода счетчика на сайт, который использует технологию Accelerated Mobile Pages (AMP), страницы сайта не пройдут валидацию. Это объясняется тем, что технология AMP накладывает некоторые ограничения на использование возможностей JavaScript и HTML5. Поэтому можно установить счетчик специальным способом.
Подключение счетчика на сайт с AMP
Внесите изменения в HTML-код страниц вашего сайта:
Для отслеживания действий посетителей на страницах сайта с AMP используется дополнительный компонент amp-analytics. Добавьте его в код страниц вашего сайта — внутрь элемента
head:<head> ... <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> ... </head>Внесите изменения в элемент
body: добавьте элементamp-analytics. Чтобы данные о посещениях передавались в Метрику, укажите для атрибутаtypeзначениеmetrika, а также номер счетчика с помощью переменнойcounterId.<body> ... <amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" ... } } </script> </amp-analytics> ... </body>
Передача данных
Для передачи данных при инициализации счетчика используются:
- переменная yaParams — для отправки параметров визитов;
- атрибуты триггеров — для передачи событий (например, достижения цели).
- Отправка параметров визитов и посетителей
- Точный показатель отказов
- Достижение цели
- Скроллинг страницы
- Скроллинг бесконечной ленты
- Загрузка отдельного элемента страницы
- Общий пример кода счетчика
Отправка параметров визитов и посетителей
Пример передачи произвольных параметров визита и параметров посетителей в момент посещения сайта с помощью переменной yaParams:
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
...Также можно передать только параметры визита или только параметры посетителя:
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\"}"
},
......
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
...Точный показатель отказов
Чтобы зафиксировать точный показатель отказа, используйте атрибут триггера timer:
{
...
"triggers": {
"notBounce": {
"on": "timer",
"timerSpec": {
"immediate": false,
"interval": 15,
"maxTimerLength": 14
},
"request": "notBounce"
},
...
}
}Достижение цели
Чтобы отслеживать достижение цели при клике на определенный элемент страницы, используйте атрибут триггера click.
{
...
"triggers": {
"someGoalReach": {
"on": "click",
"selector": "#Button",
"request": "reachGoal",
"vars": {
"goalId": "superGoalId",
"yaParams": "{\"key\": \"value\"}" // В качестве параметров визита при достижении цели будет использоваться значение переменной из события
}
},
...
}
}| Поле | Тип | Описание |
|---|---|---|
goalId | String | Идентификатор цели, который задается при создании цели типа JavaScript-событие в интерфейсе Метрики. |
| Поле | Тип | Описание |
|---|---|---|
goalId | String | Идентификатор цели, который задается при создании цели типа JavaScript-событие в интерфейсе Метрики. |
Скроллинг страницы
Вы можете фиксировать скроллинг страницы до определенной точки (долю в процентах от всей высоты страницы) с помощью атрибута тригерра scroll. Это событие может быть задано в качестве цели.
{
...
"triggers": {
"halfScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
50
]
},
"request": "reachGoal",
"vars": {
"goalId": "halfScrollGoal"
}
},
"partsScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
25,
90
]
},
"request": "reachGoal",
"vars": {
"goalId": "partsScrollGoal"
}
},
...
}
}Скроллинг бесконечной ленты
Бесконечная лента может применяться для просмотра статей, следующих друг за другом. Чтобы фиксировать переходы от статьи к статье и просмотры каждой из них, используйте триггер amp-next-page-scroll.
{
...
"triggers": {
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "pageview"
},
...
}
}Загрузка отдельного элемента страницы
Чтобы фиксировать момент отображения на экране элементов страницы, используйте атрибут триггера visible.
Общий пример кода счетчика
Пример кода приведен только для иллюстрации возможностей счетчика. При его копировании удалите комментарии (//<...>), вместо XXXXXX укажите номер вашего счетчика, а также внесите дополнительные изменения (например, настройте передачу параметров посетителей и визитов).
<body>
...
<amp-analytics type="metrika">
<script type="application/json">
{
// Отправка параметров визита и посетителя
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
// Передача триггеров
"triggers": {
// Точный показатель отказов
"notBounce": {
"on": "timer",
"timerSpec": {
"immediate": false,
"interval": 15,
"maxTimerLength": 14
},
"request": "notBounce"
},
// Скроллинг страницы
"halfScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
50
]
},
// Отслеживание скроллинга как цели
"request": "reachGoal",
"vars": {
"goalId": "halfScrollGoal"
}
},
// Скроллинг страницы
"partsScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
25,
90
]
},
// Отслеживание скроллинга как цели
"request": "reachGoal",
"vars": {
"goalId": "partsScrollGoal"
}
},
// Скроллинг бесконечной ленты
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
...
</body>