Add new tag: Facebook messenger

[tsteur]

see eg https://www.simoahava.com/analytics/add-facebook-messenger-chat-google-tag-manager/

[Findus23]

I'm still not sure what's the best way to build tags for facebook features.

It seems like they all depend on the full facebook SDK and then are only activated and configured by adding <div>s with attributes (https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin?locale=en_US#include).

The docs don't really mention if the order matters or if FB detects all DOM changes on the page and will init the feature on changes.

Other docs mention, that all initialization needs to happen in the window.fbAsyncInit function which again seems to be different from #20.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });
  };

  (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 honestly I don't want to spend a lot of time digging through confusing docs and blog posts just to make it easier for Facebook to track users between websites.

[tsteur]

I see. Was hoping it would be as easy as that snippet from the blog post but it definitely can't work with just a div element or so :)

[Findus23]

The linked blog doesn't even mention the SDK and the JS

var el = document.createElement('div');
el.className = 'fb-customerchat';
el.setAttribute('page_id', page_id);
if (ref.length) { el.setAttribute('ref', ref); }
el.setAttribute('theme_color', theme_color);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);

really only seems to add a div.