How to add Yandex.Metrica in Gatsby
Tags: gatsby, javascript
Published: 2021-02-09 21:01:59

---
title: How to add Yandex.Metrica in Gatsby
published: true
date: 2021-02-05 00:00:00 UTC
tags: gatsby, javascript
canonical_url: https://www.mariokandut.com/how-to-add-yandex-metrica-in-gatsby/
---

[Yandex.Metrica](https://metrica.yandex.com/) is a free web analytics service offered by Yandex that tracks and reports website traffic. It was launched in 2008 and as of 2019, it is the third most widely used web analytics service on the web.

Adding Yandex.Metrica in Gatsby is quite easy and can be done in just a few minutes. There are two possible ways to add it.

What you need first is a Yandex account. Start with setting up an account [metrica.yandex.com](https://metrica.yandex.com/about).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-get-your-tracking-id-from-yandexmetrica)1. Get your tracking ID from Yandex.Metrica

After signing up for a Yandex account, create a tag and get your tracking ID from the dashboard next to your tag name or from the settings page. The tracking ID looks like this `12341234`.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-add-website-tracking)2. Add website tracking

Now you have two options:

- Install the community plugin Yandex.Metrica analytics [gatsby-plugin-yandex-metrica](https://www.gatsbyjs.com/plugins/gatsby-plugin-yandex-metrica/) OR
- Add the tracking code to customized `html.js`

In most cases the community plugin should be sufficient. Only if you have customized the html.js already, (script injection, etc.) you can add the tracking code there.

[💰: Start your cloud journey with $100 in free credits with DigitalOcean!](https://m.do.co/c/29f238135b61)

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#add-yandexmetrica-via-plugin)Add Yandex.Metrica via plugin

Install the plugin.

```
npm install --save gatsby-plugin-yandex-metrica
```

Add the plugin to your `gatsby-config.js` file:

```
module.exports = {
  plugins: [
    // All other plugins
    {
      resolve: `gatsby-plugin-yandex-metrica`,
      options: {
        trackingId: 'YOUR_YANDEX_METRICA_TRACKING_ID',
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        trackHash: true,

        // Detailed recordings of user activity on the site: mouse movement, scrolling, and clicks.
        webvisor: true,
      },
    },
  ],
};
```

**IMPORTANT:** I recommend using an environment variable to store your `YANDEX_METRICA_TRACKING_ID`.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#add-yandexmetrica-in-htmljs)Add Yandex.Metrica in html.js

If you have already a `html.js` file, skip the next paragraph.

Gatsby uses a React component to server render the `<head>` and other parts of the HTML outside of the core Gatsby application. Most sites should use the default html.js shipped with Gatsby and customizing html.js is not supported within a **Gatsby Theme**.

If you need to insert custom HTML into the `<head>` or `<footer>` of each page on your site, you can use html.js.

Copy the default html.js:

```
cp .cache/default-html.js src/html.js
```

Then add the website tracking code from Yandex.Metrica. You can find the code snippet under _Settings_:

```
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(YANDEX_METRICA_TRACKING_ID, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        trackHash:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/41932284" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#3-build-and-test)3. Build and Test.

**This only works in production mode.** Hence, to test the correct firing of events run: `gatsby build && gatsby serve`and confirm that website tracking is working in Yandex.Metrica. Your Ad-Blocker could be blocking the tracking, so you have to turn it off.

🎉🎉🎉 **Congratulations!** You have successfully added Yandex.Metrica to your website. 🎉🎉🎉

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

If you want to know more about **[Gatsby](https://www.mariokandut.com/tags/gatsby)**, have a look at these [Gatsby Tutorials](https://www.mariokandut.com/tags/gatsby).

References (and Big thanks):

[Gatsby Docs](https://www.gatsbyjs.com/plugins/gatsby-plugin-yandex-metrica/), [Yandex.Metrica Docs](https://yandex.com/support/metrica/quick-start.html)