SPA Page Naming

Summary:

• Video Tutorial (Overview)
• What is SPA Page Naming?
• Where to Configure SPA Page Naming
• Creating Your First SPA Page Naming Rule
  • Configuration Options and Fields
• Examples
  • One request - Ajax URL Substring
  • One request - Ajax URL Substring + Page URL Substring + POST Data Substring
  • Multiple requests - Ajax URL Substring + POST Data Substring
• Exceptions, Best Practices and Troubleshooting

Before continuing, make sure you’ve gone through the article on Standard Page Naming. Some of the configuration concepts are the same and it can be much easier digesting with that prior knowledge.

Video Tutorial (Overview)

In this video, Mark walks you through how to configure page naming for SPA and Virtual Turn pages, including a few examples.

What is SPA Page Naming? 

On an SPA site when you navigate to a new page, the browser does not fully load a new page – only the content and elements on the page change. Because of this, Blue Triangle tracks web page performance a little different than a standard page load. On the SPA Page Naming page, you can name your spa pages by defining the starting and ending ajax or fetch calls that make up the page transition, which also provides the start and end timer for tracking page load time. 

Where to Configure SPA Page Naming

You can find the SPA Page Naming page inside of the Settings and under the Site Configuration section. There is one other place for page naming called the Mutation Observer Page Naming page, and you can learn more about that in the related guide. SPA Page Naming is where you can do the majority, if not all, of your page naming for your SPA and/or virtual turns.

Creating Your First SPA Page Naming Rule

After you click "Create SPA Page Name" you'll arrive on the SPA page name configuration screen. The top half of the page here is general configuration, and the bottom is where you can define the start and end for your SPA/Virtual Turn page.

Configuration Options and Fields

As you start to create your first spa page naming rule, first define the Traffic Segment, Page Group and Page Name for this SPA page name rule. In the example shown we're using eCommerce for the Traffic Segment, just like standard page naming. For the Page Group, if you don’t already have a strategy for this, we recommend using a Page Group specifically for Virtual Turns. The same goes for the Page Name - we recommend adding “-VT” to the end of the name, or any unique identifier so you can be sure you do not mix regular and virtual turn page loads in your reporting.

Next is Priority and if you haven’t seen the Standard Page Naming guide, the priority dictates where this page name rule falls in the list. The Page Naming rules are checked in order of priority: the lower the number the higher priority. Once a rule is matched, the remaining rules in the list are ignored. You can see how this becomes important as you create more rules.

Request Type is another important field. The options are XHR (or ajax) and fetch, and this specifies the type of requests that will mark the start and end of a virtual page turn. If the calls are ajax you can leave it alone but if they are fetch calls these are tracked slightly differently so you’ll need to define that using the Request Type selector.

Now moving down to the bottom half of the screen what you will see is the SPA Start configuration on the left and the SPA End configuration on the right. In each section you will have 3 fields you can use to define the start and end of the virtual page turn.

Start/End Page URL Substring - Define a sub-string of the page URL that is required for this in order for this rule to trigger.

Start/End Ajax URL Substring - Define a sub-string of an ajax call that is required in order for this rule to trigger.

Start/End POST Data Substring - Define a sub-string of the *raw POST data that is required in order for this rule to trigger.

• *If you're working in Chrome DevTools, POST data may be auto-formatted. Be sure to use the raw form of the JSON and not a beautified version.

Lastly, leave a Comment to give some additional context to the configuration. Once you're ready, click Create and you'll see your new rule appear in table:

Examples

One request - Ajax URL Substring

For this example let's say we’re going to define the SPA page name rule for the PDP page, and this pdp page turn occurs with just one ajax call. In this case all we need to do is take a unique sub-string from that ajax URL and place it into the Start Ajax URL Substring field and the End Ajax URL Substring field.

As mentioned above, these rules also act as performance timing markers. The performance timing will begin at the start of the request that matches the SPA start configuration, and the timing will end at the response end time of the request that matches the SPA end configuration.

One request - Ajax URL Substring + Page URL Substring + POST Data Substring

With this example, we'll go into a little more detail on the additional fields in the start/end configuration.

This rule will be for the "Add to Cart" button. So we’ll name the page “Add to Cart – VT.”

