Установка и настройка счетчика на сайт с AMP

Счетчик Яндекс Метрики предполагает выполнение JavaScript-кода. При установке кода счетчика на сайт, который использует технологию Accelerated Mobile Pages (AMP), страницы сайта не пройдут валидацию. Это объясняется тем, что технология AMP накладывает некоторые ограничения на использование возможностей JavaScript и HTML5. Поэтому можно установить счетчик специальным способом.

Примечание. При этом не поддерживается ряд функций Яндекс Метрики: Электронная коммерция, Вебвизор, отслеживание нажатий кнопки «Поделиться».

Подключение счетчика на сайт с AMP

Внимание. C сайтов, которые используют технологию Accelerated Mobile Pages (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>
```

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

Внимание. Когда пользователь открывает AMP-страницу, Яндекс Метрика фиксирует (pageview). Поэтому вам не нужно дополнительно передавать это событие. Если вы отправите его, в отчетах Яндекс Метрики будет отображаться неверное количество просмотров.

Для передачи данных при инициализации счетчика используются:

переменная 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>