Facebook widgets tracking

Extended Google Analytics measuremet.

What is tracked

Tracked actions are following:

  • edge.create - click a button "Like it", "Recommend" or "Share"
  • edge.remove -remove "Like it", "Recommend" or "Share"
  • comment.create - add a comment
  • comment.remove - remove a comment
  • auth.login - log out Facebook
  • auth.logout - log in Facebook

Visitors who clicked "Like it", "Recommend" or "Share" are marked as "Facebook liker" with variable custom var (slot 5).

How to configure a tracking

It is possible to integrate Facebook into your website in three different formats - XFBML, HTML5 and iFrame. Only XFBML a HTML5 is supported by GA script. Tracking Facebook actions in iFrame box is not possible from technical reasons.

Integration and tracking set up of FB box on your pages requires three steps:

  1. Set up a GA script - this step you can use a Google Analytics configurator,
  2. create a FB application,
  3. copy and paste like box into your website template,
  4. insert and modify a JS code which loads FB library - add a row _gas.init(FB) is needed.

Create a FB application

You need to create new separate Facebook application. Go to the URL https://developers.facebook.com/apps and click button "Create new app".

Create an Facebook App

The important statement is the "Application ID / API key." It's the same number as reported in detail in the URL of the application. In the "App Domain" domain is necessary to fill in your application domain and type a website homepage URL intro "Site URL" input. It is not necessary that the URL exists, but it must be on the hosted on domain posted in the "App Domain". Configuration is shown in the picture.

Configuration of Facebook App

Insert a box code into your website

You can get like box code on Facebook developers web.

Example of code is here:

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Follow the instructions for embedding a FB box in the page which appears when you press the "Get code" button. If you use a XHTML syntax, it is necessary to add a FB namespace to HTML tag. Code looks like this.

<html xmlns:fb="http://ogp.me/ns/fb#">

Insert and modify a FB javascript library code

It is needed to call the _gas.init (FB) method, where FB is an object created by Facebook JavaScript library. Use this syntax when you use an asynchronous Facebook code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    _gas.init(FB);
};
(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/cs_CZ/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Results in Google Analytics

All actions are tracked with method _trackSocial. It is possible to view all tracked values in panels "Standard reporting" -> "Audience" -> "Social" in Google Analytics.

Test it!

You can use a GA debug plugin for Chrome to view sent parameters. You can also recommend this site by clicking the "Recommend" button in the right column.