Tutorial: Add Google Analytics Social Interaction Tracking to your Facebook Tabs

14 Jul

resource: http://www.hyperarts.com/blog/add-google-analytics-social-interaction-tracking-to-facebook-iframe-tabs/

The New Google Analytics Social Interactions Tracking

On June 29, Google announced its new Analytics feature: tracking the +1 button (Google’s version of the Facebook Like button), as well as other social buttons such as Twitter tweets and Facebook Likes, Unlikes and Send.

This expanded Analytics feature focused on tracking these social buttons on external websites, and no mention was made about tracking on Facebook fan page tabs.

Google Analytics Social Tracking and Facebook Fan Page Tabs

The good news is that most of this tracking capability does work on fan pages.

On your Facebook fan page iFrame tabs, you can track:

  • Facebook Like, Unlike and Send actions;
  • Google +1.

As of this writing, you CAN’T track:

  • Twitter’s Tweet Button;
  • LinkedIn Share Button.

If you find a way to track any other social buttons, please let me know in the comments!

Here we go….

Set up a New Google Analytics Profile for your Fan Page

The first step is to add a profile to your Google Analytics account for your Facebook fan page. This will track visitor traffic to your fan page, but to have your social buttons on your iFrame tabs tracked, you need to view your analytics using the Google Analytics Beta interface which provides the required “asynchronous” tracking code by default.

You access the new GA interface by clicking “New Version” in the top right of your screen:

Google Analytics - New Version

Add a New Profile

I found this a bit tricky with the New Version, with no obvious way from the “Account Home” to add a new profile. My workaround was to click on an existing profile and then click on the “gear/cog” icon in the far right of the orange bar:

Then click on the account name to the right of “All accounts” (above the bold black URL of the profile you’re in:

Google Analytics Account

Next, click on “+ New Web Property” button:

Google Analytics - Add New Web Property

In the next screen, enter the name for the Web Property and the URL, then click “Create property”. It will now show up in your list of properties which you can access by clicking on the “home” icon in the far left of the orange bar.

Click on the new property, then click the “gear/cog” icon in the orange bar, click “Tracking Code” tab and copy the tracking code under “Paste this code on your site.”

For a Facebook fan page, you want to select “A single domain” under “What are you tracking?”

Adding Google Analytics to your Fan Page iFrame Tab

We now turn our attention to what you need to add to your index page for your iFrame tab to track the social buttons.

WARNING: This is fairly technical for non-coders, although it’s mostly just copying and pasting code, with no programming involved. Those familiar with Web coding shouldn’t have any problem here.

Add the Google Analytics tracking code

Add your tracking code within the <head> ... </head> tags of your HTML/PHP/ASP file (aka your Facebook application index page), before the closing </head> tag:

Google Analytics tracking code

Just before your tracking code, you have to make a call to Google’s social tracking JavaScript file. This enables the social tracking:

<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="https://app.tabpress.com/js/ga_social_tracking.js"></script>

You can use the above “ga_social_tracking.js” file URL or create your own and upload it to a secure/HTTPS server and link to it. It must be hosted under secure/HTTPS due to HTTPS requirements for Facebook iFrame tabs.

Once the above is done, your Analytics will provide tracking for Google +1 actions on your Facebook tab. You just need to add the +1 tag in the <body> tag of your index page:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>

Tracking Facebook Social Plugins — Like, Send, Unlike — with Google Analytics

Tracking social actions on Facebook Social Plugins is pretty easy with the new Analytics. It involves adding a call to an external JavaScript file (“ga_social_tracking.js”) and the addition of a JavaScript snippet in the Social Plugin tag.

Facebook Social Plugins Tracking: Add Call to External JavaScript

In the <head> ... </head> tag of your file, add the following:

<script type="text/javascript" src="https://app.tabpress.com/js/ga_social_tracking.js"></script>

As with the Google +1 JavaScript call mentioned earlier, you need the URL to the .js file to be secure (HTTPS). You can use the URL above or copy the JavaScript code in that file and create your own .js file and upload it to a secure server.

NOTE: You can use Amazon Web Services S3 to host all assets in a secure HTTPS environment. But you CAN’T use that service to host the index page of your Facebook app!

Add the Facebook Like / Send Button

You can get your Like/Send button code on the Facebook Social Plugins page.

You need to modify the code Facebook provides, to trigger the JavaScript function that tracks the social action.

Facebook provides this for the Like Button:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=170243346375858&xfbml=1"></script><fb:like href="" send="true" width="450" show_faces="false" font=""></fb:like>

NOTE: Facebook generates a new App ID by default (appID=170243346375858, in the above example). This allows you to use Facebook’s tracking tool Insights for that button. But if you don’t want this, just delete that bit of code.

Also, you can omit the “href” parameter or leave it blank if you want the Like/Send URL to be for the fan page the button is on. And you CAN’T specify a specific tab URL, just the fan page! You have this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false" font=""></fb:like>

Then add to the above code this CRUCIAL bit of JavaScript:

<script type="text/javascript">_ga.trackFacebook();</script>

which triggers Analytics to track the action. So your final Like/Send (or either one alone) looks like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">_ga.trackFacebook();</script>
<fb:like href="" send="true" width="450" show_faces="false" font=""></fb:like>

How long does it take for social actions to show up in my Google Analytics?

Although Google says that tracking data may take up to 24 hours to show up after you first activate the tracking, once it’s activated it seems to take around an hour or so, although I’m sure you’re mileage may vary!

Be patient, but if after several hours you’re not seeing any tracking results:

  • Double-check your <head> tags. Make sure all the calls to scripts have the correct URLs and are secure (https://);
  • Double-check your social tags in the <body>. Make sure they are correctly formed. They should closely match the examples in this article;
  • Check the date range for your Analytics. The default is the month up to yesterday. You’ll probably want to just track today’s metrics to see if your test actions on your social plugins are getting tracked;

Tracking Tweets with the Twitter Tweet Button – Not on Facebook Tabs!

Unfortunately, you can’t yet track your Twitter Tweet Button actions on a Facebook fan page tab. On the Twitter Button FAQ page they apologize: “At the moment the Tweet Button does not work over SSL. We are looking into making this possible but for the time being we only support HTTP.”

You also can’t track tweets using Tweetmeme. In fact, Tweetmeme advises folks to use the Twitter Tweet Button instead of Tweetmeme!

Can I track the LinkedIn Share Button on my Facebook tab?

Nope. I tested a lot of approaches and wasn’t able to get the LinkedIn Share button to show up in Analytics.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: