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.

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”

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.

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.

Ty Gavin is a well-rounded Internet marketer and analytics consultant with a passion for problem solving. He brings a client-centric focus obtained from over 12 years supporting both installed and SaaS solutions for data modeling, web analytics and conversion optimization. He has hands-on experience in every aspect of digital marketing, spanning previous careers as a webmaster, marketing manager, implementation engineer, technical consultant and business analyst. Ty received a Bachelor of Science in Computer Science from Cal Poly, San Luis Obispo.