Installing 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”.

To connect a Yandex.Metrica tag 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 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. Loading an individual page element
  6. 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": 16
            },
            "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\"}" // When the goal is completed, the value of the variable from the event is used as the session parameters            }        },        ...
    }}
FieldTypeDescription
goalIdStringThe 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 an individual page element

Use the visible trigger attribute to register when elements on a page are displayed on the user's screen. This attribute can contain additional properties.

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 number, and make additional changes as necessary (for example, configure transmitting user parameters and session parameters).

<body>    ...        <amp-analytics type="metrika">            <script type="application/json">                {                    // Sending session params and user params                    "vars": {                        "counterId": "XXXXXX",                        "yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"                    },                    // Sending 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                                ]                            },                            // Track scrolling as a goal                            "request": "reachGoal",                            "vars": {                                "goalId": "halfScrollGoal"                            }                        },                        // Page scrolling                        "partsScroll": {                            "on": "scroll",                            "scrollSpec": {                                "verticalBoundaries": [                                    25,                                    90                                ]                            },                            // Track scrolling as a goal                             "request": "reachGoal",                            "vars": {                                "goalId": "partsScrollGoal"                            }                        }                    }                }            </script>        </amp-analytics>    ...</body>