如何将Naver Analytics添加到Nuxt.js SPA应用程序?

如何使用SSR在nuxt.js(Vue.js)中向网站添加跟踪代码?

Naver Analytics跟踪代码示例:

<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "123456789abcd";
wcs_do();
</script>

我试过了:nuxt.config.js

script: [{ src: '//wcs.naver.net/wcslog.js' }]
...
{src: '~plugins/naver-analytics.js', ssr: false}

plugins / naver-analytics.js

export default ({ app }) => {
  if(!wcs_add) var wcs_add = {};
  wcs_add["wa"] = "123456789";
  wcs_do();
  wcs.event('create', '123456789', 'auto')
  app.router.afterEach((to, from) => {
    wcs.event('set', 'page', to.fullPath)
    wcs.event('send', 'pageview')
  })
}

但是,当然没有任何效果。

伽罗2020/03/23 22:12:22

通常将这些脚本添加到所有页面的公共位置(在根目录)。

  • If you are using the default template by nuxt, there should be a file app.template.html (inside .nuxt/views/). Inside that you can update the above text just before </body> tag.
  • If you have overriden it and created your own, it should be by the name of app.html (at the same level as nuxt.config.js)

The structure of that file is something below. You can add the tags in between {{ APP }} and </body> tag

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Hope it helps. Revert for any doubts.