mPulse captures your custom metrics, timers, dimensions, and performance data elements and objects in an mPulse beacon. Use this beacon to connect your users' experience and your site's key business goals to understand how performance is impacting your business.

Metrics and custom metrics

In mPulse, metrics are non-performance data that are the result of something a visitor did while on your site. For example, a metric might be the percentage of visitors who buy something on your site (conversion rate), or the percentage of visitors who leave your site after viewing only your home page (bounce rate).

Custom metrics are values defined in your web app configuration to track and assess the status of specific business goals that mPulse doesn't automatically capture. Some examples of custom metrics include; conversion rate, revenue, order total, number of items in cart, and number of shares traded. mPulse has built-in system metrics such as bounce rate, session length, and session duration that are automatically captured in your data beacon.

Timers and custom timers

mPulse considers timers to be performance data such as DNS lookup time, SSL connection time, front-end time, back-end time, and page load time. mPulse system timers and custom timers are measured in minutes, seconds, or milliseconds.

For modern browsers, mPulse has built-in system timers to automatically collect performance data for page load time. There are also perceived performance timers that track Time to Interactive, Time to Visually Ready, and LongTasks Time. Timers that are defined by the Navigation Timing API are also collected for browsers that implement it.

Custom timers are values that you define in your web app configuration to identify and track other key performance moments during a page load that mPulse doesn't automatically capture. A few examples of custom timers include time to first image, time to sidebar load, and time to load content served from a specific third-party resource. For older browsers, mPulse estimates front-end and back-end performance timing, and collects custom timers using values from the Resource Timing API and the User Timing API for browsers that implement them.

Dimensions and custom dimensions

Like metrics, dimensions are non-performance data about your visitors' experience that help mPulse categorize page views into useful segments for analysis. mPulse has built-in system dimensions that capture details about the technology used by a visitor including browsers, operating system, device, network, geography, and Internet service provider (ISP).

Custom dimensions are values defined in your web app configuration that mPulse doesn't automatically capture. For example, you can use custom dimensions to identify pages served to visitors that are logged in, visitors that are not logged in or first-time visitors. You might also consider custom dimensions to identify mobile-optimized versus desktop-optimized versions of pages, and capturing the language or regional edition used for the page content.

How your custom definitions are collected in mPulse

Whenever a visitor goes to your site, the mPulse boomerang library looks at the definitions that you set up in your custom metrics, timers, and dimensions. When the library sees a match, it reads and stores the value as part of the boomerang beacon that's sent back to the mPulse collection system, where it's aggregated and displayed on mPulse dashboards.

All mPulse system metrics, timers, and dimensions are calculated at the page view level.

For descriptions of the parameters collected via the boomerang beacon, as well as how they're mapped to other parts of mPulse (for example, S3, Snowflake, and RedShift), see What's in an mPulse beacon?

mPulse system metrics

mPulse provides built-in, system metrics that are automatically captured and stored in the mPulse beacon.

All mPulse system metrics are calculated at the page view level, and are available in the filter bar at the top of the dashboards as shown in this example.

System metrics

This table lists the mPulse system metrics that are common to most dashboards.

Set up a custom metric

Custom metrics give you the tools to help you make connections between your users' experience and your site's business goals, or key performance indicators (KPIs). You can measure, track, and assess the status of specific key business goals that are critical to your organization.

Before you begin

You can define up to 10 custom metrics for your web app configuration based on any measurable value in a page, using these methods by browser:

• JavaScript Variable (all browsers)
• URL Pattern (all browsers)
• URL Pattern with CSS Selector or XPath (Chrome, Firefox, Opera, Safari, iOS, Android 4+)

For best practices on setting up custom metrics, visit Community.

How to

1. In mPulse, click Central.

2. In the left pane, select Apps.

3. From the list, double-click your app, then click Metrics.

   In the Metrics dialog, there are preset (default) formats for the way results appear in the dashboards, which you can override.

4. Click the plus sign to add a custom metric and open the Metrics dialog.

   

5. In the Name field, give the metric a name. Enter a descriptive comment about the metric if you want.

6. From the Value Source menu, select the method to define the metric.

   👍

   For details on how to define a conversion metric, a revenue metric, or a mobile app metric, see the links under Learn more.

