Invalid HTML, CSS, or JavaScript error in Google Tag Manager with FB Bot

问题

I'm trying to put the following Facebook bot code into Google Tag Manager but am getting the "Invalid HTML, CSS, or JavaScript found in template." error. Any idea why?

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<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://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'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution="setup_tool"
  page_id="1393263590925062">
</div>

回答1:

GTM does not allow non-standard HTML attributes. Hence "attribution" and "page_id" in the HTML element will cause GTM throw error.

You can use Javascript to generate the chat code. Tested and it works.

<script>
  (function() {
    var el = document.createElement('div');
    el.className = 'fb-customerchat';
    el.setAttribute('page_id', '{{Constant - Facebook Page ID}}');
    el.setAttribute('attribution', 'setup_tool');
    document.body.appendChild(el);
  })();
</script>

p/s: You can replace the variable {{Constant - Facebook Page ID}} with the page ID. It is best practice to use user-defined constant variables, read here.

回答2:

I found that adding data- in front of each custom attribute also works (though I don't see it documented anywhere).

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

来源：https://stackoverflow.com/questions/50566247/invalid-html-css-or-javascript-error-in-google-tag-manager-with-fb-bot

标签

google-tag-manager

facebook-chatbot