Встановлення лічильника на сайт з 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. Цей атрибут може містити додаткові параметри.

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

<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>