How to add Yandex.Metrica in Gatsby
Three easy steps to add website tracking to your website
Posted
Updated
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:
- Install the community plugin Yandex.Metrica analytics 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.
Add Yandex.Metrica via plugin
Install the plugin.
npm install --save gatsby-plugin-yandex-metricaAdd 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.jsThen 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):
Newsletter Signup
Never miss an article.
Latest GATSBY articles:
