When we first launched Woopra back in 2008, we introduced a heartbeat mechanism to our JavaScript Tracker that allows us to estimate the duration of a page view (the time spent by a visitor on a web page).

We’re launching an exciting new update to our JavaScript Tracker that takes full advantage of Beacons — a new feature available in all modern browsers.

This update will not only track accurately the duration of the user on a web page, but it also introduces new features that were not possible in the previous version.

First, if you are using an unmodified copy of our JavaScript snippet, this update will automatically be taking place for you. If you are hosting our JavaScript code on your servers, you will need to update your copy of the JavaScript file.

Let’s talk about what’s new.

Using Beacons

We’ve been sending a Ping API call to Woopra every 10 to 15 seconds to notify our servers that the user is still active on a web page. This was important to estimate the time spent on a web page before the user leaves or closes a tab.

With Beacons, we can now send an update to our servers when the user leaves a page. We no longer need to ping our servers and we are now able to accurately tell whether the user is still on a web page or not and the exact time they spent on a page.

As a result of that, we’re officially retiring the Ping API.

Mutable Actions

Woopra’s actions used to be immutable. Once the action is tracked, it cannot be modified. In this update, we’re now able to update actions after they’re tracked as long as they haven’t timed out. Let’s assume you’re tracking when a user plays a video on the web page, you can now update the duration of the video seen by the user.

Developers can add mutable properties by extending the tracking code as follows:

// Track a video play action
woopra.track(
  'play video', 
  {
    title: 'SpaceX 5-Step design and manufacturing process',
    length: 133,
    seen: 0
  },
  {
    onBeforeSend: function(action) {
      document.getElementById("my-video").addEventListener('timeupdate', function() {
        action.update({
          seen: this.currentTime
        });
      });
    }
  }
);

For developers who are using the Woopra HTTP Tracking API, they can now generate an idptcy id for actions they’re tracking and use that id to update the action using /track/update endpoint. They will be able to update any action as long as it’s within the provided action timeout window. Learn more about the update API in our documentation.

Pageview Enhancements

The duration property of a pageview was the only mutable property and was managed by our back-end. A page view is like a session, a lot of important information can be gathered after that page is initially loaded and tracked.

For example, we are now tracking scroll depth, a new page view property that measures how deep the user has scrolled a page. Now you can accurately measure whether or not users are viewing a specific section on the page, reading the full article or bouncing right off the page.

We’re also pausing the duration when the page is no longer visible, such as when the user switches tabs or when the browser window gets hidden behind another window. When the user is back on the page, the stopwatch will resume. If the page remains hidden for longer than the timeout provided and then becomes active again, a new page view will be tracked with a returning property flag set to true _(to turn on this feature, you must set the _retrack action option to true).

Woopra can be configured to track Outgoing Link clicks and Downloads automatically. With the original tracker, tracking outgoing links was prone to issues because the only option was to delay the link click to make sure the action tracking was initiated — otherwise, JavaScript execution would immediately halt and those actions could not be tracked.

Tracking forms also had similar challenges. If a form is designed to post on another page, Woopra had to delay the submission execution to track the form before the Javascript execution gets suspended.

All these problems go away with the adoption of Beacons to track these actions. We no longer have to worry about delays or any performance issues.

Secure by default

The new version of our tracker communicates with our tracking servers using the HTTPS protocol by default. HTTPS uses TLS to encrypt normal HTTP requests, making it safer and more secure. This change also allows us to use more modern features of HTTP/2 (which requires TLS), such as multiplexing, to deliver increased performance across more of our traffic.

Previously, we used the same protocol as the web page containing the tracking script. If your website is using HTTPS today, there is no change. You can revert to the previous behavior by calling woopra.config(‘protocol’, ‘//’), however we highly recommend leaving this on for the privacy and security of your users.

What’s next?

We’re working on updating our tracker to automatically and securely track form submissions. Users will be able to turn on automatic form tracking for all the forms on their website or define specific ones they want to track.

We can’t wait to see how you leverage beacons or use the new /update API. If you have an exciting use case, make sure you share it with us here.