How to add the Facebook Messenger Customer Chat Plugin to your site using Google Tag Manager

Question

I'm trying to install the Facebook Messenger Customer Chat Plugin onto my website using Google Tag Manager so that it can be controlled by non-developers, however after creating a 'Custom HTML' block in GTM, it is rejecting the tag saying that the HTML is invalid.

This code works fine when added manually, but not when used inside GTM:

<!-- FACEBOOK MESSENGER CHAT BOX -->
<div class="fb-customerchat" page_id="xxxxxxxxxx"></div>
<script>
  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

And the error:

Invalid HTML, CSS, or JavaScript found in template.

What's the workaround for this issue?

Answer 1

I discovered that GTM doesn't like something about the HTML (probably the page_id attribute). So, instead, the <div> needs to be created dynamically using JavaScript. This is the final code we used:

<!-- FACEBOOK MESSENGER CHAT BOX -->
<script>
  // We create the DIV dynamically to work correctly with Tag Manager
  var chatDiv = document.createElement('div');
  chatDiv.className = 'fb-customerchat';
  chatDiv.setAttribute('page_id', 'xxxxxxxxxxxxxxx'); // Facebook Page ID goes here
  document.body.appendChild(chatDiv);

  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>