Tracking Social Interactions with Google Analytics

In this tutorial I will show you how to add Google Analytics Social Tracking to your website.

Google Analytics Social Interaction Tracking

Google’s Social Analytics feature allows you to track social interactions on your website, your blog or on your Facebook fan page. These actions include the Twitter button, LinkedIn Share button, and the Facebook Like, Unlike and Send actions.

NOTE: Adding GA Social Tracking requires access to and modification of your Web page files. It’s pretty basic, but you should be somewhat comfortable working with HTML files.

What is currently supported with Google’s Social Tracking

As of this writing, my testing shows that these social buttons are supported:

• Facebook Like, Unlike, Send buttons
• Facebook Comments Box
• Twitter (only via the “official” Tweet button, not Tweetmeme or other 3rd party buttons)
• Google +1 Button
• LinkedIn Share button

As for WordPress plugins, you’ll have to search WordPress Plugins to see what is available to implement Google Social Tracking on your WordPress website or blog.

Google’s New Google Analytics Interface and Tracking Code

In order to implement Social Interaction Tracking, you will have to update your current Google Analytics code to the latest version (called “Asynchronous Google Analytics“), and then add a few snippets of code to your HTML file. The “New Version” asynchronous Google Analytics is available as an option at the top of the page when you’re logged in to your Google Analytics account:

How to Get Your Updated Analytics Code

To get your updated Google Analytics code:

1. Log in to your Google Analytics account;
2. View the new GA interface by clicking “New Version” at the top right of the screen (see above image);
3. Click on the domain account you wish to access;
4. Click the “gear” icon, in the orange bar at the top right of your screen:

   

5. Click on the “Tracking Code” tab:

   

   Under “Standard” tab and below “1. What are you tracking?” select the option that best describes what you’re tracking. It’s usually “A single domain”;

6. Copy the code under “2. Paste this code on your site”. It should look like this, but with your “UA-xxxxxx-x” account number:

   <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
_gaq.push(['_trackPageview']);
(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>

You now have your updated Google Analytics code.

Putting the code in all the right places

The new version of your Google Analytics code should be placed before the closing </head> tag of your HTML file. (Yes, this is different. The old version was usually placed before the closing </body>, but that was then….)

Between your Analytics code and the closing </head> tag, insert this bit of code that calls the JavaScript that enables the social tracking:

<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://[YOUR-DOMAIN]/_js/ga_social_tracking.js"></script>

The end result will be:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
_gaq.push(['_trackPageview']);
(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>
<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://[YOUR-DOMAIN]/ga_social_tracking.js"></script>
</head>

The “UA-xxxxxx-x” will be replaced with your unique Analytics ID for this domain.

Now let’s add the Like/Send Button code

As I mentioned in my Social Media Examiner post on Social Plugins for fan pages, Facebook generates the Like/Send Button code for you, on its Social Plugins page. For the Like/Send Button, you just need to enter the URL that clicking the button likes, select whether or not you want to include a Send Button, and a couple other options, then copy the code in the popup dialog, which will look like this:

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

The “#appId=xxxxxxxxxxxxxxx” is a random app ID that Facebook generates which allows you to access Insights for the button, but it’s not necessary for the button to work. In my example, I omit the appId value from the code, which will work fine.

IMPORTANT: You must add the below snippet of JavaScript to the code that Facebook generates so that actions on that button trigger Google Analytics:

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

Add the above code before the <fb:like /> tag:

<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="www.besthawaiianvacationrentals.com" send="true" width="450" show_faces="false" font=""></fb:like>

Paste your Like Button code anywhere between the <body> </body> tags.

Viewing your Google Analytics Social Tracking reports

As mentioned above, the Social Tracking reports are only available in the new Google Analytics interface. (See above for how to choose the New Version option.)

NOTE: It usually takes a few hours for Analytics to reflect activity on your Web pages, but it can take up to 24 hours. See “Troubleshooting,” below.

After logging in to your Analytics account, click into the domain for which you want to view reports, then, in the left menu go to “Visitors > Social”:

You have 3 options for viewing the social interactions:

1) Engagement: You see two metrics: 1) Not Socially Engaged; and, 2) Socially Engaged. This shows you how effectively each page is in motivating users to Like or Tweet your content:

2) Action: This shows you the specific actions taken (Like, Unlike, Send), how many of each, and percent total actions:

3) Pages: Details on which pages actions were taken and what those actions were.

Adding the Twitter Button to the mix

Google’s Social Tracking will also track tweets made with Twitter’s Tweet Button. Interestingly, Tweetmeme now recommends using the Twitter Tweet Button.

After logging in to your Twitter account, go to the Twitter Tweet Button page, where you can select one of the 3 available options:

Once you’ve made your selection, just copy the code that is generated for you and paste it somewhere between the <body> </body> tags of your Web page. Your code should look like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="hyperarts">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Add a bit of JavaScript to activate Twitter social tracking

Before the closing </head> tag, place this bit of JavaScript to activate the Google Analytics tracking (the social tracking won’t work without this tag!):

<!-- Load Twitter JS-API asynchronously -->
<script>
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>

I don’t think it matters where you put the above Twitter-tracking code, as long as it’s inside the <head></head> tags. I put it right before the closing </head> tag, after the Google Analytics tracking code and the call to the “ga_social_tracking.js” JavaScript.

A word about Google +1 Tracking

As Google states on its page about Social Interaction tracking,

Out of the box, Google Analytics provides integrated tracking with the Google +1 button. This means if you have set up both Google +1 and the latest version of Google Analytics on the same page, all +1 social interactions will be tracked automatically.

As I mentioned above, the +1 button is Google’s version of the Facebook Like button. I’ve added it to the HyperArts website and the HyperArts Blog, but I haven’t seen much traction with it yet. However, adding can’t hurt, and as it grows in popularity it will help your content a larger audience.

Add the LinkedIn Share Button and Tracking with Google Analytics

I wrote a separate article on adding the LinkedIn Share Button to your website and tracking it with Google Analytics.

Early on, there were some bugs with the LinkedIn Share Button but they seem to have all been worked out. I have found the button and Google’s tracking of it are both working great.

Troubleshooting

If you implement the above instructions accurately, you should see tracking results within several hours of initiating tracking, although Google says it can take up to 24 hours to display results.

If, after 24 hours, you don’t see any social tracking results (and I’m assuming you will have done some testing of the buttons to ensure they work and to provide some data to Analytics):

• Doublecheck your code. Make sure you have placed the code as instructed above, and make sure your URL values are correct;
• Check the Google Analytics date range. By default, Google Analytics displays the past month of data up to the previous day. You can manually change that range to include the current day by clicking the arrow next to the date range and changing the end date to the current day:

  

• Adding Social Tracking to your WordPress self-hosted blog: There is already a plugin for this feature, but you can read my new article on how to manually add Google Analytics Social Interaction tracking to your WordPress blog;
• Tracking Facebook tabs: Make sure you select the “Multiple top-level domains” option when getting your Analytics code. This is specifically for Facebook fan pages. You can read my recent post on the HyperArts Blog on adding Google Social Interactions tracking to Facebook tabs.

Although this may look a bit, um, complicated, it should be pretty easy for those who are comfortable working with Web files. If you have problems, ask questions here and I’ll do my best to help you out!

Technorati Tags: Google Analytics, Social Analytics, social plugins