Installing and configuring the tag for SPA sites
Tag initialization
To use a Yandex Metrica tag on SPA sites, follow these steps:
-
Create and install the tag code on your site, if it is not yet installed.
-
When initializing the tag, set the
defer
parameter totrue
. This is necessary in order to disable the automatic sending of data about views. To register page impressions, use thehit
function as described in section 3.
Example of initializing the tag:ym(XXXXXX, 'init', { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true })
-
To make sure that Yandex Metrica registers important page changes, analyze the logic of your site and insert the hit function in the appropriate parts of your code so that it's called each time you believe the page has changed.
Call thehit
function:ym(XXXXXX, 'hit', url[, options]);
Parameters that can be passed in the
hit
function:Parameter
Default value
Type
Description
url
—
String
The URL of the page from which the view was made. If the URL isn't provided, the value from
window.location.href
options
—
Object
—
options
fieldsoptions.callback
—
Function
The callback function to call after sending pageview data
options.ctx
—
Object
Context accessed by the
this
keyword in the callback functionoptions.params
—
Object
Session parameters
options.referer
—
String
The URL that the user loaded the current page contents from
options.title
document.title
String
Title of the current page
Fields for the
options.params
object:order_price
—
Double
Revenue by goal. You can set the cost in a currency or conventional units.
currency
—
String
Use this field if you want to pass the goal cost in currency. Yandex Metrica recognizes a three-letter ISO 4217 currency code.
If a different currency is passed, null values are sent instead of currencies and amounts.
Example of calling the
hit
functionym(XXXXXX, 'init', {}); //... ym(XXXXXX, 'hit', '#contacts', {params:{ title: 'Contact information', referer: 'http://example.com/#main' }});
Sending conversions
To track site events that don't change the page URL, use the reachGoal
function:
ym(XXXXXX, 'reachGoal', 'TARGET_NAME);
Examples of setting goals in the code snippet.
Transmitting session parameters and user parameters
ym(XXXXXX, 'params', {param1: 'param_value1'})
ym(XXXXXX, 'userParams', {param1: 'param_value1'})
Transmitting E-commerce data
To transmit data, enable e-commerce in Yandex Metrica.
To collect E-commerce data correctly, make sure to call the hit
function once when the user loads a new page.
Example of sending E-commerce data
dataLayer.push({
"ecommerce": {
"purchase": {
"actionField": {
"id" : "TRX987"
},
"products": [
{
"id": "25341",
"name": "Yandex hoodie (men)",
"price": 1345.26,
"brand": "Yandex",
"category": "Clothes/Men's clothes/Hoodies and sweatshirts",
"variant": "Orange"
},
{
"id": "25314",
"name": "Yandex hoodie (women)",
"price": 1543.62,
"brand": "Yandex",
"category": "Clothes/Women's clothes/Hoodies and sweatshirts",
"variant": "White",
"quantity": 3
}
]
}
}
});
Enabling Session Replay, click maps, link maps, and Form Analysis
You can connect Session Replay, click maps, and link maps to an SPA site. The scroll map, form analysis, and Session Replay 1.0 are not supported.
Disabling Yandex Metrica on SPA
To disable Yandex Metrica, use the .destruct()
method on the tag instance. This method works only on the new version of Yandex Metrica tag code.
-
For tags initialized via the
Ya.Metrika2
constructor:// Initializing the tag const counter = new Ya.Metrika2(counterId); // Denitializing the tag counter.destruct()
-
If initialization occurs with settings:
// Initializing the tag const counter = new Ya.Metrika2({ id: counterId, trackLinks: true }); // Denitializing the tag counter.destruct()
Use the destruct
method only to stop Yandex Metrica.
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.