Hi, I tried to get Google Analytics running following the description in https://nuxtjs.org/faq/google-analytics.
After integration the GA messages are sent out as expected, but I also get errors in my console and my navigation seems broken.
[nuxt.js] Cannot load components DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.je [as appendChild] (http://oye.kolter.it/_nuxt/vendor.bundle.217894826f03ebc6185d.js:21:19712)
...
TypeError: Cannot read property '$options' of undefined
at ut (vendor.bundle.2178948….js:21)
at prepatch (vendor.bundle.2178948….js:21)
....The cause of the error seems to be rooted in a conflict between LD+JSON <script> Markups which I generate in a special component, because the GA script is supposed to be inserted right before the first script element. My <script type="application/ld+json"> elements live inside a dynamic component and I guess the GA script is not meant to be inserted in this kind of virtual (?) enviroment.
I am able to fix this by a substitution to the GA script in the ga.js plugin from the How To:
Substitute:
m = s.getElementsByTagName(o)[0]; by
m = s.querySelectorAll('script:not([type="application/ld+json"])')[0];I assume this is not the most general solution to the problem, but for the time being I found no other solution. Another solution I would see, which would not involve touching the GA snippet would be to render some sort of placeholder <script> element right after the <body> element on the server side.
I just wanted to share this problem and my crooked solution to the community. From what I can see this is solved in nuxt/modules/google-analytics by moving the script directly to the head.
<!--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/c759">#c759</a>)</em></sub></div>