Yandexを加える方法.メッツリカ
Yandexの追加Meaticaでギャツビーは非常に簡単で、わずか数分で行うことができます.追加する2つの方法があります.
何が最初に必要なヤンデックスのアカウントです.アカウントの設定を開始する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:
html.js💰: Start your cloud journey with $100 in free credits with DigitalOcean!
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/41932284" 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 .
If you want to know more about Gatsby , これらを見てくださいGatsby Tutorials .参考文献
Gatsby Docs , Yandex.Metrica Docs
Reference
この問題について(Yandexを加える方法.メッツリカ), 我々は、より多くの情報をここで見つけました https://dev.to/mariokandut/how-to-add-yandex-metrica-in-gatsby-pn3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol