Nuxt.js: How to include Yandex.Metrika counter code on Nuxt.js app?

Created on 16 Jan 2017 · 4Comments · Source: nuxt/nuxt.js

Hello and thx for awesome framework!

I try to include Yandex.Metrika (and Google Analytics) counter code to my Nuxt.js app. This is full code:

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter41774234 = new Ya.Metrika({
                    id:41774234,
                    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");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/41774234" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

I place this code into ./components/Footer.vue (from Nuxt.js starter kit) to <template>...</template> container and do this npm run buld && npm run generate. Console show me error:

[nuxt.js] Cannot load components – HierarchyRequestError (DOM Exception 3): 
The operation would yield an incorrect node tree.

How to fix it?

_{This question is available on Nuxt.js community (#c118)}

question

Source

koddr

All 4 comments

Hi,
I don't know how to use Yandex.Metrika but it seems like Google Analytics.
For google analytics, you can see how we add it on the nuxtjs.org website on this links:
plugin file and config.