Installing and setting up a tag on a site with AMP
A Yandex Metrica counter executes JavaScript. If you install the tag 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 tag in a special way.
Note
Note that in this case the following Yandex Metrica features won't be supported: E-commerce, Session Replay, and tracking Share button clicks.
Enabling a tag on a site with AMP
Alert
Sites that use Accelerated Mobile Pages (AMP) technology cannot collect content analytics data.
Make changes to the HTML code on your site’s pages:
-
Tracking user actions on sites with AMP uses the additional amp-analytics component. Add it to your web page code, within the
headelement:<head> ... <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> ... </head> -
Edit the
bodyelement: add theamp-analyticselement. In order for session data to be transmitted to Yandex.Metrica, set thetypeattribute to the valuemetrika, and use thecounterIdvariable to set the counter number.<body> ... <amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" ... } } </script> </amp-analytics> ... </body>
Transmitting data
Alert
When a 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.
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\"}"
},
...
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"__ymu\":{\"user_param_key\":\"user_param_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\"}" // When the goal is completed, the value of the variable from the event is used as the session parameters
}
},
...
}
}
|
Field |
Type |
Description |
|
|
String |
A 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 tag code
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 parameters and user parameters
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
// Transmitting triggers
"triggers": {
// Precise bounce indicator
"notBounce": {
"on": "timer",
"timerSpec": {
"immediate": false,
"interval": 15,
"maxTimerLength": 14
},
"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"
}
},
// Infinite feed scrolling
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
...
</body>
Learn more
|
Useful links |
Online training |
Loading one of a site’s pages when a user navigates to it. Pageviews also include page refreshes, AJAX site updates, and sending data using the hit method.
Type
String
Description
The goal identifier that is set when creating a JavaScript event goal in the Yandex Metrica interface.