Installing and configuring the tag for SPA sites

  1. Tag initialization
  2. Sending conversions
  3. Transmitting session parameters and user parameters
  4. Transmitting e-commerce data
  5. Enabling Session Replay, click maps, link maps, and Form Analysis

Tag initialization

To use a Yandex.Metrica tag on SPA sites, follow these steps:

  1. Create and install the code snippet on your site, if it is not yet installed.
  2. When initializing the tag, set the defer parameter to true. Example:
    ym(XXXXXX, 'init', {
    defer: true,
    clickmap:true,
    trackLinks:true,
    accurateTrackBounce:true
})
  3. In order for Yandex.Metrica to register important changes to a page, analyze the logic of your site and insert a hit function in the appropriate places so it’s triggered each time you believe the page has changed.
    ym(XXXXXX, 'hit', url[, options]);
    Parameters that can be passed in the hit function:

Parameter

Default value

 Type

Description
url * —

string

Current page URL.
options —

Object

 —
Field for the options object
options.callback —

Function

The callback function to call after sending pageview data
options.ctx —

Object

The context accessed by the this keyword in the callback function
options.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

Parameter

Default value

 Type

Description
url * —

string

Current page URL.
options —

Object

 —
Field for the options object
options.callback —

Function

The callback function to call after sending pageview data
options.ctx —

Object

The context accessed by the this keyword in the callback function
options.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
Example of calling the hit function
ym(XXXXXX, 'init', {});//...ym(XXXXXX, 'hit', '#!contacts', {    title: 'Contacts',    referer: 'http://example.com/#!main'});

Sending conversions

To track events on the site that do not 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'})

Transmitting e-commerce data

To transmit e-commerce data, enable this feature in Yandex.Metrica: Enabling E-commerce.

To collect e-commerce data correctly, you need to insert the hit function once when the user goes to a new page.
Example of sending e-commerce data
dataLayer.push({
    "ecommerce": {
        "purchase": {
            "actionField": {
                "id" : "TRX987"
            },
            "products": [
                {
                    "id": "25341",
                    "name": "Yandex men's sweatshirt",
                    "price": 1345.26,
                    "brand": "Yandex",
                    "category": "Clothing/Men's clothing/Sweatshirts and hoodies",
                    "variant": "Orange"
                },
                {
                    "id": "25314",
                    "name": "Yandex women's sweatshirt",
                    "price": 1543.62,
                    "brand": "Yandex",
                    "category": "Clothing/Women's clothing/Sweatshirts and hoodies",
                    "variant": "White",
                    "quantity": 3
                }
            ]
        }
    }
});

Enabling Session Replay, click maps, link maps, and Form Analysis

You can connect Session Replay 2.0, click maps and link maps. The scroll map, form analysis, and Session Replay 1.0 are not supported.