AJAX tracking.. When URLs no Longer Change

Remember the days when you could click on a link and then your web browser would load a new HTML page?  Now, clicking on the web will “slide in” something new or run impressive animation to expand a small rectangle into a larger rectangle. You’re still on the same web page, but it seems like most everything is now changed. In fact, you’re no longer clicking, you’re swiping.. and things are flying by fast.

A developer might refer to this as an AJAX-based site. These sites are visually amazing and technically much smarter from a performance and usability standpoint. However, they present challenges to the marketer’s tag-based world where most tags were originally designed with the old before-AJAX mindset.

What does this mean for your tags? Historically, the tag vendor would present a complex implementation guide and say “good luck!” The marketer would then need to get web developer help to place javascript function calls in their application (different for each vendor) to track the activity [recall s.tl() for SiteCatalyst or “dcsMultiTrack()” for WebTrends]. If you had tags outside of web analytics that needed to fire, a web developer might even find themselves writing a custom tag management platform without realizing it or without really wanting to.

Now, introduce Tealium TMS. Tealium provides generic tracking functions for your AJAX-style web applications. And, Tealium provides the ability to track clicks (or mousedown) without modifying your application code.  Here are a few examples.

(1) Tracking Clicks on DOM Elements

Click tracking can be challenging when/if the clickable item does not have a specific “id” or “class” that uniquely identifies it.  The main issue has been that there is no intuitive standard on what convention to use to identify the clickable item.

However, with HTML5, you can now add any number of attributes about your clickable elements. Once your web developers are in this habit, then you have very robust tracking moving forward.

A sample HTML element that when clicked, does search filter for items “More than $500”

<a href="#filter"  class="button" data-info='{"event_name" : "add-search-filter", "event_details" : "more than $500" }'></a>

A small snippet of code to track every button (generated via Tealium Extension)

jQuery('.button').click(function(e) {

utag.link( jQuery(this).data('info') );

});

The utag.link function is Tealium’s standard function for tracking non-pageview events.  Tealium will then take the “data-info” (event_name and event_details) and send it to SiteCatalyst, Google Analytics, Coremetrics, Webtrends, etc.  You determine where the data goes and what events might trigger for your web analytics reporting.

(2) Tracking Events in an AJAX-style Web Application

Probably the most difficult part of AJAX tracking is determining what events are treated as a new “page view” and what events are non-page-view events. The next step is placing the Tealium functions in your event handling routine. The following shows that “navigate” or “expand” events will be treated as a page view, while “next” or “previous” events are treated as clicks.

my.app.eventHandler = function( event, data ) {

// ...

if (event == "navigate" || event == "expand" ) {

utag.view( data );

} else if ( event == "next" || event == "previous" ) {

utag.link( data );

}

}

Remember, for the utag.link call, Tealium automatically calls the appropriate function for your analytics tool. And the Tealium UI lets you decide where the data elements go (via mapping.)

For example, with Google Universal Analytics a utag.link call would do this:

ga('send', 'event', 'button', 'click', 'navigate')

And a utag.view call would do this:

ga('send', 'pageview', { 'page': '/my-ajax-url?id=2',  'title': 'my new page name' });

Tealium also has the ability to bring in new tags for any “page view” event. For example, if your AJAX application loads an order confirmation page (aka the “Thank you” page) then, when you call utag.view it will bring in new tags that should fire on this conversion event.

To summarize, Tealium provides the ability to code your AJAX site once and then never again. If your website has buttons or other items that don’t change the web page URL, then take advantage of new HTML 5 features for adding “data” information in clickable items. Your web dev team now has a standard to follow, your marketing team is tracking all their links, and you have the power to add new tags or modify your existing analytics tags at any time.