yandex metrika

pages/_document.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { YMetrika } from '../src/components/YMetrika'
 
 export default class MyDocument extends Document {
     // static async getInitialProps(ctx) {
@@ -53,6 +54,8 @@ export default class MyDocument extends Document {
 
                     {/* Instagram Embed */}
                     <script async defer src="//platform.instagram.com/en_US/embeds.js" />
+
+                    <YMetrika account={24027460}/>
                 </Head>
 
                 <body className="custom_class">

src/components/YMetrika.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+function metrika(account) {
+    return `
+        <!-- Yandex.Metrika counter -->
+        (function (d, w, c) {
+            (w[c] = w[c] || []).push(function() {
+                try {
+                    w.yaCounter${account} = new Ya.Metrika({
+                        id:${account},
+                        clickmap:true,
+                        trackLinks:true,
+                        accurateTrackBounce:true,
+                        webvisor:true
+                    });
+                } catch(e) { }
+            });
+    
+            var n = d.getElementsByTagName("script")[0],
+                s = d.createElement("script"),
+                f = function () { n.parentNode.insertBefore(s, n); };
+            s.type = "text/javascript";
+            s.async = true;
+            s.src = "https://mc.yandex.ru/metrika/watch.js";
+    
+            if (w.opera == "[object Opera]") {
+                d.addEventListener("DOMContentLoaded", f, false);
+            } else { f(); }
+        })(document, window, "yandex_metrika_callbacks");
+        <!-- /Yandex.Metrika counter -->
+    `
+}
+
+export const YMetrika = (props) => (
+    <script dangerouslySetInnerHTML={{ __html: metrika(props.account) }} />
+)