OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

How to track social interactions with Google Analytics

Google Analytics has great integration for Social Tracking where Google Plus tracking is already integrated. If you have a Google Plus +1 or Share Button and Google Analytics included on your site the +1’s and shares are already tracked in Google Analytics.

How to include the social buttons

The social buttons can be generated on these sites:

You can then copy the generated code to your html page.

For the social interactions it is important to subscribe to Facebook and Twitter specific events. Because of this, we need to modify the JavaScript copied from the pages above a little bit.

For Twitter we need to replace the default JavaScript inside the <script></script> with the following code:

window.twttr = (function (d, s, id) {
  var js
  fjs = d.getElementsByTagName(s)[0],
  t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function (f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

With this code we expose the twttr object to be able to subscribe to events fired by twitter. Also we are adding a ready function to the twitter object, we need this to register functions which should get called after twitter is initialized.

For Facebook we also need to replace some of the default JavaScript inside the <script></script>. Here we only need to change the source to the Facebook JavaScript. Replace the line js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.3"; with the following js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&version=v2.3";. Now the Facebook FB object is accessible.

How to include Google Analytics

There are two different versions of the Google Analytics JavaScript libraries you can include on your website. Universal Analytics Web Tracking (analytics.js) or Classic Analytics Web Tracking (ga.js). The difference is that with the Universal Analytics developers have more flexibility to customize their implementations. For the tracking of social interactions you can use either web tracking script. I am going to explain the implementation for both.

There is a great explanation from Google on how to add Web Tracking to your Website. For Universal Analytics or for Classic Analytics.

How to track social interactions

After you have included both the Social Buttons and Google Analytics on your page, it's time to write some JavaScript code to track the social interactions.

First you add an IIFE (immediately-invoked function expression) to your JavaScript to create a lexical scope and protect against polluting the global environment. Make sure to add the 'use strict' on top of the IIFE to program in strict mode.

(function() {
  'use strict';
}());

Inside the IIFE we create a new object called socialAnalytics with the following methods:

var socialAnalytics = {
  trackSocial = function(network, action, target) {},
  trackFacebook = function() {},
  trackTwitter = function() {}
}

trackSocial Method

In this method, the 'trackSocial' event is pushed to Google Analytics. The parameter network describes if this event is fired from Twitter or Facebook. The parameter action describes the type of the event, like, send, tweet or follow. The last parameter target describes the target URL.

First you have to check whether Classic or Universal Analytics is defined. Also I recommend to secure check if the classic or universal JavaScript Object is instantiated right and all the methods we need are defined. This way we can avoid many errors. We need to send the social interaction to Google Analytics in two different ways, depending on the chosen Web Tracking library. We can accomplish this with the following if else command:

// If Classic Analytics

if  (typeof _gaq !== 'undefined' && _gaq && _gaq.push) {
   _gaq.push(['_trackSocial', network, action, opt_target]);
}

elseif(typeof ga !== 'undefined' && ga) {
  ga('send', 'social', network, action, opt_target);
}

trackFacebook Method

In this method, the goal is to subscribe to the Facebook events like and send (share). This method will be called asynchronously after Facebook has loaded. We will get to this later. First we have to check if the FB (Facebook) Object and all the methods we use are accessible:

if (typeof FB !== 'undefined' && FB && FB.Event && FB.Event.subscribe) {}

In this if-command, we can now subscribe to the Facebook events and call the trackSocial method with following code:

// Subscribe Likes

FB.Event.subscribe('edge.create', function (target) {
  socialAnalytics.trackSocial('facebook', 'like', target);
});

// Subscribe Shares

FB.Event.subscribe('message.send', function (target) {
  socialAnalytics.trackSocial('facebook', 'send', target);
});

trackTwitter Method

This method is going to subscribe to the Twitter tweet and follow events. Also here we have to check if the twttr (Twitter) object is accessible and has all the methods defined we need.

if (typeof twttr !== 'undefined' && twttr && twttr.events && twttr.events.bind) {}

In this if-command you can now subscribe to the Events with following code:

var handler = function(event) {};
twttr.events.bind('tweet', handler);
twttr.events.bind('follow', handler);

Finally we have to handle the events in the handler function.

 var handler = function (event) {
 var target;
 
 // only execute if eventtype is tweet or follow

if (event && event.type == 'tweet' || event.type == 'follow') {
  if (event.target.nodeName == 'IFRAME') {
    target = extractParamFromUri(intent_event.target.src, 'url');
  }
  var action = event.type;
  socialAnalytics.trackSocial('twitter', action, target);
}

In this function the target needs to be extracted from event.target.src because it is not in a format Google Analytics can use. The function extractParamFromUrl looks like this:

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params !=null) {
    return unescape(params[1]);
  }
  return;
};

Now we have finished the socialAnalytics object. The only thing left to do is call the trackFacebook and the trackTwitter method when the twttr and FB objects are ready.

Facebook automatically calls the window.fbAsyncInit function after the FB object has loaded. So we easily can call the socialAnalytics.trackFacebook method in this function.

window.fbAsyncInit = function () {
 socialAnalytics.trackFacebook();
};

For Twitter we created the ready function earlier. We can use it now to call the socialAnalytics.trackTwitter method:

twttr.ready( function () {
  socialAnalytics.trackTwitter();
});

Now we have finished our code for the social interactions and can see the result in Google Analytics.

Social interactions in Google Analytics

You can find the social interactions in Google Analytics under Acquisition -> Social -> Plugins.

Socialinteractions


kommentieren


0 Kommentar(e):