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

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

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

Чтобы подключить счетчик Метрики на сайт с AMP, внесите изменения в HTML-код страниц вашего сайта:

  1. Для отслеживания действий посетителей на страницах сайта с AMP используется дополнительный компонент amp-analytics. Добавьте его в код страниц вашего сайта — внутрь элемента head:

    <head>
        ...
            <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
        ...
    </head>
  2. Внесите изменения в элемент body: добавьте элемент amp-analytics. Чтобы данные о посещениях передавались в Метрику, укажите для атрибута type значение metrika, а также номер счетчика с помощью переменной counterId.

    <body>
        ...
            <amp-analytics type="metrika">
                <script type="application/json">
                    {
                        "vars": {
                            "counterId": "XXXXXX"
                            ...
                        }
                    }
                </script>
            </amp-analytics>
        ...
    </body>

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

  • переменная yaParams — для отправки параметров визитов;
  • атрибуты триггеров — для передачи событий (например, достижения цели).
  1. Отправка параметров визитов и посетителей
  2. Точный показатель отказов
  3. Достижение цели
  4. Скроллинг страницы
  5. Загрузка страницы или отдельного ее элемента
  6. Общий пример кода счетчика

Отправка параметров визитов и посетителей

Пример передачи произвольных параметров визита и параметров посетителей в момент посещения сайта с помощью переменной yaParams:

...
"vars": {
             "counterId": "XXXXXX",
             "yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
...

Также можно передать только параметры визита или только параметры посетителя:

...
"vars": {
             "counterId": "XXXXXX",
             "yaParams": "{\"key\":\"value\"}"
},
...

Точный показатель отказов

Чтобы зафиксировать точный показатель отказа, используйте атрибут триггера timer:

{
    ...
    "triggers": {
        "notBounce": {
            "on": "timer",
            "timerSpec": {
                "immediate": false,
                "interval": 15,
                "maxTimerLength": 16
            },
            "request": "notBounce"
        },
        ...
    }
}

Достижение цели

Чтобы отслеживать достижение цели при клике на определенный элемент страницы, используйте атрибут триггера click.

{
    ...
    "triggers": {
        "someGoalReach": {
            "on": "click",
            "selector": "#Button",
            "request": "reachGoal",
            "vars": {
                "goalId": "superGoalId",
                "yaParams": "{\"key\": \"value\"}" // В качестве параметров визита при достижении цели будет использоваться значение переменной из события
            }
        },
        ...
    }
}
Поле Тип Описание
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"
            }
        },
        ...
    }
}

Загрузка страницы или отдельного ее элемента

Чтобы фиксировать момент отображения на экране посетителя конкретной страницы или ее элемента, используйте атрибут триггера 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": 16
                            },
                            "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"
                            }
                        }
                    }
                }
            </script>
        </amp-analytics>
    ...
</body>