Metrica

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, Yandex.Metrica allows the counter to be installed in a special way.

Note. However, certain Yandex.Metrica features aren't supported in this case: Target Call, Ecommerce, WebVisor, 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:

    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  2. 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.

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

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.

Transmitting session parameters

Example of transmitting custom session parameters using the yaParams variable:

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

Type

String

Description

The goal identifier that is set when creating a JavaScript event goal in the Yandex.Metrica interface.

]no-highlight]
": "superGoalId", "yaParams": "{"key": "value"}" // When the goal is completed, the value of a variable from the event is used as the session parameters } }, ...
FieldTypeDescription
goalId StringThe 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
[no-highlight[

Type

String

Description

The goal identifier that is set when creating a JavaScript event goal in the Yandex.Metrica interface.

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

Type

String

Description

The goal identifier that is set when creating a JavaScript event goal in the Yandex.Metrica interface.

]no-highlight]
": "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.