How to add Yandex.Metrica in Gatsby
ยฉ https://www.mariokandut.com

How to add Yandex.Metrica in Gatsby

Three easy steps to add website tracking to your website

ByMario Kandut

honey pot logo

Europeโ€™s developer-focused job platform

Let companies apply to you

Developer-focused, salary and tech stack upfront.

Just one profile, no job applications!

Yandex.Metrica 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.

๐Ÿ’ฐ The Pragmatic Programmer: journey to mastery. ๐Ÿ’ฐ One of the best books in software development, sold over 200,000 times.

What you need first is a Yandex account. Start with setting up an account metrica.yandex.com.

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.

2. Add website tracking

Now you have two options:

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.

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.

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/YANDEX_METRICA_TRACKING_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

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.

If you want to know more about Gatsby, have a look at these Gatsby Tutorials.

References (and Big thanks):

Gatsby Docs, Yandex.Metrica Docs

Scroll to top โ†‘