Google Tag Manager facebook share

Question

I want Facebook share pop up should be served from Google Tag Manager. What I have done already:

IN GOOGLE TAG MANAGER:

1.I created a custom HTML Tag called 'Facebook SDK' containing this:

<script type="text/javascript" language="JavaScript">
window.fbAsyncInit = function() {
FB.init({
  appId      : '<app-id>',
  xfbml      : true,
  version    : 'v2.3'
});


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

2.I sat trigger for this tag at pageview.

4.I created few Data Layer Variable those I will be needed later:

**Name**                       **Data Layer Variable Name**                    
Thread Link                    threadLink
Thread Title                   threadTitle
Company Icon                   companyIcon
Facebook Share Caption         facebookShareCaption

3.I created another custom HTML tag called 'Facebook Share':

       <script>

          FB.ui({
             method: 'feed',
            link: {{Thread Link}},
            picture: {{Company Icon}},
            name: {{Thread Title}},
            caption: {{Facebook Share Caption}}
          });

        </script>

4.In advance settings of this tag, in Tag Sequencing option, I chose this:

Fire a tag before Facebook Share fires
Setup Tag: Facebook SDK
and I chose 'Don't fire Facebook Share if Facebook SDK fails'.

5.I created a custom trigger named as 'Facebook Share Button' having an event name as 'fb_share_button_clicked'. 6.I set 'Facebook Share Button' trigger for this tag.

IN SOURCE CODE

1.To set up data layer, I added the following snippet of code to the head of page above the GTM container snippet:

<script>
dataLayer = [{
'threadLink': 'LINKTO/ABCDEF',
'threadTitle': 'high-ABCDEFA BCDEF ABCDEFABCD EFABCDEFABCDEFABCDEF',
'companyIcon': 'PATHTO/icon',
'facebookShareCaption': 'Lorem ipsum dolor sit amet, consectetur adipiscing'
}];

2.I push custom event 'fb_share_button_clicked' variable when an user clicks on facebook icon on site

dataLayer.push({
   'event': 'fb_share_button_clicked'  
];

My problems are:

I get 'undefined' when I run FB in javascript console.
When I click Facebook icon, No facebook share popup appears,
Custom Tag 'Facebook SDK' is fired on pageview but custom tag 'facebook share' doesn't when I click Facebook icon(saw in preview mode).
I see Custom HTML tag 'Facebook Share' under 'Tags Not Fired On This Page:' in preview and debug mode but event '' is fired
I see wired values in non fired custom HTML tag 'Facebook Share' like:

name:google_tag_manager['xxxxx'].macro(\'111111111111')

I will highly appreciate if someone can guide me.

aflaisler aflaisler · Accepted Answer · 2016-12-16T12:31:25

your last piece of code is not correct:

dataLayer.push({
   'event': 'fb_share_button_clicked'  
];

Should be:

dataLayer.push({
   'event': 'fb_share_button_clicked'  
});

In parallel to that, what kind of error are you seeing in the console ?

Google Tag Manager facebook share

1 Answers