7. From the Include on menu, select which beacons you want the metric applied to.

8. From the Data Type menu, chose a data type for the metric.

9. To override the preset dashboard formats at the top of the Metrics dialog, select the checkbox and make your changes.

10. Click OK to save the metric.

Define a conversion metric

Measure and track how long it takes your visitors to convert from casually looking around on your site to completing a purchase.

A conversion metric tells mPulse to track the percentage of sessions (visits) that reach a page view, and confirm that a purchase has been completed. mPulse uses this metric to perform a What-If analysis to help you set goals for better online business results and improve site performance.

There are two ways to set up a conversion metric, either with a JavaScript variable or with a URL pattern to find the page you're interested in. These instructions use a JavaScript variable to define a conversion metric.

🚧

If you choose the URL Pattern method to define a conversion metric, ignore the Type of Query options.

How to

1. If the metric that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For best results, avoid using a regular expression in the URL pattern.

2. In the Variable Name field, enter the variable in your source code that you want to capture. The variable must be encoded globally on the page.

3. From the Data Type menu, select Percentage to capture the rate that your visitors are viewing this page.

   📘

   Percentage is divided by 100, and then multiplied by 100. Decimal places are to the right of a given decimal point. For example: 0 displays 12345%; 1 displays 1234.5%; 2 displays 123.45%; and so on.

4. Scroll to the bottom of the dialog, and select a calculation method:

   • Once per session. Calculates the conversion rate based on the number of conversions per session. For example, your site has 10 visitors (sessions), and 2 of those visitors purchase a total of 6 items, while the other 8 visitors do not. The conversion rate for your site is 20%.

   • Once per page. Calculates the conversion rate based on the number of conversions per page.

   📘

   If you choose this option and a visitor purchases the same item more than once, the conversion rate will be higher than 100%.

5. To override the preset dashboard formats at the top of the dialog, select the checkbox and make your changes.

6. Click OK to save the metric.

Define a revenue metric

Track your revenue and the cumulative value of sales over a period of time.

A revenue metric tells mPulse to track the cumulative value of sales over a period of time, and then perform a What-If analysis to help you set goals for better online business results and improve site performance.

There are two ways to set up a revenue metric, either with a JavaScript variable or with a URL pattern and a CSS selector or XPath.

Whether you use the JavaScript variable or URL pattern with the CSS selector or XPath to capture a currency value, mPulse takes the string of text it finds, strips out non-numeric values, and passes on just the numbers in the beacon that's sent when the page load is complete. For example, if the page has $123.45 on it, mPulse sends 12345. When using currency values, make sure that the values presented to mPulse are consistently using the same number of decimal points.

These instructions use the URL Pattern method and a CSS Selector to define a revenue metric.

For additional support when defining custom metrics, visit Community or contact your account team.

How to

1. In the URL Pattern field, enter the URL that you wan to match.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. From the Type of Query menu, select CSS Selector.

3. From the page, find the currency value that you want applied to the metric, copy the element's selector, and paste it in the CSS Selector field.

   For details, see Capture a CSS Selector or XPath, below.

4. From the Include on menu, select All non-XHR beacons. This tells mPulse to collect page view beacons for this metric.

5. From the Data Type menu, select Currency.

   📘

   Currency is displayed using a currency symbol. Decimal places are from right to left. For example: 0 displays $12,345; 1 displays $1,234.5; 2 displays $123.45; and so on.

6. To override the preset dashboard formats at the top of the dialog, select the checkbox and make your changes.

7. Click OK to save the metric.

mPulse system timers

mPulse provides built-in, system timers that are automatically captured and stored in the mPulse beacon.

mPulse system timers are available in the filter bar at the top of the dashboards as shown in this example.

System timers

This table lists the mPulse system timers that are common to most dashboards.

Akamai middle-mile CDN system timers

Set up a custom timer

You can define timers to identify key performance moments during a page load such as time to first image, time to sidebar load, and time to load content served from a specific third-party resource.

Before you begin

mPulse supports either client-side URL pattern matching defined as part of your app, or as a variable in your source code written as a boomerang plug-in.

You can define up to 10 custom timers for your web app configuration based on any measurable value in a page, using the following methods by browser:

