在Google Tag Manager中添加Facebook Bot代码时触发无效代码错误求因

我帮你分析下这个问题的原因，以及对应的解决办法：

为什么会出现这个错误？ #

Google Tag Manager的自定义HTML模板有一套安全检查规则，你的原代码触发错误主要有两个点：

• 静态HTML元素（比如<div id="fb-root">和<div class="fb-customerchat">）和脚本混合的写法，容易被GTM的代码检查机制误判为不符合规范的内容；
• 自执行的匿名函数写法，也可能被GTM识别为潜在的风险代码，从而抛出无效提示。

两种可行的解决方法 #

方法一：拆分代码为两个独立标签（推荐） #

把SDK加载和客服聊天容器的创建分开，既能避免GTM的检查问题，还能保证加载顺序正确：

1. 创建「加载Facebook SDK」标签
   新建一个自定义HTML标签，只放SDK加载的脚本：

   (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://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
   

   触发条件设置为All Pages（或者你需要显示客服聊天的特定页面）。

2. 创建「添加客服聊天容器」标签
   再新建一个自定义HTML标签，只放客服聊天的容器代码：

   <div class="fb-customerchat" attribution="setup_tool" page_id="1393263590925062"></div>
   

   触发条件设置为DOM Ready，确保SDK已经加载完成后再渲染聊天组件。

方法二：用动态创建元素的方式改写代码 #

把所有静态HTML元素改成用JavaScript动态创建，这样完全符合GTM对JS代码的要求，不会被误判：

// 动态创建fb-root容器
var fbRoot = document.createElement('div');
fbRoot.id = 'fb-root';
document.body.appendChild(fbRoot);

// 加载Facebook SDK
(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://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// 动态创建客服聊天容器
var chatDiv = document.createElement('div');
chatDiv.className = 'fb-customerchat';
chatDiv.setAttribute('attribution', 'setup_tool');
chatDiv.setAttribute('page_id', '1393263590925062');
document.body.appendChild(chatDiv);

把这段代码放到一个自定义HTML标签里，触发条件设为DOM Ready或者All Pages即可。

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