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

Question

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>

The "why" is that Google does not consider "attribution" and "page_id" to be valid attributes for a div element. Since the implied question is "how do I make this work" this is not a sufficient answer, though (I assume simply removing the attributes will break the Facebook script) — Eike Pierstorff
– Eike Pierstorff, Commented May 28, 2018 at 15:36

Bing Han · Accepted Answer · 2018-06-08 11:03:58Z

7

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.

edited Jun 8, 2018 at 11:03

answered Jun 8, 2018 at 10:58

Bing Han

6846 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ofir Beigel Over a year ago

Thanks! Works like a charm

Robert Sinclair Over a year ago

great thank you! Not sure who's fault this is more FB or Google tag manager, but I'm thinking Google because the tag says "custom JS/HTML" and it being valid or not is kinda non of their business

Nate · Accepted Answer · 2019-10-28 23:43:49Z

0

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>

answered Oct 28, 2019 at 23:43

Nate

2,7602 gold badges18 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related