如何在Google Tag Manager自定义JS中正确引入cdnjs外部库？

嘿，我完全懂你刚上手GTM和GA时的迷茫——折腾外部JS库却遇到“对象未定义”的报错，调了触发顺序还没解决，确实挺闹心的。我来分享几个亲测有效的解决办法，帮你搞定这个问题：

1. 用回调事件确保脚本加载完成再执行自定义JS #

GTM的触发顺序设置有时候会因为异步加载的特性失效，最稳妥的方式是给脚本加载加个回调，等库真正加载完成后再触发你的自定义JS代码：

• 创建一个自定义HTML标签，把下面的代码放进去：

<script>
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js';
  // 脚本加载完成后，向dataLayer推送自定义事件
  js.onload = function() {
    window.dataLayer.push({
      'event': 'fingerprintJSReady'
    });
  };
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'fingerprintjs2-script'));
</script>

• 给这个HTML标签设置触发条件（比如“所有页面”或者你需要的特定页面）。
• 把你的自定义JS标签的触发条件改成这个自定义事件 fingerprintJSReady，这样就能保证自定义JS在库加载完成后才执行。

2. 明确引用全局作用域的库对象 #

GTM的自定义JS标签是在沙箱环境中运行的，有时候直接调用Fingerprint2可能拿不到全局对象，你可以尝试在调用时加上window前缀：

// 不要直接写 Fingerprint2，改用 window.Fingerprint2
if (window.Fingerprint2) {
  new window.Fingerprint2().get(function(result){
    console.log(result);
    // 这里写你的业务逻辑
  });
}

3. 用自定义模板加载库（更规范的方式） #

如果想长期复用这个库，推荐用GTM的自定义模板：

• 新建一个自定义模板，在“资源”选项卡中添加FingerprintJS2的CDN URL。
• 在“代码”选项卡中，添加允许访问window.Fingerprint2的权限（在“全局变量访问”里配置）。
• 保存模板后，在容器中使用这个模板，后续的自定义JS标签就能直接调用库对象了。

4. 排查脚本是否真的加载成功 #

有时候开发者工具里能看到脚本标签，但实际可能加载失败了：

• 打开浏览器开发者工具的「网络」面板，过滤JS文件，找到fingerprint2的请求，确认它的状态码是200（成功加载）。
• 如果加载失败，检查URL是否正确，或者是否有网络/防火墙限制导致无法访问CDN资源。

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