• JavaScript Variable (all browsers)
• Navigation Timing (Chrome, Firefox, Internet Explorer 9+, Opera, Android; experimental on Safari & iOS)
• Resource Timing defined with CSS Selector or XPath (Chrome only)
• Resource Timing defined with Resource URL pattern (Chrome and Internet Explorer 10+)
• URL Timing (Chrome and Internet Explorer 10+)
• Resource Groups (all browsers)

How to

1. In mPulse, click Central.

2. In the left pane, select Apps.

3. From the list, double-click your app, then click Timers.

4. Click the plus sign to add a custom timer and open the Timers dialog.

   

5. In the Name field, give the timer a name. Enter a descriptive comment about the timer if you want.

6. From the Value Source menu, choose the method that you want to use to define the timer.

   📘

   For details on using these methods, see the links under Learn more.

7. From the Include on menu, select which beacons you want the timer applied to.

8. In the Indicator Color Ranges section, color ranges and time indicators are set for you. You can change these if you want or use the presets.

9. Click OK to save your custom timer.

Define a timer with JavaScript Variable

Capture performance data of a specific time in the page load, using simple math between two timing points.

How to

1. Define a JavaScript timing variable in your source code that captures a specific time in the page load, and assign it a name.

2. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

3. In the Variable Name field, enter the name of the JavaScript timing variable you defined in your source code.

Define a timer with Navigation Timing

Capture performance data of certain timing points with in the page load based on existing Navigation Timing API methods.

The Navigation Timing API is provided in all modern desktop browsers and most Android mobile browsers.

How to

1. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. From the Start and End menus, select the corresponding timing attributes that you want applied to the timer. You can define a client-side custom timer using a URL pattern with any of these values.

   • Connect Start / Connect End
   • Load Event Start / Load Event End
   • DOM Complete
   • DOM Content Loaded Event Start / DOM Content Loaded Event End
   • DOM Loading
   • DOM Lookup Start / DOM Lookup End
   • DOM Interactive
   • Fetch Start
   • Navigation Start
   • Redirect Start / Redirect End
   • Response Start / Response End
   • Request Start
   • Secure Connect Start
   • Unload Event Start / Unload Event End

Define a timer with Resource Timing

Capture performance data about a specific resource, such as objects, images, and CSS files, based on existing Resource Timing API methods.

How to

1. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. From the Type of Query menu, select a method to locate the resource.

   • To use CSS Selector or XPath, go to the page, copy the selector or XPath and paste it in the corresponding field in the dialog.

     For details, see Capture a CSS Selector or XPath, below.

   • To use Resource URL, enter the absolute URL of the resource in the Resource URL field. To collect the first resource found in the page that matches, use a wildcard.

     For example, to collect a specific resource, the Resource URL might look like this:

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

     If you include a wildcard at the end of the Resource URL, like this:

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

     then mPulse collects the first resource found that matches, such as:

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

3. From the Start and End menus, select the corresponding timing attributes that tell mPulse when to begin and when to stop collecting performance data for the resource.

   • Connect Start / Connect End
   • DOM Lookup Start / DOM Lookup End
   • Fetch Start
   • Page Start Time
   • Redirect Start / Redirect End
   • Resource Start Time
   • Response Start / Response End
   • Request Start
   • Secure Connect Start

Define a timer with User Timing

Capture performance data with a timing mark or a timing range in a page based on existing User Timing API methods.

The User Timing API is only available in a few browsers, such as modern versions of Internet Explorer and Chrome. It allows you to capture performance data between the value of performance marks and the value of performance measures. It's similar in concept to using JavaScript timing points, but a much simpler way to add points without having to expose or add substantial amounts of additional JavaScript to your site.

How to

1. Define either a timing mark (performance.mark) to capture a specific timing point in a page or a timing measure (performance.measure) to capture a range of time in a page. For an example of how a performance.markis defined in a script, see User Timing.

2. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example- abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

3. In the User Time Name field, enter the name of the timing mark or the timing measure that you defined in your source code. mPulse automatically detects the difference between performance marks and measures. It assumes that you want to know the time from the beginning of the page load until the timer itself is found on the page.

Define a timer with Resource Groups

Capture performance data of critical resources on your site by group.

