---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.6
alternate:
  - https://yandex.com.tr/support/metrica/en/code/counter-spa-setup.md
  - https://yandex.com.tr/support/metrica/es/code/counter-spa-setup.md
  - https://yandex.com.tr/support/metrica/pt/code/counter-spa-setup.md
  - https://yandex.com.tr/support/metrica/ru/code/counter-spa-setup.md
  - https://yandex.com.tr/support/metrica/tr/code/counter-spa-setup.md
title: Installing and configuring the tag for SPA sites
description: How to install and configure a tag for SPA sites.
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/support/metrica/en/llms.txt


# Installing and configuring the tag for SPA sites

## Tag initialization {#section_r5y_2rf_qfb}

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

1. [Create and install the tag code on your site](https://yandex.com.tr/support/metrica/en/quick-start.md), if it is not yet installed. 
1. 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(XXXXXXXX, 'init', {
        defer: true,
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
    })
    ```
    
1. To make sure that Yandex Metrica registers important page changes, analyze the logic of your site and insert the [hit](https://yandex.com.tr/support/metrica/en/objects/hit.md) 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(XXXXXXXX, 'hit', url[, options]);
    ```
    Parameters that can be passed in the `hit` function:
    
    <!-- source: en/_includes/objects/hit/id-hit/hit-params.md -->
    #|
    ||
    **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`](https://yandex.com.tr/support/metrica/en/data/visit-params-example.md#goal)
    ||
    ||
    `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](https://yandex.com.tr/support/metrica/en/objects/hit.md#price). 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](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=currency-codes).

    <!-- source: en/_includes/ecommerce/data/id-about/currency-note.md -->
    If a different currency is passed, null values are sent instead of currencies and amounts.
    <!-- endsource: en/_includes/ecommerce/data/id-about/currency-note.md -->
    ||
    |#
    <!-- endsource: en/_includes/objects/hit/id-hit/hit-params.md -->
    
    {% cut "Example of calling the `hit` function" %}
    
    ```javascript
    ym(XXXXXXXX, 'init', {});
    //...
    ym(XXXXXXXX, 'hit', '#contacts', {params:{
        title: 'Contact information',
        referer: 'http://example.com/#main'
    }});
    ```
    
    {% endcut %}
    

## Sending conversions {#section_bpg_5dk_yfb}

To track site events that don't change the page URL, use the `reachGoal` function:
```
ym(XXXXXXXX, 'reachGoal', 'TARGET_NAME);
```

[Examples of setting goals in the code snippet](https://yandex.com.tr/support/metrica/en/objects/reachgoal.md#reach_goal_examples).

## Transmitting session parameters and user parameters {#section_ypx_lsf_qfb}


{% list tabs %}

- Session parameters

  
  ```
  ym(XXXXXXXX, 'params', {param1: 'param_value1'})
  ```
  

- User parameters

  
  ```
  ym(XXXXXXXX, 'userParams', {param1: 'param_value1'})
  ```

{% endlist %}


## Transmitting E-commerce data {#section_nsk_vtf_qfb}

To transmit data, [enable e-commerce](https://yandex.com.tr/support/metrica/en/ecommerce/about.md) in Yandex Metrica.

To collect E-commerce data correctly, make sure to call the `hit` function once when the user loads a new page.

{% cut "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
                }
            ]
        }
   }
});
```


{% endcut %}

## Enabling Session Replay, click maps, link maps, and Form Analysis {#section_bg3_xtf_qfb}

You can [connect Session Replay](https://yandex.com.tr/support/metrica/en/webvisor/info.md), [click maps](https://yandex.com.tr/support/metrica/en/behavior/click-map.md), and [link maps](https://yandex.com.tr/support/metrica/en/behavior/link-map.md) to an SPA site. The scroll map, form analysis, and Session Replay 1.0 are not supported.

## Disabling Yandex Metrica on SPA {#destruct}

To disable Yandex Metrica, use the `.destruct()` method on the tag instance. This method works only on the [new version](https://yandex.com.tr/support/metrica/en/general/tag-info.md) 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()    
    ```
    

- For tags initialized via the `ym` method:
    
    ```
    // Initializing the tag
    ym(XXXXXX, 'init', {});
    
    // Deinitializing the tag
    ym(XXXXXX, 'destruct')
    ```
    
Use the `destruct` method only to stop Yandex Metrica.

<!-- source: en/_includes/buttons/chat-button.md -->
[Chat with us](https://yandex.com.tr/chat/#/user/036e6a02-3620-9cdc-4c5e-a34667a7379e?utm_source=spravka){.button}

<!-- source: en/_includes/styles/href-to-button.md -->

<!-- endsource: en/_includes/styles/href-to-button.md -->
<!-- endsource: en/_includes/buttons/chat-button.md -->

<!-- source: en/_includes/code/texing-button.md -->
<div class="cut-button">

{% cut "Write an email" %}

<!-- source: en/_includes/popup/id-qanda/check1.md -->
If you were unable to [independently check the tag](https://yandex.com.tr/support/metrica/en/general/check-counter.md), follow the recommendations below.
<!-- endsource: en/_includes/popup/id-qanda/check1.md -->

{% list tabs radio %}

- Data is not sent to the console

  {% include [qanda-check2-2](../_includes/popup/id-qanda/check2-2.md) %}

  {% cut "The recommendations did not help" %}


  <div style="padding: 15px;
         margin: 10px 0;
         background: #FFFFFF;
         border-radius: 10px;
         border: 1px solid var(--g-color-line-generic);">
    <iframe style="background: #FFFFFF;"
            height="700"
            width="100%"
            frameborder="0"
            src="https://forms.yandex.com.tr/surveys/1706/?&theme=Dannye v konsoli ne otpravlyayutsya&iframe=1&lang=tr">
    </iframe>
  </div>

  {% endcut %}

- There is data in the console, but the reports do not appear

  <!-- source: en/_includes/popup/id-qanda/check2-3.md -->
  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:
  <!-- endsource: en/_includes/popup/id-qanda/check2-3.md -->

  <!-- source: en/_includes/popup/id-qanda/check2-4.md -->
  - 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.
  <!-- endsource: en/_includes/popup/id-qanda/check2-4.md --> 

  {% cut "The recommendations did not help" %}


  <div style="padding: 15px;
           margin: 10px 0;
           background: #FFFFFF;
           border-radius: 10px;
           border: 1px solid var(--g-color-line-generic);">
    <iframe style="background: #FFFFFF;"
              height="700"
              width="100%"
              frameborder="0"
              src="https://forms.yandex.com.tr/surveys/1706/?&theme=Dannye v konsoli est, no otchety ne otobrazhayutsya&iframe=1&lang=tr">
    </iframe>
  </div>

  {% endcut %}

{% endlist %}

{% endcut %}

</div>

<!-- source: en/_includes/styles/cut-button.md -->

<!-- endsource: en/_includes/styles/cut-button.md -->
<!-- endsource: en/_includes/code/texing-button.md -->

<!-- source: en/_includes/footer-links.md -->
- - -

<div class="borderless-table">

#|
||
Useful links

- [Demo tag](https://metrica.yandex.com.tr/r/dashboard?)
- [Add a tag](https://metrica.yandex.com.tr/add/)
- [Free tag setup](https://yandex.com.tr/promo/freeservice/metrica?utm_source=help_metrica_tr&utm_medium=cpc&utm_campaign=1)
- [Yandex Metrica API](https://tech.yandex.com.tr/metrika/)
- [Suggest your idea](https://yandex.com.tr/support/metrica/troubleshooting/idea.html)
- [Discuss in Telegram](https://t.me/yandexmetrika)
|
Online training

- [Get a Yandex Metrica certificate](https://yandex.ru/adv/expert/exam/metrika/?utm_source=metrika_help&utm_medium=web&utm_campaign=static&utm_content=useful_links)


- [Take a training course](https://yandex.com/adv/edu/online/metrika?utm_source=metrika_help&utm_medium=web&utm_campaign=static&utm_content=useful_links)

||
|#

</div>

<!-- source: en/_includes/styles/table-style.md -->

<!-- endsource: en/_includes/styles/table-style.md -->
<!-- endsource: en/_includes/footer-links.md -->

<!-- source: en/_includes/styles/cut-button.md -->

<!-- endsource: en/_includes/styles/cut-button.md -->

<!-- source: en/_includes/styles/href-to-button.md -->

<!-- endsource: en/_includes/styles/href-to-button.md -->

[*просмотрах]: 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](https://yandex.com.tr/support/metrica/en/objects/hit.md).
{% included (../_includes/popup/id-qanda/check2-2.md) %}
   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.


{% endincluded %}