Installing and setting up a tag on a site with AMP

A Yandex Metrica tag executes JavaScript. If you install the code snippet on a site that uses Accelerated Mobile Pages (AMP), the site's pages won't pass validation. This is because the AMP technology restricts the use of JavaScript and HTML5. To get around this issue, you can install the tag in a special way.

Note. However, some of the Yandex Metrica features aren't supported in this case: E-commerce, Session Replay, and tracking clicks on the “Share button”.
  1. Enabling a tag on a site with AMP
  2. Transmitting data

Enabling a tag on a site with AMP

Attention. Sites that use Accelerated Mobile Pages (AMP) technology cannot collect content analytics data.

Make changes to the HTML code on your site's pages:

  1. Tracking user actions on sites with AMP uses the additional amp-analytics component. Add it to your web page code — within the element head:

    <head>
    ...
        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    ...
</head>

  2. Make changes in the body element: add the amp-analytics element. In order for session data to be transmitted to Yandex Metrica, set the type attribute to the value metrika, and use the tagId variable to set the tag ID.

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

Transmitting data

Attention. When the user opens an AMP page, Yandex Metrica registers a view (pageview). This means that you don't need to transmit this event to Yandex Metrica. If you do send it, Yandex Metrica reports will show the wrong number of pageviews.

To transmit data when the tag is initialized, use:

  • The yaParams variable for sending session parameters.
  • Attributes of triggers for transmitting events such as goal completions.
  1. Sending session parameters and user parameters
  2. Accurate bounce rate
  3. Conversion
  4. Page scrolling
  5. Scrolling an infinite feed
  6. Loading an individual page element
  7. General example of the code snippet

Sending session parameters and user parameters

Example of transmitting custom session parameters and user parameters during a session by using the yaParams variable:

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

You can also transmit just the session parameters, or just the user parameters:

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

Accurate bounce rate

To get the accurate bounce rate, use the timer trigger attribute:

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

Conversion

To track goal completion when a specific page element is clicked, use the click trigger attribute.

{
    ...
    "triggers": {
        "someGoalReach": {
            "on": "click",
            "selector": "#Button",
            "request": "reachGoal",
            "vars": {
                "goalId": "superGoalId",
                "yaParams": "{\"key\": \"value\"}" // The value of the variable from the event will be used as the parameters of the session when the goal is reached
            }
        },
        ...
    }
}
Field Type Description
goalId string The goal identifier that is set when creating a JavaScript event goal in the Yandex Metrica interface.
Field Type Description
goalId string The goal identifier that is set when creating a JavaScript event goal in the Yandex Metrica interface.

Page scrolling

You can use the scroll trigger attribute to register scrolling down to a specific point on the page (a percentage of the page height). You can set this event as a goal.

{
    ...
    "triggers": {
        "halfScroll": {
            "on": "scroll",
            "scrollSpec": {
                "verticalBoundaries": [
                    50
                ]
            },
            "request": "reachGoal",
            "vars": {
                "goalId": "halfScrollGoal"
             }
        },
        "partsScroll": {
            "on": "scroll",
            "scrollSpec": {
                "verticalBoundaries": [
                    25,
                    90
                ]
            },
            "request": "reachGoal",
            "vars": {
                    "goalId": "partsScrollGoal"
            }
        },
        ...
    }
}

Scrolling an infinite feed

An infinite feed can be used to view articles that follow each other. To register article-to-article click-throughs and views of each of them, use the amp-next-page-scroll trigger.

{
    ...
    "triggers": {
        "trackScrollThrough": {
             "on": "amp-next-page-scroll",
             "request": "pageview"
        },
        ...
    }
}

Loading an individual page element

Use the visible trigger attribute to register when elements on a page are displayed on the user's screen.

General example of the code snippet

The code sample is provided only to illustrate the capabilities of the tag. When copying it, delete the comments (//<...>), replace XXXXXX with your tag ID, and make additional changes as necessary (for example, configure transmitting user parameters and session parameters).

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

If you were unable to independently check the tag, follow the recommendations below.

This might happen for the following reasons:

  • The tag is installed incorrectly. For example, the CMS modified the code snippet. Reinstall the tag or contact the support service for your CMS.
  • Broken scripts are preventing the Yandex Metrica tag from working on the site. You can check this in the browser console.

This means that information is being transmitted to Yandex Metrica. However, the data might not be shown in reports for any of the following reasons:

  • Data is sent to a tag with a different number.
  • The Filters tab in the tag settings has overly strict filters defined. Remove unneeded filters.
  • The Filters tab in the tag settings has the Don't count my sessions filter enabled. This means that the tag doesn't register your own sessions. Try accessing the site with your browser in “incognito” mode.