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

    If you’re NOT on the HyperArts Blog, Click here!

    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://[YOUR-DOMAIN]/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://s[YOUR-DOMAIN]/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>

    Tracking the Facebook Comments Social Plugin

    You CAN do this, although the code for it ISN’T included in Google’s sample Analytics code for social tracking. Read my tutorial on tracking the Facebook Comments Box with Google Analytics. (Includes a downloadable .js file modified to track Comments.)

    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 one 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.

    Resources

    Comments

    1. Tadalafil says:

      This was very useful!
      you are great man!!! all of your posts are very useful and well produced!
      Good luck

    2. Michaleen says:

      Tim – trying to wrap my head around this stuff:) Where in Google Analytics should I see this tracking? Would it show up in the sidebar w/ Dashboard | Intelligence |Visitors | Traffic Sources | Content | Goals?

      • You have to use the “New” interface for Google Analytics, available in the top right nav area. Then the social tracking is on the left. You’ll see “Social”, under which you’ll see the 3 options for viewing visitor actions.

    3. One thing I don’t understand in this case: what’s the URL? My facebook page URL? My iframe content URL? Does it even matter? 

    4. Tim I also have a quick question. Does this work for the facebook Like Box as well as the Like button? I know that in facebook insights it tells you how many likes you get from the “Like Box” but this doesn”t help if I have it on multiple sites. Thanks

    5. Landin Gee says:

      Hi Tim,

      I’ve tried to add a Coremetrics code to my html so I can track pageviews and such, but when I view the facebook tab and view source, it looks like Facebook removes the java script block. Is this a recent change they made? Here is an example of the Javascript I used:

                      cmSetClientID (“000000″, true, “data.coremetrics.com”, “webpage.com”);        cmCreatePageviewTag (“Pagename”,”Pagesection”,null,null,””);       

      Thanks

    6. Tab Press not loading site content? 

      I have several client Custom Fan Pages that are loaded inside of the Tab Press framework.  At this point, and for the last 8 hours NONE of the sites are loading properly.  They are either loading slowly or not at all.  Each client page is on its own respective server.  This occurs in various browsers.  I have my agency’s Custom Fan Page in a traditional I-Frame, without an app, and it loads without delay.  All the remaining FB content loads as well.  It appears as though the problem traces back to Tab Press.  Please provide feedback, and thanks tremendously for the various range of great postings and product support.

      • Yes, for some reason there was a large spike of usage on Jan 27. We’re in the process of changing database servers. I’m very sorry for any inconvenience this may have caused you.

    7. Thanks for your patience!

    8. asecondwill says:

      is this possible for iframe powered pages / tabs.  Also, what is the url? google won’t accept a url with a query, which is what facebook has given me for my tab

      thanks for the great run down, 

      will

    9. Use the URL of your canvas page.

    Speak Your Mind

    *