Google Tag Manager配合NuxtJs使用出现脚本重复加载问题如何解决？

• 性能下降：重复脚本会发起多余的网络请求，占用额外内存空间，路由跳转次数越多，页面响应速度越慢，极端情况下会触发浏览器页面崩溃
• 数据错误：Hotjar等分析工具会被重复初始化，导致会话数、页面访问量、行为事件等指标被重复计数，统计结果完全失真
• 功能异常：多次初始化会造成全局变量污染、事件监听重复绑定，同一用户操作会被多次上报，部分工具的全局方法被覆盖后还会触发前端报错，导致跟踪功能完全失效

方案1：调整GTM内脚本逻辑（推荐） #

1. 给Hotjar自定义HTML脚本增加存在性校验，仅在全局变量未初始化时才加载脚本，示例代码如下：

// 头部新增判断逻辑
if (!window.hj) {
  // 原有Hotjar官方初始化代码放在此处即可
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:替换为你的HotjarID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
}

2. 拆分触发逻辑：不要将Hotjar全量初始化脚本绑定到nuxtRoute触发器，仅绑定首次页面加载触发器；如果需要上报单页应用的路由变更数据，单独新建一个自定义HTML标签，写入路由更新代码，绑定到nuxtRoute触发器即可，无需重复加载脚本：

// 路由变更时仅调用Hotjar提供的状态更新方法
if (window.hj) {
  hj('stateChange', window.location.pathname + window.location.search)
}

方案2：Nuxt侧直接配置 #

如果不需要通过GTM管理Hotjar，可直接在Nuxt项目中新增客户端插件，仅在首次加载时初始化Hotjar，路由变更时调用状态更新方法即可，无需通过GTM动态插入脚本。

内容的提问来源于stack exchange，提问作者Rasmus