Written by Robert Scavilla+
Updated: September 10, 2011
This article discusses how to configure Google Analytics for tracking AJAX content on your site. AJAX works by updating a page element dynamically without causing a page refresh. The AJAX call is initiated from an event triggered in the browser. The following code examples assume you have a working knowledge of JavaScript and jQuery. Sample code from a SEO AJAX test site is used in this article.
The Google Analytics Tracking Code
If your Google Analytics (GA) code is installed correctly, it is loaded in the last line of the page <head> section. When the page is loaded, the _gaq variable is created and initialized to your profile id with the _setAccount call. The _trackPageview call does the work of registering the pageview in your GA profile. There are additional parameters that can be added to the _trackPageview call; however, without any parameters, the URL for the page will be recorded.var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-123456']); _gaq.push(['_trackPageview']);Typically a static HTML or php page will contain the GA tracking code as well as the JavaScript code to initiate the AJAX. When this static page loads, the _trackPageview function will register the URL of the page by default.
Tracking AJAX Content
For this example the jQuery .load() function is used to handle the AJAX call.Let's assume your page has a <div id="content"></div> element . To populate this element with results of an AJAX call, you could add the following code to the event handler:
$('#content').load('/ajax_url'); // load the content divYou could also add a _trackPageview call in the same event handler to record the pageview:
_gaq.push(['_trackPageview', '/ajax_url']);While this will work for the most basic AJAX applications, it will not work accurately for AJAX applications that allow direct access to the AJAX content from the address bar.
AJAX and the Address Bar
If your AJAX application supports direct access to the AJAX content, you are probably using the hash fragment to maintain the state of the AJAX content. If so, you load the main static page first, then update the content element before the page is displayed. In this case, to prevent multiple pageviews from being recorded during the AJAX load, you have to add a conditional test in the Javascript code before the _trackPageview method is called in the page head section.The following URL has a hash fragment that is used for maintaining AJAX state:
http://ajax.rswebanalytics.com/seo-for-ajax/#!ajax_and_the_address_bar
For the above URL, the /seo-for-ajax page is loaded from the server, then the onload() function replaces the content element with the ajax_and_the_address_bar content before the page is diplayed. In this case you would not want the _trackPageview method called when the _seo-for-ajax page is loaded, rather only when the ajax_and_the_address_bar content is loaded. This is done using the following code:
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-123456']); // only if the hash fragment is empty, record the pageview if(location.hash == '') _gaq.push(['_trackPageview']); (function(){var ga=document....... </script>
<script type="text/javascript"> function load_content() { q = window.location.hash.substring(1); a = '//ajax_url' + q.substr(1,q.length) $('#content').load(a); // load the content div with the results of the AJAX request _gaq.push(['_trackPageview', 'ajax_url' + q.substr(1,q.length)]); } </script>
No comments:
Post a Comment