Installing a counter on a site with AMP

A Yandex.Metrica counter executes JavaScript. If you install the counter code 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 counter in a special way.

Note. However, a number of Yandex.Metrica features aren't supported: Ecommerce, Session Replay, and tracking clicks on the Share button.

To connect a Yandex.Metrica counter to a site with AMP, 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 the code of pages on your site, inside the head element:

    <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 counterId variable to set the counter number.

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

To transmit data when the counter 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. Goal completion
  4. Page scrolling
  5. Loading a page or one of its elements
  6. General example of the counter code

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": 16
            },
            "request": "notBounce"
        },
        ...
    }}

Goal completion

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\"}" // When the goal is completed, the value of the variable from the event is used as the session parameters
            }
        },
        ...
    }}
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"
            }
        },
        ...
    }}

Loading a page or one of its elements

Use the visible trigger attribute to register when a specific page or element on a page is displayed on the user's screen. This attribute can contain additional properties.

General example of the counter code

Sample code is provided only to illustrate the capabilities of the counter. When copying it, remove the comments ( / / < ... > ), replace XXXXXX with your counter number, and make any additional changes that are necessary (for example, configure transmitting user parameters and session parameters).

<body>
    ...
        <amp-analytics type="metrika">
            <script type="application/json">
                {
                    // Sending session parameters and user parameters
                    "vars": {
                        "counterId": "XXXXXX",
                        "yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
                    },
                    // Transmitting triggers
                    "triggers": {
                        // Accurate bounce rate
                        "notBounce": {
                            "on": "timer",
                            "timerSpec": {
                                "immediate": false,
                                "interval": 15,
                                "maxTimerLength": 16
                            },
                            "request": "notBounce"
                        },
                        // Page scrolling
                        "halfScroll": {
                            "on": "scroll",
                            "scrollSpec": {
                                "verticalBoundaries": [
                                    50
                                ]
                            },
                            // Tracking scrolling as a goal
                            "request": "reachGoal",
                            "vars": {
                                "goalId": "halfScrollGoal"
                            }
                        },
                        // Page scrolling
                        "partsScroll": {
                            "on": "scroll",
                            "scrollSpec": {
                                "verticalBoundaries": [
                                    25,
                                    90
                                ]
                            },
                            // Tracking scrolling as a goal 
                            "request": "reachGoal",
                            "vars": {
                                "goalId": "partsScrollGoal"
                            }
                        }
                    }
                }
            </script>
        </amp-analytics>
    ...
</body>