Installing and configuring the tag for SPA sites

Tag initialization

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

  1. Create and install the tag code on your site, if it is not yet installed.

  2. When initializing the tag, set the defer parameter to true. This is necessary in order to disable the automatic sending of data about views. To register page impressions, use the hit function as described in section 3.
    Example of initializing the tag:

    ym(XXXXXX, 'init', {
        defer: true,
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
    })
    
  3. 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 the hit 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 fields

    options.callback

    Function

    The callback function to call after sending pageview data

    options.ctx

    Object

    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

    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 function
    ym(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.

Chat with us

Write an email

If you were unable to independently check the tag, follow the recommendations below.

This might happen for the following reasons:

  • The tag is installed incorrectly. For example, the CMS modified the tag code. Reinstall the tag or contact the support service for your CMS.
  • Broken scripts are preventing the Yandex Metrica tag from working on the site. You can check this in the browser console.
The recommendations did not help

This means that information is being transmitted to Yandex Metrica. However, the data might not be shown in reports for any of the following reasons:

  • Data is sent to a tag with a different number.
  • The Filters tab in the tag settings has overly strict filters defined. Remove unneeded filters.
  • The Filters tab in the tag settings has the Don’t count my sessions filter enabled. This means that the tag doesn't register your own sessions. Try accessing the site with your browser in “incognito” mode.
The recommendations did not help

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.