Like Resource Timing, this method is based on existing Resource Timing API methods that specifically target the time it takes for a resource on a page to load such as objects, images, and CSS files. For each resource in the group, you can define the time by capturing the resource in the page with either a CSS selector, an XPath, or a specific name or name pattern (Resource URL).

How to

1. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. At the mid section of the dialog, in the URL Pattern field, enter the absolute URL of the resource. To collect the first resource found in the page that matches, use an asterisk as a wildcard.

   For example, to collect a specific resource, the Resource URL might look like this:

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

   If you include a wildcard at the end of the Resource URL, like this:

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

   then, mPulse collects the first resource found that matches, such as:

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

3. From the Measure from menu, choose the starting point for the measurement:

   • Navigation Start captures the time just before a new page is requested. It's initiated when a visitor clicks a link on your site or presses Enter after entering a URL in the browser bar.
   • First Resource captures the time when the first resource on the page is encountered (for example, http://www.example.com/images/image1.gif).

4. From the Include on menu, choose the navigation that you want the resource collected on.

   • SPA Soft: All of the interactions on the page that occur after the initial page load such as an address bar change.
   • SPA Hard: The first page load, which includes; all static HTML, JavaScript, CSS, and the SPA framework itself (for example angular.js).
   • Onload (for non-SPA sites): The browser downloads all of the resources on the page.
   • XHR: An XMLHttpRequest that indicates network activity. For example, the page's view is being updated or it could be a periodic poll like a scoreboard update.

5. From the Selection type menu, choose a method to locate the resource.

   • To use a CSS Selector or XPath, go to the page, copy the selector or XPath, and paste it in the Selection value field.

     For details, see Capture a CSS Selector or XPath, below.

   • To use Resource URL, enter the absolute URL of the resource in the Selection value field, or use a wildcard to collect the first resource found in the page that matches.

     For example, to collect a specific resource, the Resource URL might look like this:

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

     If you include a wildcard at the end of the Resource URL, like this:

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

     then, mPulse collects the first resource found that matches, such as:

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

6. Click the plus sign to capture more resources in the page for this group.

📘

mPulse only captures the resource in the first URL pattern that matches the current page.

mPulse CORS and Resource Timing

Akamai mPulse can capture element-level performance details during each page load. When viewed in the waterfall analysis dashboard, you can see exactly when every HTML, image, style sheet, and JavaScript asset is being requested and how long they take to load. This is very useful information when diagnosing performance problems on a page. As you use waterfalls, however, you may notice that some elements on a page give you details on component timings such as DNS lookup time, TCP connect time, SSL connect time, request time, and response time, whereas other elements just have a single "total time" value.

The Resource Timing API

The values collected by mPulse come from the W3C Resource Timing API, a standard JavaScript API that is implemented in modern web browsers. Because the information is exposed through JavaScript, the Resource Timing API is subject to the cross-origin security limitations that browsers enforce on scripts. This limitation means that if your site uses multiple domains (such as 'www' and 'images') or has content served from both secure and non-secure servers, you will only be able to get component-level details for requests from the same server/domain that served the base document request, unless you change some settings. To get component-level details for elements on a different origin server than the base page HTML server, you'll need to have headers configured to allow Cross Origin Resource Sharing (CORS). Specifically, you should add the following HTTP header to all requests:

Timing-Allow-Origin = "Timing-Allow-Origin" ":" origin-list-or-null | "*"

If you have third-party tags/elements on your pages, you will need to have those service providers add this header to their elements responses in order to get component-level details in the mPulse waterfalls for those page assets as well.

Security Consideration

Using a wildcard "" header for Timing-Allow-Origin is relatively safe. It does not expose the same security concerns as using the Access-Control-Allow-Origin: header, for example. The only thing that using Timing-Allow-Origin: * allows is for is JavaScript from another site to get a breakdown of DNS, TCP, Request and Response times for content on third-party domains.

That being said, if you want to use a more restricted Timing-Allow-Origin, you can have your site respond with the same value of the Origin HTTP request header. The Origin HTTP request header is added to any request for third-party domains. So if a browser requests content from a server with:

Origin: http://www.example.net

You can include this HTTP header:

Timing-Allow-Origin: http://example.net/

If however, someone requests content from:

Origin: http://community.akamai.com/

You can skip responding with the Timing-Allow-Origin header.

mPulse system dimensions

mPulse provides built-in, system dimensions that are automatically captured and stored in the mPulse beacon.

mPulse system dimensions are available in the filter bar at the top of the dashboards. Dimensions are categorized in a variety of ways such OS families as shown in this example.

System dimensions

This table lists the mPulse system dimensions that are common to most dashboards.

Set up a custom dimension

Filter your data on criteria that you define, such as user characteristics. For instance you can differentiate premium customers from casual visitors to make sure that your paying customers are having a good experience on your site. With custom dimensions, you can identify the data center or server that served up the page so you can easily troubleshoot performance issues if they begin to appear.

Before you begin

When setting up a custom dimension, consider these best practices:

• Unlike metrics, dimensions are not limited to numeric and Boolean values. You can use text strings as well.

• For performance and manageability, use a small number of values per each dimension (for example, under 100 values). All values appear in the filter list on the dashboards, and it might be difficult to see a large number of values.

• Before implementing custom dimensions, contact your account team to confirm that the number of values you define will give you a satisfactory experience.

You can define up to 10 custom dimensions for your web app configuration based on any measurable value in a page, with these methods:

• XPath or CSS Selector
• URL
• Query Parameter
• Cookie
• User Agent
• JavaScript Variable

How to

1. In mPulse, click Central.

2. In the left pane, select Apps.

3. From the list, double-click your app and then click Dimensions.

4. Click the plus sign to add a custom dimension and open the Dimensions dialog.

   

5. In the Name field, give the dimension a name. It's a good idea to add a descriptive comment that explains what the information is that you're capturing and how you're capturing it, or what you expect the pattern to look like.

6. In the Type section, select a data type.

   • Text: Some text on a page; can be any alphanumeric value.
   • Numeric: A count on a page such as the number of advertisements.
   • Boolean: A 0 or 1 for Boolean (captured as a Numeric).

🚧

Javascript variable names can be used to configure Page Group definitions, custom timers, custom metrics, and for the A/B Testing variable. The only allowed characters in a JS variable name are [a-zA-Z0-9_.$] and the variable must start with [a-zA-Z_$] and cannot end with the "." character. More complex Javascript variables such as dataLayer[0]['pageName'] will not work.

7. From the Value Source menu, select the method that you want to use to define your custom dimension.

   📘

   For details on using these methods, see the links under Learn more.

8. From the Include on menu, select which beacons you want the dimension applied to.

9. To set up an alias map that translates values collected in the browser to user-friendly names that appear in the dashboards and alerts:

10. Under Alias Map, click the plus sign to add an entry.

11. In the Value field, enter a value collected in the browser.

12. In the Alias field, enter the user-friendly name for the value.

13. Click the plus sign to add another entry to the map.

14. To remove an entry, click the X.

15. Click OK to save your custom dimension.

Define a dimension with XPath or CSS Selector

Capture the value of a DOM node element in a page.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. Go to the page, copy the selector or XPath and paste it in the corresponding field in the dialog.

   For details, see Capture a CSS Selector or XPath below.

Define a dimension with URL

Capture a value from a portion of the URL, using a regular expression.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example- abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. In the Regular Expression field, enter the portion of the URL that you want to capture.

   For instance, to capture the portion of the URL that identifies the product "hammer " in "product/hammer/ball-peen " the regular expression might look like this: /product/(.+)/.

3. In the Replacement field, enter the parameter (for example, $1) to represent the value captured in the regular expression.

Define a dimension with Query Parameter

Capture the value of a query string parameter.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. In the Parameter field, enter the name of the query parameter that contains the value that you want to capture.

3. In the Replacement field, enter the parameter (for example, $1) to represent the value captured in the regular expression.

Define a dimension with Cookie

Capture a portion of a cookie value, using a regular expression.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. In the Cookie Name field, enter the cookie's name (for example, "details").

3. In the Regular Expression field, enter the regular expression that captures the cookie's name value.

   For instance, to capture the name from a cookie where the cookie's name is "details " and the cookie's format is: "campaign:; " the regular expression might look like this: campaign:(.+);.

4. In the Replacement field, enter the parameter (for example, $1) to represent the value captured in the regular expression.

Define a dimension with User Agent

Capture a portion of the user agent (for example, a browser) using a regular expression.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.

   📘

   For the best results, avoid using a regular expression in the URL pattern.

2. In the Regular Expression field, enter the portion of the user agent that you want to capture.

   For instance, to capture a retailers specialty kiosk ("1234 ") in this format: "kiosk-code:1234 " the regular expression might look like this: kiosk-code:(.+):.

3. In the Replacement field, enter the parameter (for example, $1) to represent the value captured in the regular expression.

Define a dimension with JavaScript Variable

Capture the value of a JavaScript variable in a page's source code.

How to

1. If the dimension that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.

   📘

   Acceptable characters of the JavaScript value are: upper and lower case alphanumeric characters (a-z, A-Z), space, underscore (_), dash (-), and period (.).

   📘

   You can use an asterisk as a wildcard to replace one or more characters (for example, /example/example-abc/). mPulse looks for the first matching query string parameter for the page that has a URL pattern match. For the best results, avoid using a regular expression in the URL pattern.

2. In the Variable Name field, enter the variable that you want to capture. The variable must be encoded globally on the page.

Capture a CSS Selector or XPath

Use CSS Selector or XPath to locate an element or resource that you want to collect performance data on in a web page.

Before you begin

mPulse does not perform currency conversion. If you allow purchases in multiple currencies, and those numerical values are not kept in separate variables or accessible by separate CSS Selectors or XPath, mPulse may report incorrect values. For these situations, create a JavaScript variable on the page with the order value that represents the appropriate currency (for example, converted to USD, EUR, JPY or whatever makes sense for your business.) instead of using a CSS Selector or XPath.

The value applied is the value of the element within the DOM node after stripping out everything except number characters.

How to

1. Open the page in a browser (for example, Chrome), right-click the element that you want to capture, and select Inspect to open the developers tools.

   

2. From the Elements tab, right-click the element and select either Copy > Copy selector or Copy XPath.

   

3. To view the value of the element, click Console. After the prompt, type $, select the element in the pop up, and press Enter.

   

4. Expand the element, until you see the innerHTML value.

   

How to calculate back-end and front-end times

A key component of the user's page load experience includes how fast the server can dynamically generate or fetch the base document after a new page request. In mPulse, that timer value is called back-end time.

If the median value for back-end time is high, then you definitely know that you have a problem that impacts the customer experience. However, if the back-end time is good, there could still be other issues on the page, including server-side performance issues that are happening at other parts in the page load. The portion of the page load time that follows the back-end time is what mPulse calls front-end time. That timer includes all the remaining time to load the page, including fetching both static and dynamic assets on the page, delays processing Javascript or CSS, time to initialize plug-ins like Flash, and other browser-side delays until the onLoad event has fired.

Calculating back-end time

The value assigned to back-end time for a given beacon (page view) depends on whether the browser being used supports the W3C Navigation Timing standard. For browsers that support Navigation Timing, the value reported for back-end time is the time from navigationStart to responseStart. For legacy browsers that do not support the navigation timing standard, the value is the time from the onBeforeUnload event or the onClick event (whichever is later) to the OnUnload to OnPageHide event (whichever fires). If the page view is the first page in a session, and there are no onBeforeUnload or onUnload events to base a timing from, mPulse calculates an estimated value based on a statistical sample of all back-end times observed so far and the time it takes boomerang to load on the page. For more information on the browsers that support navigation timing, see the Navigation Timing API.

Calculating Front-End Time

Front-end time for a beacon is the time from the calculated back-end time to the end of the page load (when the onLoad event fires on the page.)

Have you ever looked at your front-end, back-end, and total page load time medians, and wondered why they do not add up?

The explanation is basic statistics. Medians cannot be compared across different data sets. In this case, the Total, FE, and BE timers are separate data sets, and the median for each is the middle point in each set independent of the other sets.

Example 1

• Total = 1.17s
• Back-End (BE) = 625ms
• Front-End (FE) = 1.74s.

As a result, the FE + BE > Total.

Example 2

Assume a case with 5 beacons with the following times:

You have the following result:

• For each beacon, the sum of BE and FE always add up to total.
• For each timer, the middle element (median) across all beacons ends up being on a different beacon for each one of them.
• For each timer, the 85th percentile (pctl) across all beacons ends up being on a different beacon for each one of them.