mPulse Custom and Navigation Timers

Document created by DPM Admin Employee on Jul 14, 2017Last modified by Sheril Joseph on Aug 10, 2017
Version 2Show Document
  • View in full screen mode

mPulse supports the use of custom timers configured using either client-side matching defined as part of your App, or by using a variable (written as Boomerang plugin). A Custom Timer can be based on any measurable user-defined value in the page.

Currently, navigation, resource, and user timers can be defined using the client-side pattern matching method. In addition to being client-side deployed (requiring no code on your web site or app), no Boomerang plugin is required for the non-Variable method.

App Administrators define pattern matching custom timers from within the Configure App box, Custom Timers tab, as well as enter Variable values.

For information about setting custom timers and other custom metrics programmatically, refer to the mPulse Beacon API.

Custom Timer Support by Browser

Because browser support varies by brand and/or version, the App Admin should be aware of the following variations.

Note: Internet Explorer doesn't support using XPath on HTML Documents (e.g. Internet Explorer requires XML documents fetched via XMLHttpRequest).

Browser Support (Custom Timer):

For custom timers, use the following techniques by browser.

  • JavaScript variable—All browsers
  • Navigation Timing custom timer—Chrome, Firefox, IE 9+, Opera, Android; experimental on Safari & iOS
  • Resource Timing custom timer defined with XPath—Chrome only
  • Resource Timing custom timer defined with URL—Chrome, IE 10+
  • UserTiming custom timer—Chrome, IE 10+
  • Resource Groups - All browsers

App Admins setting up custom timers should also be aware of how browser variations impact custom metric setup.

Browser Support (Custom Metrics):

For custom metrics, use the following techniques by browser.

  • JavaScript variable—All browsers
  • URL Pattern (e.g. true/false custom metric)—All browsers
  • URL Pattern with XPath custom metric—Chrome, Firefox, Opera, Safari, iOS, Android 4+; as noted above Internet Explorer doesn't support XPath on HTML Documents

 

Custom Timer Settings for Web Apps

The App Admin user can define multiple timers using this tab and one timer per row. Custom Timer rows collapse/expand for easier use with multiple timer rows, Timers can use either Variable or URL Pattern.

  • To access the Configure App box, choose Central > Apps (requires App Admin privilege). Click the Advanced button, if necessary, to display the tabs in the box.

  • Click the green Plus icon to add a row. Then, click to enter the Timer Name and click to expand the row.

Define a Custom Timer Using JavaScript Variable

App Administrators can define custom timers using URL Pattern matching from within the Configure App box, Custom Timers tab.

This features works with basic Boomerang and no additional Boomerang plugin is required.

URL Patterns are any regular URL with * used as a wildcard anywhere in the URL.

  1. In the Configure App box, select the Custom Timers tab.
  1. Press the green Plus icon to add a new timer. The Custom Timer form appears.

  1. Give the new timer a name (for example, something related to the name of your plugin, if not its variable name). Note that the name assigned here will appear for user selection in the Dashboard Edit Panel, Filters tab, Values drop-down.
  2. Give the new timer an optional description.
  3. Initially, the JavaScript Variable option is set in the Value Source field. If you intend to deploy a JavaScript Variable via your site's code, skip to the Define a Custom Timer using Variable section below.

Define Custom Timer Using Navigation Timing

  1. To define a custom navigation timer, select Navigation Timing.
  2. Specify a URL Pattern to match.

  1. Select a corresponding start and end value from among the provided values.

Define a Custom Timer Using Resource Timing 

  1. To define a custom resource timer, select Resource Timing.
  2. Specify a URL Pattern to match.
  3. An optional XPath can also be provided.

  1. Select a corresponding start and end value from among the provided values.
  2. Set the beacon indicator color range in seconds (or accept the default values).

Define a Custom Timer Using Resource Timing - Resource URL

Resource URL matching can be used while defining a resource timer.

  1. To define a custom resource timer, select Resource Timing as the value source type.
  2. Specify Resource URL as the Type Of Query to use. Enter a Resource URL field to use by either explicitly defining a resource by its absolute URL, or by using a wild card to pull the first resource encountered, where there is more than one match.

For example, to set the Resource URL for a specific resource:

http://www.somesite.com/images/image4.gif

If the Resource URL value includes a wildcard at the end, such as:

http://www.somesite.com/images/image*

Then, it will return the first resource that is a match:

http://www.somesite.com/images/image1.gif

 

Define a Custom Timer Using User Timing

A user timer can be created to track the user experience on your site.

  1. To define a custom user timer, select User Timing as the value source.
  2. Specify a URL Pattern to match.
  3. Specify a unique user timer name that will appear in dashboards.

  1. Select a corresponding start and end value from among the provided values.
  2. Set the beacon indicator color range in seconds (or accept the default values).

Define a Custom Timer Using Resource Groups

 

See Resource Groups

 

About URL Pattern Matching

Use the following pattern match examples to aid in defining your URL Pattern.

  • Specify the URL Pattern for the custom timer. For example, http://www.soasta.com/*.
  • Optionally, where an XPath option is shown, provide an XPath value valid for the given URL Pattern.

TIP: When using XPath, the best way to get the XPath is to open developer tools in Chrome (or using Firebug), right click on a node, and choose copy XPath.

 

 

URL Patterns are any regular URL with * used as a wildcard anywhere in the URL. With the query string type URL pattern, mPulse looks for the first matching query string parameter for the page that has a URL match. For example, entering:

*.google.com/*

Will match:

http://www.google.com/
https://www.google.com/
abcdefg://accounts.google.com/
http://www.google.com/?q=hello

But will not match (because / is required in the pattern):

http://www.google.com

Define a Custom Timer using Variable

mPulse supports the use of custom timers written as Boomerang plugins. Your timer can be added to your domain using the Configure App, Custom Timers tab. An example of such a plugin is provided in the sub-section below.

Once written and deployed, the App Admin can use the Configure App dialog box, Custom Timers tab to bind the plugin to an app and create the Value for dashboard users to filter by. You will need the variable name for the given Custom Timer plugin.

A custom timer is deployed in your application or site. Once written, create an mPulse repository object for your custom timer to enable its selection by users in dashboard filters.

  1. To get started, login as the App Admin and click Central > Apps.
  2. Locate your domain in the Apps list (or, perform custom timer setup while creating a new domain).
  3. In the Configure App box, select the Custom Timers tab.
  4. Click the green plus sign to add a new timer.

The Custom Timer form appears.

  1. Give the new timer a name (e.g. something related to the name of your plugin, if not its variable name). Note that the name assigned here will appear for user selection in the Dashboard Edit Panel, Filters tab, Values drop-down.
  2. Give the new timer an optional description.
  1. Assign the same variable name to the timer as you did in your plugin code.
  2. Set the beacon indicator color range in seconds (or accept the default values).

For domains with a custom timer defined, mPulse users can select the Filter tab in the dashboard or widget and then choose the Timer attribute to select this custom timer from among other timers in the Value dropdown.

Navigation Timing Start/End Values

You can define a client-side custom timer using a URL Pattern in tandem with any of the following start and end timers

  • Start Time
  • Redirect Start
  • Redirect End
  • Fetch Start
  • Domain Lookup Start
  • Domain Lookup End
  • Connect Start
  • Secure Connect Start
  • Connect End
  • Request Start
  • Response Start
  • Response End

Example Custom Timer Code for Use with Variable

This example plugin measures something either before or after boomerang loads, and will block beacon firing until the timer is ready. Attach events when you write your own plugin, set flags, etc.

(function() {
BOOMR = window.BOOMR || {};
BOOMR.plugins = BOOMR.plugins || {};

var complete = false;
var boomerang_loaded = false;
var whatever = function() {
// this is where you'd do your work. Attach events, etc.

// the rest of this could be in a different function that's called at some point later
complete = true;
if(boomerang_loaded)
BOOMR.sendBeacon();
};
var add_timers = function() {
BOOMR.plugins.RT.setTimer("custom0", timer0_value_in_ms);
BOOMR.plugins.RT.setTimer("custom1", timer1_value_in_ms);
};

BOOMR.plugins.PluginName = {
init: function(config) {
// when this function is called, you know that boomerang has loaded,
// so maybe set a flag or call a method to set timers.

boomerang_loaded = true;
},

is_complete: function() {
if(complete)
add_timers(); // we can put this here because it's idempotent
return complete;
}
};

})();

Attachments

    Outcomes