Tracking user engagement on Facebook fan pages

In our previous blog post we showed how to setup Google Analytics for Facebook fan pages. The article was very well received and highlighted the importance of improved analytics. Please review the older article for detailed instructions on how to setup Google Analytics. Here are a few interesting concepts which will help you build better Facebook fan pages and also take your Analytics information one step further:

Fans versus Non Fan activity

An interesting way to look at your Facebook fan page activity is to split them with activity by your Fans and non fans. To do this, we need to use segments in Google Analytics to split activity into Fan and Non-Fan activity. You can create a segment based on pages visited by your user or specific event.

Using segments to track Fan/Non Fan activity

We will need to use FBJS (Facebook Javascript) and the tag <fb:visible-to-connection>. The tag will allow us to display a section to Fans and another to Non-Fans. We have managed to use this to create a single action button but calling different FBJS functions depending on whether the user is a fan of the page or not. Once a Javascript function is activated, the appropriate tracking image has to be shown to log the visit correctly on Google Analytics. Displaying this tracking image causes a hit to be registered on Google Analytics and this can be used to segment traffic. Visit our tracking page to get the code and see this in action.

Tracking activity on forms and on your pages

This is a good method to track user engagement with the Facebook page. Several users might visit your Facebook page but only a few might actually engage with the form. When your custom Facebook fan page loads, Facebook does not activate the Javascript you have written. This is only activated when a user performs an activity. Something like clicking on a button, clicking of your form, playing a video, entering some details onto the form, clicking on a button of your carousel, etc. This is a good opportunity to track activity on your page. All you have to do is use a script tag like the one used in the Advanced tracking page.

Goal and Funnel Visualisation

This can be a quite powerful tool, you can track for example how many users visit your contact page, how many then proceed to engage with the page and how many eventually click on the contact button. Here is an example of a funnel visualisation.

A simple two step funnel visualisation

The above two step funnel visualisation shows you how many users visited our contact page and how many proceeded to submit the form. This could have also been made into a three step funnel displaying how many visited the contact page, how many clicked around and how many actually clicked the contact button.

Tracking Purchases or clicks on your fan page

To track clicks which can be purchases, clicks on links, etc. We generate a tracking code for each action that we want to track using our trusted Google Analytics code generator. We then load this image location on click of a button, or link, etc using the usual onclick event handler.

In conclusion

These techniques require some knowledge of Javascript and a reasonable understanding of how the image technique lets you work around Facebook’s Javascript restriction. You can get the complete source code to how we segregate fan and non fan visits, etc here. We are a web development company and will be happy to help you out with your unique tracking needs on your Facebook page. Please share your thoughts, comments and ideas on how to track user behaviour in more depth.

Tags: Facebook, Facebook Pages, Google Analytics

Google Analytics for Facebook Fan Pages

We launched our Facebook fan page earlier this month and as with all Facebook pages only Facebook Insights program is available to page administrators. Facebook Insights shows demographic details and interactions on your pages BUT limited to show information of fans only. It is far less sophisticated and comprehensive when compared to the free Google Analytics. One of the limitations of Facebook Fan pages is that you can only run limited Javascript on it and Google Analytics needs Javascript code included to correctly track visitors. We have successfully managed to get ALL functions of Google Analytics working on our Facebook fan page (including visitor statistics, traffic sources, visitor country, keyword searches with all other powerful reporting & maps overlays etc).

Google Analytics Example

How to setup Google Analytics on your Facebook fan pages

The workaround we use in our code is to include Google Analytics as an image instead of setting the standard Javascript. This method tracks every visitor to the custom facebook pages on Google Analytics. It required a combination of server side cookie management and an additional <img> tag to the bottom of the facebook fan page. Here are the steps to get Google Analytics working on your facebook fan page.

1) Setup Google Analytics account. If you already have one, create a new website profile. You can name it facebook.com or facebook.com/your_page_name. You will finally get your tracking code which looks like this UA-3123123-2
2) Create your custom img tag for each of your pages you like to track. EG: contact form, services, products etc. You can use our tool to create the Google Analytics link generator for Facebook pages.
3) Add the entire custom image html tag from step 2 to the bottom of each Facebook fan page that you need to track.

That is all there is to it! Google Analytics is not real-time, so you will need to give it some time. Approximately a day before you see the fruits of your “hard” work.

For advanced users

Use this method, if you don’t want to use our hosted link redirection as mentioned in the method above. You can download the entire source code which is just about three files to get this setup working on your own server (running PHP4.3 or above). The code is written in PHP and essentially creates the Google image tracking URL with the referrer, page information, ID, etc. The additional advantage of hosting this on your own server and domain is that visits from your website to your facebook fan page gets tracked, etc. You will also be able to customise further if you wish. Please do share any useful updates you apply to the tracking link code.

