Gatsby에 Yandex.Metrica를 추가하는 방법
Gatsby에 Yandex.Metrica를 추가하는 것은 매우 쉽고 몇 분 안에 완료할 수 있습니다. 추가하는 방법은 두 가지가 있습니다.
먼저 Yandex 계정이 필요합니다. 계정 설정으로 시작하십시오metrica.yandex.com.
1. Yandex.Metrica에서 추적 ID 가져오기
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. 웹사이트 추적 추가
Now you have two options:
html.js 대부분의 경우 커뮤니티 플러그인이면 충분합니다. 이미 html.js를 사용자 정의한 경우(스크립트 삽입 등) 거기에 추적 코드를 추가할 수 있습니다.
💰: Start your cloud journey with $100 in free credits with DigitalOcean!
플러그인을 통해 Yandex.Metrica 추가
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 .
html.js에 Yandex.Metrica 추가
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. 빌드 및 테스트.
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
이 문제에 관하여(Gatsby에 Yandex.Metrica를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mariokandut/how-to-add-yandex-metrica-in-gatsby-pn3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
