: How to add the Facebook Messenger Customer Chat Plugin to your site using Google Tag Manager I'm trying to install the Facebook Messenger Customer Chat Plugin onto my website using Google Tag

Posted in: #Facebook #GoogleTagManager #Gtm

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:


<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?

10.01% popularity Vote Up Vote Down

: Changing the Name Servers is better. While it isn't common, the IP address for a server can change, if they do and you've set an A record, your site will go down if you don't update.

@Holmes151

0 Comments

: Google Analytics not working - Non-standard implementation in Google Tag Assistant I've pasted the following code immediately after the tag on my layout pages (using ASP.NET MCV Razor layouts,

@Holmes151

Posted in: #GoogleAnalytics

2 Comments

: The profitability of AdSense on a new website Please note: I've read lots of previous answers like this that seem to argue AdSense is never worth it and that other ad networks should be relied

@Holmes151

Posted in: #Advertising #GoogleAdsense #Monetize #WebDevelopment #WebHosting

0 Comments

: How do I embed Google Analytics in a dashboard? There seem to be 3 methods as listed below. The third is superior for what i'm after. How does it work? Where is this process documented?

@Holmes151

Posted in: #GoogleAnalytics

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Shelley277

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:


<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>

10% popularity Vote Up Vote Down

Feed

: How to add the Facebook Messenger Customer Chat Plugin to your site using Google Tag Manager I'm trying to install the Facebook Messenger Customer Chat Plugin onto my website using Google Tag

More posts by @Holmes151

: Changing the Name Servers is better. While it isn't common, the IP address for a server can change, if they do and you've set an A record, your site will go down if you don't update.

: Google Analytics not working - Non-standard implementation in Google Tag Assistant I've pasted the following code immediately after the tag on my layout pages (using ASP.NET MCV Razor layouts,

: The profitability of AdSense on a new website Please note: I've read lots of previous answers like this that seem to argue AdSense is never worth it and that other ad networks should be relied

: How do I embed Google Analytics in a dashboard? There seem to be 3 methods as listed below. The third is superior for what i'm after. How does it work? Where is this process documented?

Login to post a comment!

1 Comments

Back to top | Use Dark Theme