Nuxt 3 笔记：流量统计

[cssmagic]

GA

官方初始化脚本

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'G-XXXXXXXXXX')
</script>

模块

@nuxtjs/google-analytics 这个官方推荐模块还没支持 Nuxt 3 和 GA4。

Vue 插件

• 源码： https://github.com/MatteoGabriele/vue-gtag-next
• 文档： https://matteo-gabriele.gitbook.io/vue-gtag/v/next/

已知问题：

• PV 事件发送的 dt（页面标题）字段并不是真正的 <title> 标签，而是页面级模板文件名的变形。这应该是 Nuxt 的约定式路由机制把模板文件名转换为 VueRouter 中的路由名所导致的结果。（滚动事件发送的 dt 字段不存在此问题。）

百度统计

官方初始化脚本

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

Vue 插件

• https://github.com/analyticsjs/vue-baidu-analytics

已知问题：

• 着陆页面会上报 2 次 PV。疑似第一次是由插件发出，第二次是由百度统计脚本自动发出。为禁止后者，需要关闭上报 PV 功能。
• 发送的 tt（页面标题）字段总是着陆页面的标题，在会话过程中不会随着访问页面的变化而变化。