Enable Social Tracking

  • Written by Tijs Verkoyen on Friday 1 July 2011
  • 4 comments

In Fork 2.4.2 we will introduce automagical Google Analytics Social tracking. Although 2.4.2 is yet to be released (Tuesday July 5), We want to give a quick intro on how to enable this new feature. (If you can't wait to integrate it into your personal site, you can download the code on Github)

Enable it

First you need to integrate the Google Analytics tracking code. This can be done, by copy-pasting the code into the field <head> scripts in the Settings-tab. Btw, you can enable the new PageSpeed-tracking here by adding _gaq.push(['_trackPageLoadTime']); into the tracking code.

The code will look like the one below:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_setDomainName', 'fork-cms.com']);
_gaq.push(['_setAllowHash', 'false']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

When this is done, we need to configure the Facebook-settings. You will need an Facebook-application. The application is required to use FBML-tags.

If you don't have a Facebook-application already, you can create one at: https://developers.facebook.com/apps

Once the application is created, you can enter the data in the correct fields at the bottom of the Settings-tab in the CMS. Also enter at least one profile id. This will load the Facebook JS SDK by default and will enable some other Facebook-related features.

That's all! No, offcourse you will also need to integrate the <fb:like>-tag into the correct template. Once you integrated the like-button, all likes, unlikes and shares will automatically be tracked in Google Analytics.

If you want to integrate Twitters Tweet-button, you just need to follow the instructions on http://twitter.com/about/resources/tweetbutton. The social tracking will be configured automatically.

How does it work

Facebook: When an application is configured, the FBJS-SDK is loaded in a asynchronous way. Once it is loaded it will call the jsFrontend.facebook.afterInit method. In this method we subscribe to the correct events, but only if the GA-tracking-code is available. Each time an event is fired, we us the _gaq.push method to track a new social event.

Twitter: when frontend.js is loaded it will fire jsFrontend.twitter.init, in this method we check if the GA-tracking-code and the twttr-object (loaded by the integration of the Tweet-button) are available, we subscribe to the event. As for Facebook we track the event into Google Analytics.

In Google Analytics you will see the data under the social tab (Visitors - Social)

If you have any questions, feel free to add the in the comments.

Comments

Explania wrote 9 years ago

For a live example of this Fork feature, visit www.explania.com

Dries wrote 9 years ago

Note: For people who might wonder about the Google Plus interaction (via the buttons). Those are tracked by default by GA.

Michaël wrote 9 years ago

@Dries: Does it also tracks when you revoke your +1? Haven't tested it out yet.

@fork-devs: maybe a small detail to note regarding the FB fbml-tags. You have to set the XML namespace in you html root tag, or the buttons won't show up in IE.

Reason for mentioning this, is because I noticed it isn't applied on the blog here ;)

mlitn wrote 9 years ago

@Michael: fixed!