Static GitHub Issues

[141] How to include Yandex.Metrika counter code on Nuxt.js app?

prev: how call server related methods/functions in nuxtServerInit
next: How to use vue-router's scroll behavior?

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?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c118">#c118</a>)</em></sub></div>