Recording RUM using Episodes and Google Analytics Site Speed User Timing

Real User Monitoring (RUM) can be invaluable when prioritizing performance work for web applications. How long are you forcing users to wait for content? When is the above-the-fold content available? Which AJAX calls are most responsible for slowing down your pages in the real world? Fortunately, Google provides two great tools for tracking and reporting RUM performance numbers. Unfortunately, they require a little work on your part to get them to communicate with each other. Jimmy Page; Communication Breakdown from USA Today The first tool is Web Episodes, a client-side performance profiling tool written by performance guru Steve Souders. It hooks into browser events, records timing information, and sends that information to an URL that you specify (a beacon.) The second tool is the Site Speed User Timing feature of Google Analytics. It tracks and summarizes performance information about your site, but you are responsible for providing that information. Unfortunately, they don’t work together out of the box. Fortunately, it’s easy to glue them together! Wile E. Coyote (Warner Bros) The trick is to NOT use the beacon (aka autorun) feature of Episodes. Instead, you’ll use Episodes to gather data, then you’ll extract the data from Episodes and pass it into Google Analytics yourself. Start by using Episodes as normal to record some performance information. Do NOT use the “autorun” feature of Episodes, since you want to record data yourself. For example: EPISODES = { autorun: false }; // load Episodes library and initialize Google Analytics EPISODES.mark(‘render SuperWidget’); // render SuperWidget EPISODES.measure(‘render SuperWidget’); Finally, once you’re done recording data and you’d like to send it to the server, pull the data out of Episodes and push it into Google Analytics. Here’s some sample code illustrating the process, using Underscore: var category = 'My Category'; var samplePercent = 100; EPISODES.done(); var measures = EPISODES.getMeasures(); _.each(_.keys(measures), function(key) { window._gaq.push([ '_trackTiming', category, key, measures[key], null/* opt_label*/, samplePercent]); }); Once you’ve recorded some data into Google Analytics, you can see it in the GA UI. Navigate to Content/Site Speed/User Timings. You should see entries for the categories that you created. Here’s an example of what it might look like: Google Analytics screenshot

Posted in Engineering

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: