Метрика

Встановлення лічильника на сайт з 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 — для надсилання параметрів візитів;
  • атрибути тригерів — для передавання подій (наприклад, досягнення цілі).

Надсилання параметрів візитів і відвідувачів

Приклад передавання довільних параметрів візиту та параметрів відвідувачів у момент відвідування сайту за допомогою змінної 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": 16
            },
            "request": "notBounce"
        },
        ...
    }
}

Досягнення цілі

Щоб відстежувати досягнення цілі в разі кліка на певний елемент сторінки, використовуйте атрибут тригера click.

{
    ...
    "triggers": {
        "someGoalReach": {
            "on": "click",
            "selector": "#Button",
            "request": "reachGoal",
            "vars": {
                "goalId
[no-highlight[

Тип

String

Опис

Ідентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

]no-highlight]
": "superGoalId", "yaParams": "{\"key\": \"value\"}" // Як параметри візиту в разі досягненні цілі буде використовуватися значення змінної з події } }, ... } }
ПолеТипОпис
goalId StringІдентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

Скролінг сторінок

Ви можете фіксувати скролінг сторінок до певної точки (частку у відсотках від усієї висоти сторінки) за допомогою атрибута тригера scroll. Цю подію може бути задано як ціль.

{
    ...
    "triggers": {
        "halfScroll": {
            "on": "scroll",
            "scrollSpec": {
                "verticalBoundaries": [
                    50
                ]
            },
            "request": "reachGoal",
            "vars": {
                "goalId
[no-highlight[

Тип

String

Опис

Ідентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

]no-highlight]
": "halfScrollGoal" } }, "partsScroll": { "on": "scroll", "scrollSpec": { "verticalBoundaries": [ 25, 90 ] }, "request": "reachGoal", "vars": { "goalId
[no-highlight[

Тип

String

Опис

Ідентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

]no-highlight]
": "partsScrollGoal" } }, ... } }

Завантаження сторінки або окремого її елемента

Щоб фіксувати момент відображення на екрані відвідувача конкретної сторінки або її елемента, використовуйте атрибут тригера visible. Цей атрибут може містити додаткові параметри.

Загальний приклад коду лічильника

<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
[no-highlight[

Тип

String

Опис

Ідентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

]no-highlight]
": "halfScrollGoal" } }, // Скролінг сторінки "partsScroll": { "on": "scroll", "scrollSpec": { "verticalBoundaries": [ 25, 90 ] }, // Відстеження скролінгу як цілі "request": "reachGoal", "vars": { "goalId
[no-highlight[

Тип

String

Опис

Ідентифікатор цілі, який задається під час створення цілі типу JavaScript-подія в інтерфейсі Метрики.

]no-highlight]
": "partsScrollGoal" } } } } </script> </amp-analytics> ... </body>