Как настроить Yandex Metrika/Google Analytics в Nuxt? Почему огромный процент отказа?

Сначала использовал плагин @nuxtjs/yandex-metrika

Потом захотел подключить Google Analytics и в самом руководстве Nuxt нашел код для подключения.

Код 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:
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);
  })
}

Код подключения:
plugins: [
    { src: '~plugins/ga.js', mode: 'client' },
    { src: '~plugins/ym.js', mode: 'client' },
  ],

Визиты засчитываются, а Яндекс не может найти код счетчика, о чем свидетельствует красная иконка в разделе всех счетчиков

Так же, процент отказов просто огромный - 40%. У меня есть сайт абсолютно такой же тематики (на PHP), так там процент отказа вполне нормальный - от 8% до 12% в разные дни.

Сопоставив факты я подумал, что плагин, что этот код просто одномоментно отправляет статистику и дальше, очень часто происходит просто разрыв соединения или я не знаю, как объяснить то, что Яндекс не видит код счетчика и такое количество отказов.

Что будет, если продублировать код счетчика в лейаутах Nuxt?

P.S. Кнопку обновления счетчика кликал, вместо XXXXX указаны мои данные. (мало ли)
  • Вопрос задан
  • 5514 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
Если вдруг кому актуально, то я решил проблему так.
В корне проекта создаём файл app.html. Именно он будет браться за основной темплейт:
<!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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@RokeAlvo
а чем не устраивают @nuxt-community/gtm-module и @nuxtjs/yandex-metrika ?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы