Testing For Social Conversions - Part 1: Twitter

Much discussion has been had over the past month around the launch of the Follow Button. Of most interest to me was how this hooked into the Twitter web Intents, which, as described by the company, "are the simplest way to make the Tweets you display on your website interactive".

From an analytics point of view the implementation of web intents on a site solved a longstanding issue of being able to effectively track activity. As our marketing activities become more and more integrated and social media becomes an important part of onsite activity, it is vital to be able to measure the level of interaction and optimize the site to be more efficient at gathering social shares, likes, follows etc.

Below I'll give an example of implementing the Google Website Optimizer code which will enable the multi-variate testing of a Follow Button (although the same logic applies for all actions). In this example we cover off three key areas:

1. Adding the basic Follow Button
2. How to track a page action as a conversion goal in GWO(rather than a pageview)
3. How to bind this action to the Twitter 'follow' action so it is measured in your GWO reports

Adding The Follow Button

Head over to the twitter resource page and enter the details for your account. This will give you block of code to paste into your page:

<a href="http://twitter.com/queryclick" class="twitter-follow-button">Follow @queryclick</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

For now, ignore the <script> section - this only needs to be present once within the page to handle all your Twitter actions, and for optimal performance it will be loaded asynchronously later in this article.

It should now look something like the following:

Follow @queryclick

We now need to create a new experiment and navigate to Step 2; 'Install and validate JavaScript tags'. Here you will be provided with the standard tracking scripts, which need some tinkering with to achieve our goal.

The Control Script

There are no changes required to this, so grab it as it is given when creating the test and paste as per the instructions immediately after the opening section (note - it is presented by GWO in a box alongside the trackings script - copy the contents and paste them into a text editor, then copy out everything within the control script boundaries):

<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='xxxxxxxxxx',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('')})();
</script>
<!-- End of Google Website Optimizer Control Script -->

Integration GA & GWO Tracking Scripts

Because the two codes share many elements, we can be efficient with the amount of code called on the page by combining the two (assuming that if you use GWO, then GA is already implemented. If not, then just implement the GWO tracking script as it is provided)

Below is the code you will be presented with in the experiment set-up. We are only interested in the two _gaq.push elements:

<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['gwo._trackPageview', '/xxxxxxxxxx/test']);
  (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>
<!-- End of Google Website Optimizer Tracking Script -->

We then copy these out and paste them below the _gaq.push(['_trackPageview']); line in the existing GA code to give:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['gwo._setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['gwo._trackPageview', '/xxxxxxxxxx/test']);

  (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>

Binding The GWO Conversion Code To A Web Intent Event

We now need to amend the given conversion code to allow us to track an action on a page - as opposed to a pageview which signifies that the goal has been completed. When setting up the experiment GWO will present you with this:

<!-- Google Website Optimizer Tracking Script -->

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['gwo._trackPageview', '/xxxxxxxxxx/goal']);
  (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>
<!-- End of Google Website Optimizer Tracking Script -->

In here we have all the same tracking code elements that we've covered off when integrating the GA & GWO tracking script above, so the one unique element we can see is _gaq.push(['gwo._trackPageview', '/xxxxxxxxxx/goal']);

This will be the code we will need to fire on an event to register a conversion.

Taking a step to the side, lets look at how we will be tracking the twitter intent event. Using the Web Intents Events functionality it is possible to bind the actions to Google Analytics 'Events'. To avoid covering already trodden ground, Null-UK have created a great, all encompassing piece of code which also asynchronously loads the twitter.com/widgets.js. Grabbing this code and placing it before the closing tag means that you are now tracking all the possible twitter events on your page.

So taking this and combining the goal push within the 'follow' action we are looking to record gives:

<script type="text/javascript">
jQuery(document).ready(function($) {
        //async load of twitter JS
        var e = document.createElement('script'); e.type="text/javascript"; e.async = true; 
        e.src = 'http://platform.twitter.com/widgets.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(e);
		//binding the events
        $(e).load(function() {
                function clickEventToAnalytics(intent_event) {
                        if (intent_event) {
                                var label = intent_event.region;
                                 _gaq.push(['_trackEvent', 'twitter_web_intents', intent_event.type, label]);
                        };      
                }       
                function tweetIntentToAnalytics(intent_event) {
                        if (intent_event) {
                                var label = intent_event.data.tweet_id;
                                _gaq.push(['_trackEvent', 'twitter_web_intents', intent_event.type, label]);
                        };      
                }       
                function favIntentToAnalytics(intent_event) {
                        tweetIntentToAnalytics(intent_event);
                }       
                function retweetIntentToAnalytics(intent_event) {
                        if (intent_event) {
                                var label = intent_event.data.source_tweet_id;
                                _gaq.push(['_trackEvent', 'twitter_web_intents', intent_event.type, label]);
                        };      
                }       
                function followIntentToAnalytics(intent_event) {
                        if (intent_event) {
                                var label = intent_event.data.user_id + " (" + intent_event.data.screen_name + ")";
                                _gaq.push(['_trackEvent', 'twitter_web_intents', intent_event.type, label]);
								 //adding the GWO conversion push
								_gaq.push(['gwo._trackPageview', '/xxxxxxxxxx/goal']); 
                        };      
                }       
                twttr.events.bind('click',    clickEventToAnalytics);
                twttr.events.bind('tweet',    tweetIntentToAnalytics);
                twttr.events.bind('retweet',  retweetIntentToAnalytics);
                twttr.events.bind('favorite', favIntentToAnalytics);
                twttr.events.bind('follow',   followIntentToAnalytics);
        });
});
</script>

It is worth noting that this will only record the action once a follow is completed - the initial click of the button is recorded (funnily enough) by the 'click'

In Google Website Optimizer you can now hit the 'Validate Pages' button and get confirmation that all the required elements are present. Continue the set-up and start optimising the placement of Twitter buttons within your page.

Notes On Implementation

I have not touched on the 'Page Sections' element of setting up a GWO experiment as essentially nothing changes, just wrap the tags around the areas to be tested (and obviously make sure they are Twitter actions!)

Also, this was carried out and tested on a Wordpress blog which tested the position and formatting of the follow button within a sidebar which appeared on every page of the site. Due to this I was able to set the scripts uniformly across the site by incorporating them in the header and footer templates - if you are looking to test only on specific pages remember to include/exclude them as required.