Facebook – Google Analytics Tracker v1.1 (Updated 21st Feb, 2010).  For advanced method – Download this code to use on your server.

If you don’t have a Facebook fan page yet, visit our tutorial for code and help on creating customised Facebook fan pages.

PS: We could not find any other source / blog that described how to get Google Analytics on Facebook fan pages! There is support for canvas pages and applications but nothing for StaticFBML fan pages. Hope this helps and please leave your comments below.

UPDATE:
1) A lot of users have asked how to track visits to the wall. Yes, this can be done. Please see the comments by iphp below.
2) Here is a screenshot to a staticFBML where the code should be placed
3) We have managed to set up funnels, goals and segments to separate fan and non fan activity.
4) This blog and comments cover all aspects of setting up Google Analytics. If you still want help, we are available to offer paid support and installation of Analytics for your page. Please contact us here.

Tags: Facebook, Facebook Pages, google

Creating a custom facebook fan page

A Facebook Page is a public Profile that enables information about business and products to be shared with Facebook users and the public. An user should be able to create one in a few minutes. This article explains how to add custom tabs to your Facebook page to make it do more. Here we explain how we built a carousel, navigation tabs, forms, etc on the Webdigi Facebook fan page.

Nutella Facebook fan page

What do you need to create custom Facebook fan pages?

The only thing you need is Static FBML created by Facebook, this is an application that you have to add to your page. You can add advanced functionality to your fan page using the Facebook Static FBML application. This application will add a tab to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customisation. You will be able to add more than one tab using this application. On our Facebook fan page, we have three pages created using this application: services, portfolio and contact.

What are the restrictions on Facebook ?

1) Facebook does not allow Javascript to run on load, an user action like a mouse click must be performed before Javascript can be run. You will notice this on the services tab of our Facebook fan page. The carousel mouse over works only after you click on one of the arrows.

2) You will need to use FBJS (Facebook Javascript). This provides the functionality we need to develop custom facebook pages. This is also to protect other users privacy at the same time and restrict Javascript features that can be abused.

3) Use <link href=”http://example.com/style.css” rel=”stylesheet” type=”text/css” /> if you want to use CSS on your Facebook fan page. This is to get the page to work correctly on Internet Explorer. The other browsers support the <style type=”text/css”> tag.

4) AJAX requests have a short timeout and these requests are proxied via Facebook. There are also limits on length of JSON replies, etc.

Creating tabs on the Facebook fan page using FBML and FBJS

FBJS is Facebook’s solution for developers who want to use JavaScript in their Facebook applications. FBJS DOM objects implement most of the same methods regular JavaScript objects implement including: appendChild, insertBefore, removeChild, and cloneNode. Properties like parentNode, nextSibling, src, href (and many many others) have been redefined as a couplet of getters and setters (getStyle : setStyle, getValue : setValue, getClassName : setClassName). Here is an example of a tab on a Facebook page.

Creating a carousel on the fan page

FBJS exposes a powerful animation library which gives developers an easy way to improve their user interface with a line of code or two. All animations are CSS based, so a working knowledge of CSS will really help you out here. One of Facebook’s security restrictions are that Javascript will not be allowed onload of the page. The user must perform an action like clicking on a button, etc to begin Javascript code execcution. This would mean that automated carousels; a carousel that starts rolling images by itself cannot be built into a Facebook fan page. This restriction also applies to pages with video, etc.

Submitting a web form using AJAX

Creating a form for a fan page can be done using HTML. The AJAX support from facebook is interesting. All AJAX requests to the server you have under your control goes through facebook. If you have a tool monitoring the AJAX request, you will see that the form is actually being sent through to fbjs_ajax_proxy.php which in turn POST or GET the request to your server. The AJAX request can be sent using FBML in 3 steps:

var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.post('http://example.com/ajax.php');

Creating Dialog boxes on Facebook

FBJS offers a variety of Dialog boxes: Confirmation boxes, Yes/No type, Dialog boxes with forms, Choice, etc. To create the above dialog, we just need the following one line of code

new Dialog().showMessage('Confirmation', 'The contact form has been submitted.');

Show me the code

Here are all the three code files that are in use for each of the three tabs on Facebook.

Contact Us tab (Containing form, AJAX submit and Dialog boxes) code

Portfolio tab (Carousel using FBJS Animation features) code

Tags: Facebook, Facebook Pages, FBJS