Merge pull request #14 from jirfag/master

Speed up loading

README.md

@@ -13,9 +13,18 @@ plugins: [
  {
  resolve: `gatsby-plugin-yandex-metrika`,
  options: {
- trackingId: 'YOUR_YANDEX_METRIKA_TRACKING_ID',
+ // The ID of yandex metrika.
+ trackingId: 12345,
+ // Enabled a webvisor. The default value is `false`.
  webvisor: true,
+ // Enables tracking a hash in URL. The default value is `false`.
  trackHash: true,
+ // Defines where to place the tracking script - `false` means before body (slower loading, more hits)
+ // and `true` means after the body (faster loading, less hits). The default value is `false`.
+ afterBody: true,
+ // Use `defer` attribute of metrika script. If set to `false` - script will be loaded with `async` attribute.
+ // Async enables earlier loading of the metrika but it can negatively affect page loading speed. The default value is `false`.
+ defer: false,
  },
  },
 ]
@@ -31,9 +40,11 @@ plugins: [
  {
  resolve: `gatsby-plugin-yandex-metrika`,
  options: {
- trackingId: 'YOUR_YANDEX_METRIKA_TRACKING_ID',
+ trackingId: 12345,
  webvisor: true,
  trackHash: true,
+ afterBody: true,
+ defer: false,
  useCDN: true,
  },
  },

src/gatsby-ssr.js

@@ -1,30 +1,48 @@
 import React from "react"
 
-exports.onRenderBody = ({ setPreBodyComponents }, pluginOptions) => {
- if (process.env.NODE_ENV === `production`) {
- const metrikaSrc = pluginOptions.useCDN
- ? `https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js`
- : `https://mc.yandex.ru/metrika/tag.js`;
+exports.onRenderBody = ({ setHeadComponents, setPreBodyComponents, setPostBodyComponents }, pluginOptions) => {
+ if (process.env.NODE_ENV !== `production` || !pluginOptions.trackingId) {
+ return null
+ }
+
+ const metrikaSrc = pluginOptions.useCDN
+ ? `https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js`
+ : `https://mc.yandex.ru/metrika/tag.js`;
 
- return setPreBodyComponents([
- <script
- key={`gatsby-plugin-yandex-metrika`}
- dangerouslySetInnerHTML={{
- __html: `
- (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", "${metrikaSrc}", "ym");
+ // Lighthouse recommends pre-connecting to an analytics domain.
+ setHeadComponents([
+ <link
+ rel="preconnect dns-prefetch"
+ key="preconnect-yandex-metrika"
+ href={`${
+ pluginOptions.useCDN
+ ? "https://cdn.jsdelivr.net"
+ : "https://mc.yandex.ru"
+ }`}
+ />,
+ ])
 
- ym(${pluginOptions.trackingId}, "init", {
- defer: true,
- clickmap:true,
- trackLinks:true,
- accurateTrackBounce:true,
- webvisor:${pluginOptions.webvisor},
- trackHash:${pluginOptions.trackHash}
- });
+ const setComponents = pluginOptions.afterBody
+ ? setPostBodyComponents
+ : setPreBodyComponents
+ return setComponents([
+ <script
+ key={`gatsby-plugin-yandex-metrika`}
+ dangerouslySetInnerHTML={{
+ __html: `
+ (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],${pluginOptions.defer ? `k.defer=1` : `k.async=1`},k.src=r,a.parentNode.insertBefore(k,a)})
+ (window, document, "script", "${metrikaSrc}", "ym");
+
+ ym(${pluginOptions.trackingId}, "init", {
+ defer: true,
+ clickmap:true,
+ trackLinks:true,
+ accurateTrackBounce:true,
+ webvisor:${pluginOptions.webvisor},
+ trackHash:${pluginOptions.trackHash}
+ });
 `,}} />,
- <noscript><div><img src={`https://mc.yandex.ru/watch/${pluginOptions.trackingId}`} style={{position:'absolute',left:'-9999px'}} alt="" /></div></noscript>
- ])
- }
+ <noscript><div><img src={`https://mc.yandex.ru/watch/${pluginOptions.trackingId}`} style={{position:'absolute',left:'-9999px'}} alt="" /></div></noscript>
+ ])
 }