I’d like to introduce a new post style series to you that I think might be helpful. In this ongoing Problem\Solution series I plan on posing a question in which I did not know the answer. After performing a bit of research I come to a solution in which I share with you. I’m a big fan of short cuts when it comes problem solving so hopefully this post saves you time and effort as you pass off these ideas as your own…I mean, I would.
Today’s problem solves how to use web analytics to track non-websites. The current project I’m working on is an application where 95% of its functionality is performed with Ajax. In total there are three unique URLs in the entire application even though there could be 20+ “pages” of core information based on their functionality. So the problem is “How do we track an application powered by Ajax?” Well the solution is to force the application to behave like a website when it sends the data to web analytics. For this solution we’ll be using custom events and virtual pages. I’ll use Google Analytics in my code examples because its free and you too can play along.
Event tracking
The Future is Digital
Becoming digital is the surest way for you to understand your customers' needs and meet their expectations. Learn how Perficient can help anticipate what's ahead for you and your customer with a digital strategy centered around empathy, alignment, and agility.
Typically event tracking is a method to record interactions with website elements. You can put this on an affiliate link to alert you when the link was clicked and then match up later to your conversion to see how persuasive your copy is. You can use this to see how many times someone clicked on an image of a button that says “push me” but does absolutely nothing. You can even use this to see how users are navigating your “all flash” navigation (shudders). We’ll be using event tracking for cases closest to the latter. Typical websites have links that when you click on them they usually travel to a new page and change the uniform resource locator…yeah I know what URL stands for. Wanna fight about it? With Ajax elements you can send and retrieve data from a server in the background without ever having to change the displayed web page. Since we are not loading a new URL, you typically aren’t firing the analytics tracking code off and sending more data to Google Analytics. This means you aren’t being tracked. Counteract that with the following code on elements that you want to show up in your analytics (in our case every single link that the all Ajax application has to offer the user).
Keep in mind this is the new syntax if you are using the new analytics.js for tracking and not ga.js.
Virtual Pages
Virtual pages refer to sending pageviews to Google Analytics where none really exist. It’s a practice commonly used for organizing content such as downloads into a directory structure. What you would do is place this code onto a download link and then create a pageview for say “/virtual/whitepapers/analytics-lesson.pdf” and even though the PDF is downloaded, you see what looks like a pageview of your site to a directory that doesn’t exist. Then you can go into your goal settings and set a goal to watch for any “/virtual/whitepapers/” url to produce a report on how often your white papers are being downloaded. The code looks like this:
Since we’re dealing with an Ajax site that has only 2-3 unique URLs, when logically the content could be divided up into 20+ URLs, this allows you to see the content in a much more granular fashion. You can simply add this code to any link that would replace the overall page content with new information. This is the same technique you use for tracking Mobile Applications. If you have a game on your iPhone and a menu system that shows you Settings, High Score, Credits, etc… You simply divide up the application into sections that make sense and push them into pageviews following a logical URL structure.
So that’s how we solve the problem of tracking a site that powered by Ajax. Just dropping the analytics.js tag onto your site/application isn’t quite enough. You need to get your hands dirty and do some advanced configuration to ensure the data is logged correctly. Hopefully you find this format helpful as I have a few more problem/solution guides. Let me know if there are any other types of problems you have yet to solve and maybe we can put our heads together to come up with a solution!
