{"id":107670,"date":"2025-02-24T19:17:46","date_gmt":"2025-02-24T19:17:46","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-embed-facebook-messenger-chat-with-google-tag-manager\/"},"modified":"2025-02-24T19:17:46","modified_gmt":"2025-02-24T19:17:46","slug":"gtmtips-embed-facebook-messenger-chat-with-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=107670","title":{"rendered":"#GTMTips: Embed Facebook Messenger Chat With Google Tag Manager"},"content":{"rendered":"


\n<\/p>\n

\n

A while ago, I published a #GTMTips<\/a> article, where I showed how you can add HTML elements to the page programmatically<\/a> using Google Tag Manager<\/a>. This is relevant because GTM\u2019s validators prevent you from adding custom parameters to HTML elements that are injected directly via the Custom HTML tag. To circumvent this validation, you need to create the element programmatically, before appending it to the document.<\/p>\n

A while ago, Matteo Gamba asked me a question related to the Facebook Customer Chat Plugin<\/a>. This plugin lets you add the Messenger chat of your own Facebook application directly to the website. It\u2019s pretty cool, but the problem is that you are instructed to embed the plugin using custom HTML attributes, and these will not pass validation.<\/p>\n

So here I am, responding to the suggestion to write a dedicated guide for the Facebook chat plugin.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 75: Embed the Facebook Messenger chat plugin using Google Tag Manager<\/h2>\n
\n

<\/p>\n

\"Embed<\/p>\n

<\/a><\/p>\n<\/div>\n

First of all head on over to the official Facebook Custom Chat Plugin instructions<\/a>, and do everything instructed until you reach Step 2<\/strong> of the setup steps<\/a> part of the guide.<\/p>\n

At this point, you are instructed to add a specific <\/p>\n

to the page. So what you\u2019ll need to do is create a new Custom HTML tag<\/strong> in Google Tag Manager, with the following code within:<\/p>\n
\n
script>\n  (function<\/span>() {\n    \/\/ Modify the variable values below\n<\/span>    var<\/span> page_id = '12345678'<\/span>;\n    var<\/span> ref = ''<\/span>;\n    var<\/span> theme_color = '#2B913F'<\/span>;\n    var<\/span> logged_in_greeting = 'Hello, logged in user! Welcome to my chat.'<\/span>;\n    var<\/span> logged_out_greeting = 'Hello, logged out user! Welcome to my chat.'<\/span>;\n    \n    \/\/ Don't touch the code below\n<\/span>    var<\/span> el = document<\/span>.createElement('div'<\/span>);\n    el.className = 'fb-customerchat'<\/span>;\n    el.setAttribute('page_id'<\/span>, page_id);\n    if<\/span> (ref.length) { el.setAttribute('ref'<\/span>, ref); }\n    el.setAttribute('theme_color'<\/span>, theme_color);\n    el.setAttribute('logged_in_greeting'<\/span>, logged_in_greeting);\n    el.setAttribute('logged_out_greeting'<\/span>, logged_out_greeting);\n    document<\/span>.body.appendChild(el);\n  })();\nscript<\/span>><\/code><\/pre>\n<\/div>\n
Change the five variable values in lines 4-8 of the code. If you don\u2019t have a custom webhook accepting requests from postbacks and referrals, you can leave the string empty.<\/p>\n
Create a new DOM Ready<\/strong> trigger for this Custom HTML tag. The trigger should be delimited to only firing on pages where you want to see the chat plugin.<\/p>\n
\n
    <\/p>\n
    \"DOM<\/p>\n
    <\/a><\/p>\n<\/div>\n
And that should do it! The code builds the required <\/p>\n
 element programmatically, using the variables you configured in lines 4-8 to populate the parameters.<\/p>\n
          <\/code><\/p>\n<\/div>\n