Deeper In-Page Analytics with JQuery

martin horn Blog, Tools & Resources Leave a Comment


That’s probably our favourite C-word here at Fractal. We spend a lot of time helping clients define them and achieve them. We think about all the little (micro) conversions that happen all the way up to a sale. We even made our own framework to help clients conceptualize how all those little, measurable actions that users make can add up to the coveted ultimate conversion, a purchase. Remember this?


Almost irrespective of what your business is, the one metric that matters more than all the others is Cost-Per-Acquisition (CPA). Knowing your CPA is essential to a healthy (and sustainable) marketing program. How much is a sale worth to you? Okay now how much did you spend getting that sale? Okay, now let’s hope that first number is higher than the second number!

If you’ve ever sold anything online, this isn’t news to you.

Google Analytics makes it easy to set up conversion tracking. What you’re doing there is tracking the actions that users take on your site, and determining if, how, and when they resulted in a sale.

But…  There are a whole bunch of actions that users can take on your site which Google Analytics doesn’t report on, out-of-the-box. And many of these can offer really valuable insight into what in your marketing program is working and what isn’t.

Today, we’re going to look at how you can use JQuery to get some deeper insight out of your analytics. This is a fairly technical post (yes, there’s code in it). It’s going to be especially valuable for you if you’re engaged in blog/text-based content marketing.

It’s sometimes hard to measure the value of individual content pieces. You’re looking for qualitative insight, like the time users spend on a page to understand if that content is resonating with audiences. But Google Analytics is notoriously unreliable where qualitative metrics are concerned. So we’re going to share some tips as to how to use JQuery to enhance Google Analytics.

“No One Is Going To Read This!”

I’ll give you an example. We were recently engaging in a content marketing campaign for one of our clients.

This particular client was skeptical of the effectiveness of content marketing for the simple reason that they didn’t believe that anyone would read the content. And if no one was reading the content, then it would be safe to assume that played no part in driving the conversions we were seeing (in this case the conversion was a sign-up for a newsletter).

Now, you’re probably thinking that we could just look at time-on-site for the blog pages and we’d know if people were actually reading the articles. And to a certain extent this is true. But, as mentioned above, time-on-site is problematic. Maybe that respectable average of 3 minutes for a given blog post was caused by lots of people leaving the site once they got to the page, in which case that number is actually an indication of a problem, rather than a successful metric.

After looking at several options, this blog post by Justin Cutroni gave us a relatively easy to implement solution. It features a JQuery script (the example script is displayed below) you can use to send an event to Google Analytics. In this particular case, it tracks how far down the page a user scrolls, and how long they take to do it. If it takes them longer than 60 seconds to reach the bottom, the script sends the event to Analytics. Adding this script to your site is fairly straightforward, though if you’re not comfortable with code you may want to get a web developer to put it on the page for you. Either way, Cutroni’s post goes over how to add it to your pages in some detail.


So now we knew, with some degree of accuracy, how many times our clients posts were actually being read. With this script in place, you can easily create a conversion around the event and track them that way.


jQuery(function($) {
  // Debug flag
  var debugMode = true;
  // Default time delay before checking location
  var callBackTime = 100;
  // # px before tracking a reader
  var readerLocation = 150;
  // Set some flags for tracking & execution
  var timer = 0;
  var scroller = false;
  var endContent = false;
  var didComplete = false;
  // Set some time variables to calculate reading time
  var startTime = new Date();
  var beginning = startTime.getTime();
  var totalTime = 0;
  // Get some information about the current page
  var pageTitle = document.title;
  // Track the aticle load
  if (!debugMode) {
    ga('send', 'event', 'Reading', 'ArticleLoaded', pageTitle, {'nonInteraction': 1});
    } else {
    alert('The page has loaded. Woohoo.');
  // Check the location and track user
  function trackLocation() {
    bottom = $(window).height() + $(window).scrollTop();
    height = $(document).height();
    // If user starts to scroll send an event
    if (bottom > readerLocation && !scroller) {
      currentTime = new Date();
      scrollStart = currentTime.getTime();
      timeToScroll = Math.round((scrollStart - beginning) / 1000);
      if (!debugMode) {
        ga('send', 'event', 'Reading', 'StartReading', pageTitle, timeToScroll, {'metric1' : timeToScroll});
        } else {
        alert('started reading ' + timeToScroll);
      scroller = true;
  // If user has hit the bottom of the content send an event
  if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) {
    currentTime = new Date();
    contentScrollEnd = currentTime.getTime();
    timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000);
    if (!debugMode) {
      if (timeToContentEnd < 60) { ga('set', 'dimension5', 'Scanner'); } else { ga('set', 'dimension5', 'Reader'); } ga('send', 'event', 'Reading', 'ContentBottom', pageTitle, timeToContentEnd, {'metric2' : timeToContentEnd}); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) {
        currentTime = new Date();
        end = currentTime.getTime();
        totalTime = Math.round((end - scrollStart) / 1000);
        if (!debugMode) {
          ga('send', 'event', 'Reading', 'PageBottom', pageTitle, totalTime, {'metric3' : totalTime});
          } else {
          alert('bottom of page '+totalTime);
        didComplete = true;
  // Track the scrolling and track location
  $(window).scroll(function() {
    if (timer) {
  // Use a buffer so we don't call trackLocation too often.
  timer = setTimeout(trackLocation, callBackTime);


What Are Virtual Pageviews?

It occurred to us that this kind of custom event triggering could have all kinds of other applications. What if one blog post in particular was expressly designed to lead to a conversion, and we wanted to track complete read-throughs (or any other event, for that matter) as part of a funnel? On it’s own this script doesn’t help us, because it’s triggering an event, and each step of a funnel has to be a pageview. This is where virtual pageviews become useful.


What is a virtual pageview? When a visitor navigates to a page being tracked by Google Analytics, the ga(‘send’, ‘pageview’); script is triggered. Virtual pageviews give us a way to register any event as a pageview with a dummy URL and thus make it part of a funnel.

In other words: a virtual pageview lets us put a trackable event anywhere in the page. If you’re working with long article you can set little ‘milestones’ through it.

The code looks like this:

ga('send', { 'hitType': 'pageview', 'page': '/virtual/read/', 'title': 'Blog Post Read' });

We would put this code in the same part of the JQuery script we saw before that triggered the event. In fact, if we didn’t need to track blog reads as events we could just send the pageview and not the event. It would no longer show up in our events view in Analytics, but it would show in our Site Content->All pages view.

Another potential use for this is in building remarketing lists. Much in the way you can build lists in Analytics based on pages viewed, you could use this technique to build lists only of users who had read specific content in its entirety. Taking this a step further by creating custom combination lists you could target users who have read or not read specific content pieces, visited certain pages, or taken certain actions, in any combination you can dream up.

So what does this all mean?

Well, it means we can track anything that can be registered as an event with JQuery. In practice the sky’s not the limit, because 99% of the time you’re probably only going to want to track things like signups, pageviews and e-commerce completions. Tracking blog reads is already pretty out there as far as day-to-day Analytics requirements go. But still, it just goes to show that you can track pretty much anything, and more importantly if what you want to track is engagement, and not just sales, there are always ways to do that.

Want to take this “deeper” way of thinking even further? Give this article by Avinash Kaushik a read and start thinking about applying a monetary value to certain analytics events or segments. For example, if someone reads 5 blog posts on your site – what does that make them worth to your business? What if they read 5 blog posts about a certain product? It may seem too ephemeral to calculate but it’s possible and it will totally change the way you think about the value of your content.

Leave a Reply

Your email address will not be published. Required fields are marked *