Social button tracking

Examples for major social tracking options:

Facebook buttons

To enable tracking of Facebook actions on your site, please ensure that you have the following code on your page to activate the Facebook JavaScript SDK (as demonstrated here):

<div id="fb-root"/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR_APP_ID', // App ID can be retrieved from the Developer App (see FB reference)
      channelUrl : 'WWW.YOUR_DOMAIN.COM/channel.html',
      // Channel File review the FB reference
      status: true,
      // check login status
      cookie: true,
      // enable cookies to allow the server to access the session
      xfbml: true
      // parse XFBML
    });

  // Additional initialization code here
  };

 // Load the SDK Asynchronously
 (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
  }(document));
</script>

Facebook likes

To record Likes with Google Analytics, subscribe to Facebook's edge.create event and create a callback function to execute the Google Analytics tracking code. The following code should be placed in <head> block before the SDK loads.

Deploy via the Tag Manager data layer

FB.Event.subscribe('edge.create', function(targetUrl) {
  // GTM Method
  dataLayer.push({
    'event': 'social',
    'socialNetwork': 'facebook',
    'socialAction': 'like',
    'socialTarget': targetUrl
  });

});

Deploy via on-page code

FB.Event.subscribe('edge.create', function(targetUrl) {
  // Universal Analytics Method
  ga('send', 'social', 'facebook', 'like', targetUrl);

});

Facebook unlike

To record Unlikes with Google Analytics, subscribe to Facebook's edge.remove event and create a callback function to execute the Google Analytics tracking code. The following code should be placed in <head> block before the SDK loads.

 

Deploy via the Tag Manager data layer

FB.Event.subscribe('edge.remove', function(targetUrl) {

  // GTM Method
  dataLayer.push({
    'event': 'social',
    'socialNetwork': 'facebook',
    'socialAction': 'unlike',
    'socialTarget': targetUrl
  });

});

Deploy via on-page code

FB.Event.subscribe('edge.remove', function(targetUrl) {

  // Universal Analytics Method
  ga('send', 'social', 'facebook', 'unlike', targetUrl); 

});

Facebook share

To record Unlikes with Google Analytics, subscribe to Facebook's edge.remove event and create a callback function to execute the Google Analytics tracking code. The following code should be placed in <head> block before the SDK loads.

Deploy via the Tag Manager data layer

FB.Event.subscribe('message.send', function(targetUrl) {

  // GTM Method
  dataLayer.push({
    'event': 'social',
    'socialNetwork': 'facebook',
    'socialAction': 'send',
    'socialTarget': targetUrl
  });

});

Deploy via on-page code

FB.Event.subscribe('message.send', function(targetUrl) {

  // Universal Analytics Method
  ga('send', 'social', 'facebook', 'send', targetUrl); 

});

Twitter count

To track Twitter counts, you need to bind a callback function to the tweet event. Place the following code in the <head> block after the platform.twitter.com/widgets.js loads.

Deploy via the Tag Manager data layer

twttr.events.bind('tweet', function(event) {

  if (event) {
    var targetUrl;
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = extractParamFromUri(event.target.src, 'url');
    }
    // GTM Method
    dataLayer.push({
      'event': 'social',
      'socialNetwork': 'twitter',
      'socialAction': 'tweet',
      'socialTarget': targetUrl
    });

  }
}); 
    
function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var uri = uri.split('#')[0];  // Remove anchor.
  var parts = uri.split('?');  // Check for query params.
  if (parts.length == 1) {
    return;
  }
  var query = decodeURI(parts[1]);

  // Find url param.
  paramName += '=';
  var params = query.split('&');
  for (var i = 0, param; param = params[i]; ++i) {
>    if (param.indexOf(paramName) === 0) {
      return unescape(param.split('=')[1]<);
}

Deploy via on-page code

twttr.events.bind('tweet', function(event) {

  if (event) {
    var targetUrl;
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = extractParamFromUri(event.target.src, 'url');
    }
    // Universal Analytics Method
    ga('send', 'social', 'twitter', 'tweet', targetUrl);

  }
}); 
    
function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var uri = uri.split('#')[0];  // Remove anchor.
  var parts = uri.split('?');  // Check for query params.
  if (parts.length == 1) {
    return;
  }
  var query = decodeURI(parts[1]);

  // Find url param.
  paramName += '=';
  var params = query.split('&');
  for (var i = 0, param; param = params[i]; ++i) {
>    if (param.indexOf(paramName) === 0) {
      return unescape(param.split('=')[1]<);
}

LinkedIn share

In order to track share actions on LinkedIn buttons, it is necessary to add a callback function to your LinkedIn snippet via the data-onSuccess parameter, and then issue the tracking comand to the LinkedInShare function.

If you want to pass the name of the item shared, you can add the information to the data-url parameter.

Deploy via the Tag Manager data layer


<li class = "linkedin">
<script src = "http://platform.linkedin.com/in.js" type = "text/javascript"></script>
<script type = "IN/Share" data-url = "{item shared}" data-onSuccess = "LinkedInShare"></script>

<script>
function LinkedInShare(e) {
    var _link = e || document.location;

    // GTM Method
    dataLayer.push({
      'event': 'social',
      'socialNetwork': 'linkedin',
      'socialAction': 'share',
      'socialTarget': _link
    });
}
</script>
</li>

Deploy via on-page code


<li class = "linkedin">
<script src = "http://platform.linkedin.com/in.js" type = "text/javascript"></script>
<script type = "IN/Share" data-url = "{item shared}" data-onSuccess = "LinkedInShare"></script>

<script>
function LinkedInShare(e) {
    var _link = e || document.location;

    // Universal Analytics Method
    ga('send', 'social', 'linkedin', 'share', _link);

}
</script>
</li>

Email

The following code can be applied to track Email share actions.

Deploy via the Tag Manager data layer

// GTM Method
dataLayer.push({
  'event': 'social',
  'socialNetwork': 'email',
  'socialAction': 'share',
  'socialTarget': '{Item Shared}'
});

Deploy via on-page code

// Universal Analytics Method
ga('send', 'social', 'email', 'share', '{Item Shared}');

Was this helpful?
How can we improve it?