How to add Facebook Customer Chat with GTM

Date:

How to add Facebook Customer Chat with GTM | The Plugin allows you to integrate your Messenger experience directly into your website. This allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.

Add Script with Google Tag Manager

In this article we are going to discuss how to add chat plugin to your website using Google Tag Manager. With Tag Manager you can Manage all your website tags without editing code. Google Tag Manager delivers simple, reliable, easily integrated tag management solutions— for free. First you need to implement Google Tag Manager on your website & please read our “How to Implement Google Tag Manager” article for GTM implementation.

How to enable chat service on your Facebook Business page

  • Logon to your Facebook Account
  • Go to your business page
  • Go to your business page settings (scroll down left menu to bottom)
  • Click on Messaging & go to the bottom of the page
  • Found “Add Messenger to your website” and click “Get Started”
  • You can see the “Setup Chat Plugin” window > click “Next”.
  • Change your Language, Greetings Message & Guset Chat status.
  • Proceed to next page to “Select Color” to match your theme, Alignment & Automatically Expand options based on your preference.
  • In the next screen, Add your Domain and Copy your Chat Script.

Sample Chat script

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v9.0'
          });
        };

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

      <!-- Your Chat Plugin code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="2166121212121275"
  theme_color="#fc7300">
      </div>

You cannot directly use this with Google Tag manager and need to change the code make compatible with tag script.

You can use below sample code and replace your Version & page_id.

Sample HTML code for Google Tag Manager.

<script>
// Create the DIV element dynamically to work around GTM
var chatDiv = document.createElement('div');
chatDiv.className = 'fb-customerchat';
chatDiv.setAttribute('page_id', '216621223456761275');
document.body.appendChild(chatDiv);

window.fbAsyncInit = function() {
    FB.init({
        xfbml: true,
        version: 'v9.0'
    });
};

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

Below is the working code to integrate Chat Script with Google tag Manager.

How to integrate with Google Tag Manager?

  • Logon to your Google Tag Manager Account.
  • Select your Account (Ex: secureserverlk.com)
  • Go to Tags and click New Button
Facebook Custom Chat with Google Tag Manager
Add new tag to Google Tag Manager GTM
  • Under Tag Configuration click > “Choose a tag type t begin setup”
  • In the next view under Custom category select “Custom HTML”
  • Paste your Modified chat Script
  • Same page under “Triggering” click on “Choose a trigger to make this tag fire”
  • In the next screen select “All Pages” if you need to enable chat on all the pages of your site.
GTM Firing options
GTM Triggers
  • Click Save and Submit Changes with the description.

Read More on Google Tag Manager Help & Facebook Customer Chat support Page

More articles on Secure Server: Implement Facebook pixel with Google Tag Manager-GTM

How to Enable Chat for Specific Page.

Choose a trigger to make this tag fire section and change your triggers based on your requirement.

Example: If you need to activate chat only on contact page

  • Under trigger configuration page
  • This trigger fires on > Some page view > enter your page URL key
Trigger on specific page
GTM | Some Page Views

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Share post:

Subscribe

Popular

More like this
Related

How to Protect WordPress with Cloudflare

Cloudflare, Inc. is an American content delivery network and...

Facebook Outage

Mike Schroepfer - CTO @ Facebook. *Sincere* apologies to everyone...

Magento 2 One Page Checkout (One Step Checkout)

Magento 2 One Page Checkout - One Page checkout...