And like before, this is only one ajax call that we’ll be measuring. So our Start Ajax URL Substring is going to be “add-to-cart," and the same will go in the End Ajax URL Substring.

This time we are also going to specify a Start Page URL Substring. This is the URL of the page that the end-user is currently on. We know the add-to-cart ajax call happens on the product page so here we can fill in "product-page," just as an example. And we’ll do the same for the End Page URL Substring. Using this additional measure allows you to more carefully specify the exact conditions required for the SPA page turn to happen.

Lastly, we'll be even more explicit by defining a Start/End POST Data Substring. Here we can add a substring of the post data found in the add-to-cart ajax call.. Another important point to be made on this configuration is: when you specify more than one field in the start and end configuration, each much be true in order to capture the page name and timing, and more specifically each must be true at the time the ajax occurs.

Let’s say our add-to-cart ajax is a JSON POST and it contains this substring:

“action”: “add-to-cart”

We can add this string to the Start POST Data Substring field, and we can do the same for the End POST Data Substring because we know this page turn happens with just one ajax call.

So this configuration requires that each of the start and end page url, ajax url and post data substrings must match in order for this rule to be triggered and the page name and performance metrics to be captured.

Multiple requests - Ajax URL Substring + POST Data Substring

The last thing we’ll touch on is an example where the start URL and end URL are different. It's quite possible this is the most common scenario when you go in to create your SPA rules, depending on your site and analytics needs of course. Generally, this is when the page turn requires more than one ajax call. Here you will need to identify which ajax call initiates the page turn and which call marks the end of the page turn.

So let’s say this rule is for the search results page. The user types something into the search bar and clicks the button to search - this action initiates a set of ajax calls that make up the search results virtual page turn. In this example we’ll say our page starts on the call “search” and ends at the call “content.” And just like the rule before let’s say the search call is a JSON POST that contains the string:

“action”: “search”

Now, in this scenario the “content” call is an HTTP GET request so we won’t need to put anything into the END post data substring field. Here's what this configuration would look like:

You can repeat these steps until you have configured rules for all of your SPA and Virtual Turn pages.

Exceptions, Best Practices, and Troubleshooting

The following list includes some important notes to consider as you are creating your SPA Page Naming rules:

• Currently, you cannot use JavaScript variables or code to create variable page names.
• You may have code configured in your site settings that sets the Traffic Segment for the page name as data is collected. This code only works with standard page naming and Traffic Segments must be  set manually within the SPA Page Naming configuration.
• The Request Type cannot be different between the SPA Start and SPA End configurations. In other words, you cannot can do this for pages starting on an XHR and ending on a Fetch, or vice versa.
• When checking a substring for a URL match, the slash at the root of the domain is not included in what our tag searches for, e.g. in the following URL only the bold characters are available for URL string match “https://www.bluetriangle.com/products/this-product”
• SPA Start and SPA End can absolutely be the same call. This is used in the first two examples above.
• It's best practice to use SPA Page Naming for all SPA or Virtual Turn rules, if possible.
• Each of the three fields - start page URL, start Ajax URL, and start post data - if defined, must all be true and true at the time of the ajax/fetch call in order for the rule to work.
• Performance timing starts at request start and ends at response end and appears as the "onload" metric in the portal
• If there are multiple of the exact same calls on the page, our tag will detect and measure the first.
• Post data must be the raw post data, not a parsed version like you’ll see in chrome dev tools, for example.
• We recommend naming SPA/Virtual Turn pages with “-VT” appended, because it provides optimal analysis with our revenue and performance reporting and analysis. You do not want to mix virtual turns and standard page turns.
• Requests in iframes cannot be used. Our tag cannot detect content in iframes.

If you've created a rule and it doesn't appear to be working, be sure to review the list above to ensure you are not running into an exception. Beyond that, there are a few other key points to validate related to your site configuration:

• In the site settings, AJAX Collection Settings needs to be ON and set to Native.
• If other JavaScript is overwriting the XHR prototype before our tag loads, this will disrupt our ability to track SPA and virtual turns on your site. If this is the case, we recommend reaching out to the party responsible to see if this functionality can be removed such that our tag may fully function.