AddThis and Google Analytics : Asynchronous Tracking Code Integration

During the weekend I did some modifications, read improvements, here on the website according to Search Engine Optimization (SEO), keywords and page load times. Reducing the page load times made it necessarily to arrange my Javascript snippets in the template. So far, everything went well, until I figured out that my Google Analytics dropped down to 0...

So, while checking those issues I stumbled upon the 'new' Google Analytics Asynchronous Tracking code. This will also reduce page load time as "asynchronous tracking optimizes how browsers load ga.js so its impact on user experience is minimized." - Great!

The steps to use the asynchronous tracking is straight forward:

• Memorize or copy your web property ID from the existing snippet
• Remove the synchronous tracking code
• Insert the asynchronous tracking code
  [code]<script type="text/javascript"><!--
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-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' : 'https://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
  // --></script>[/code]
• Replacing UA-XXXXX-X with your web property ID.

That's the easy part...

Integrating AddThis into the 'standard' Google Analytics is extensively described on the help pages of AddThis. But sadly, there is no information about the asynchronous tracking code. Additionally, I checked the AddThis support forum and the topic 'Google Analytics : Asynchronous Tracking Code Integration' is discussed since a while. Not even answered by AddThis supporters yet. Even the Google Forum does not provide an answer. I was astonished to see this! Frankly speaking, this is not an unusual situation for a website, or?

Anyways, back to this article. You can send AddThis shares to your Google Analytics reports as custom events in the category “addthis” by adding the following configuration code to your existing AddThis sharing code:

[code]addthis_config = {
data_ga_tracker: pageTracker
}[/code]

The main problem about the interoperability between AddThis and Google Analytics is that the asynchronous tracking code does not provide a pageTracker object anymore. As said, this only works with the synchronous tracking code of Google Analytics. The forum threads actually provides some directions towards the solution of this problem. The link between those two services is to reference the GA pageTracker object in the AddThis configuration.

The Asynchronous Tracking Usage Guide provides the necessary information in the paragraphs about Multiple Tracker Objects and Pushing Functions. It is not clearly described on the spot but with a little bit of logic you can figure it out: Create your own Javascript variable that queries the Google API.

[code]_gaq.push(function() {
var pageTracker = _gaq._getAsyncTracker('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('https://example.com/');
});[/code]<

The solution lies in the parameter of _getAsyncTracker(). The samples in the User Guide refer to a named tracker. But what about the initial one? Right, just specify an empty string and you are done!

{loadposition content_adsense}

To summarize this article just use the following code snippet at the very end of your website to integrate Google Analytics : Asynchronous Tracking with your AddThis analytics:

[code]<!-- Google Analytics and AddThis button -->
<script type="text/javascript">
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

<script type="text/javascript">
var pageTracker = [];
if (_gaq._getAsyncTracker) {
pageTracker = _gaq._getAsyncTracker('');
}
var addthis_config = {
data_ga_tracker: pageTracker
};</script>
</body>[/code]

The GA user guide recommends to split your asynchronous code over your HTML content. The setup of the tracker should be directly after the <body> tag whereas the rest should be placed at the very end of your document (as described above).

Hopefully, my description is clear enough to enjoy a smooth and seamless code integration between Google Analytics Asynchronous Tracking and AddThis Sharing.