If you’re not on the HyperArts Blog, CLICK HERE!
In this article, I will show you how to add Google Analytics Social Interaction tracking to your self-hosted WordPress website or blog.
Using Google Analytics new social tracking allows you to track user actions on your website’s or blog’s Facebook Plugins, Google + button, Twitter Tweet button and LinkedIn Share button.
Adding the Trackable Social Plugins & Widgets to your WordPress Site
You’ll need to add the code for the Google +1, LinkedIn Share button and Tweet button widgets, and for the Facebook Social Plugins. You can get the code at these URLs:
- Facebook Social Plugins — Like/Send, Unlikes and Comments Box;
- Google +1;
- Twitter Tweet Button;
- LinkedIn Share Button.
You will then need to modify files in your WordPress theme. The files are located in this path:
/YOUR-WORDPRESS-DIRECTORY/wp-content/themes/YOUR-THEME/
The files you will need to modify are:
- header.php;
- single.php;
- footer.php.
Note: The above are the most common names for the WordPress PHP files used to construct each page or post. Your mileage may vary.
You’ll be adding JavaScript functions to the “header.php”, the widget/plugins code to “single.php” and Facebook JavaScript SDK initialization JavaScript, that triggers the Google Analytics, to “footer.php”.
NOTE: You must be comfortable working with code. This isn’t particularly complex, but you could mess things up. Make sure you make back ups of the files you modify, just in case.
Add the JavaScript code to “header.php”
Let’s start with adding the JavaScript to your “header.php” file. This content will be rendered in the <head> ... </head> tags of each of your WordPress pages or posts.
You will want to paste the below code just before the closing </head> tag in the “header.php” file.
Make sure you change the Google Analytics ID from “UA-xxxxxx-xx” to your tracking ID.
<!-- GOOGLE +1 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- GOOGLE ANALYTICS ASYNCHRONOUS CODE -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-xx']);
_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 TRACKING -->
<script type="text/javascript" src="http://YOUR-DOMAIN/_js/ga_social_tracking.js"></script>
<!-- TWITTER - LOAD 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>
<!-- LINKEDIN SHARE BUTTON -->
<script type="IN/Share" data-onsuccess="LinkedInShare"></script>
<script type="text/javascript">
function LinkedInShare() {
_gaq.push(['_trackSocial', 'LinkedIn', 'Share']);
}
</script>
Add the code for the plugins and widgets to “single.php”
The “single.php” file contains the main content of each of your WordPress pages or posts.
Because the various buttons will be visible to the users, how they are displayed is important.
The code below — which doesn’t include the Facebook Comments Box (we don’t use it on our blog) — will display like this:
Where you paste the code in “single.php” file will, of course, depend on where you want it displayed on each post. Ours follows the post/page title, date and time:
<h2><?php the_title(); ?></h2>
<?php the_time(__('l, F jS, Y','fusion')) ?>, <?php the_time() ?>
So the result is:
<h2><?php the_title(); ?></h2>
<?php the_time(__('l, F jS, Y','fusion')) ?>, <?php the_time() ?>
<div id="post-socialbuttons">
<!-- TWITTER BUTTON -->
<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>
<!-- GOOGLE PLUS 1 BUTTON -->
<g:plusone size="medium"></g:plusone> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script>
<!-- FACEBOOK LIKE / SEND BUTTONS -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=234092069940761&xfbml=1"></script><fb:like action='like' colorscheme='light' layout='standard' show_faces='false' width='650' send="true"/></div>
Note the code for the plugins/widgets is contained in a DIV with the CSS ID “post-socialbuttons”. Feel free to use the CSS we use to style how our social buttons are displayed. Just add the following CSS style to your theme’s “style.css” file (which is also located in the “wp-content/themes/your-theme/” directory):
#post-socialbuttons {
background:#f4f4f4;
border:1px solid #bbb;
border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
padding:8px;
width:600px;
margin:8px 0;
}
Finally, add the Facebook JavaScript SDK code to “footer.php”
We’ll now add the Facebook JavaScript SDK which includes the App ID associated with your blog as well as “_ga.trackFacebook();” JavaScript that triggers the Google Analytics social tracking.
To use the powerful Facebook Domain Insights to track how users are interacting with your website or blog on Facebook, you must register your website or blog as an application.
Article: Using Google Analytics & Facebook Domain Insights to Track Social Actions on Your Website
Article: How to Create a Facebook Application to Get an App ID for your Website
Here is the code you’ll paste into your “footer.php” file:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR-APP-ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
_ga.trackFacebook();
</script>
Make sure you change “YOUR-APP-ID” to the App ID of your blog, and read this tutorial, to learn how to get an App ID for your website or blog.
Using Google Analytics Social Interaction Tracking
To take advantage of the Google Analytics social tracking, you have to use the new “asynchronous” tracking code. My tutorial on using Google Analytics to track social actions on your Facebook iFrame tabs shows how to implement the new Google Analytics tracking, so I won’t go into it here.
That Should Do It!
The above should be what you need to add this powerful tracking feature to your website. Let me know in the comments how it goes.
Additional Resources
- Facebook Social Plugins (Get your code here);
- Using Google Analytics & Facebook Domain Insights to Track Social Actions on Your Website
- How to Track Tweets, Facebook Likes and More with Google Analytics (Social Media Examiner);
- Tutorial: Add Google Analytics Social Interaction Tracking to your Facebook Tabs
- Google Analytics Technical Info for Social Tracking
- Google Analytics Blog Post on Social Tracking
- Google Analytics Social Tracking Help Page
- Google’s Asynchronous Usage Tracking Guide
- Google Analytics Help Center
- Google Analytics: How to Add a Web Property
- Blog SEO Essentials: Maximize Traffic to your WordPress Blog
- Set Up your Website to Control Images & Text in Facebook Status Update Links
