How to set up Yandex Metrika/Google Analytics in Nuxt? Why the huge rejection rate?

R

Renhor2019-12-17 18:00:36

Vue.js

Renhor, 2019-12-17 18:00:36

At first I used the @nuxtjs/yandex-metrika plugin.
Then I wanted to connect Google Analytics and found the connection code in the Nuxt manual itself.
Code GA:

export default ({ app }) => {
  if (process.env.NODE_ENV !== 'production') return;
 
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-XXXXXX-X', 'auto');
 
  app.router.afterEach((to, from) => {
    ga('set', 'page', to.fullPath);
    ga('send', 'pageview');
  })
}

YM code:

export default ({ app }) => {

  if (process.env.NODE_ENV !== 'production') return;

  (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", "https://mc.yandex.ru/metrika/tag.js", "ym");

  ym('XXXXXX', "init", {
    clickmap:true,
    trackLinks:true,
    accurateTrackBounce:true,
    defer: true
  });

  app.router.afterEach((to, from) => {
    ym('XXXXXX', 'hit', to.fullPath);
  })
}

Connection code:

plugins: [
    { src: '~plugins/ga.js', mode: 'client' },
    { src: '~plugins/ym.js', mode: 'client' },
  ],

Visits are counted, but Yandex cannot find the counter code, as evidenced by the red icon in the section of all counters
. Also, the bounce rate is simply huge - 40%. I have a website of absolutely the same theme (in PHP), so the bounce rate there is quite normal - from 8% to 12% on different days.
Comparing the facts, I thought that the plugin, that this code simply sends statistics at once, and then very often the connection is simply disconnected, or I don’t know how to explain that Yandex does not see the counter code and so many failures.
What happens if you duplicate the counter code in Nuxt layouts?
PS I clicked the counter update button, instead of XXXXX my data is indicated. (you never know)

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexey Yarkov, 2020-10-15
@Renhor

If suddenly anyone is relevant, then I solved the problem like this.
At the root of the project, we create the app.html file. It is he who will take on the main template:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    <style>
      html,
      body {
        font-family: "Montserrat", Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
      }
    </style>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
    {% if (ENV.NODE_ENV === 'production') { %}
      <!-- Yandex.Metrika counter -->
      <script type="text/javascript" >
        (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", "https://mc.yandex.ru/metrika/tag.js", "ym");

        ym(66856768, "init", {
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            webvisor: true
        });
      </script>
      <noscript>
        <div>
          <img src="https://mc.yandex.ru/watch/66856768" style="position:absolute; left:-9999px;" alt="" />
        </div>
      </noscript>
      <!-- /Yandex.Metrika counter -->
    {% } %}
  </body>
</html>

R

RokeAlvo, 2020-11-06
@RokeAlvo

what is wrong with @nuxt-community/gtm-module and @nuxtjs/yandex-metrika ?