Summary:
- Video Tutorial (Overview)
- Where to Configure Page Naming
- Creating Your First Page Naming Rule
- Examples
- Special Considerations
- Additional Notes
Video Tutorial (Overview)
In this video, Mark walks you through the basics of page naming in Blue Triangle, including how to create and configure rules.
Where to Configure Page Naming
To get started with Page Naming in Blue Triangle, go to Settings and under Site Configuration choose “Page Naming.” This is where you can create and manage your standard page naming rules. Page naming for SPA or Virtual Turn pages can be done with SPA Page Naming and Mutation Observer Page Naming. For more information on those, please see the related guides.
Creating Your First Page Naming Rule
When you arrive on the Page Naming page for the first time you’ll see an empty table. If the Blue Triangle tag is deployed on your site, you will see the table at the bottom of the page filled with URL’s of observed real user page views. Otherwise, both tables will be empty.
To get started we are going to create a page name rule. We’ll go through each of these fields.
Configuration: Options and Fields
First, define the Traffic Segment. We typically use eCommerce as the default, but this can be anything that makes sense for this page name. Next, fill in the Page Name – in the example above we’ve configured the Product Detail page.
Match Type defines the method for the page naming rule. The options are:
- URL Search
- JavaScript Code
The URL Search option should be used if page naming can be done with a URL sub-string. This is one of the more common ways page naming can be done. For example, let's say your website categorizes all product pages in a directory “/product/”. This means we can use a URL Search match type, and set the partial string to “/product/”. Now that we have our partial string set, this is everything we need for a basic page name configuration. But first, let’s touch on the other options here.
JavaScript Code allows you to name pages dynamically based on the current value of a JavaScript variable or the result of a JavaScript function. Note: When using this Match Type, always be to sure to validate the variable or code snippet in the browser console before entering into the form. Any syntax errors in this code snippet are likely to cause significant side effects.
While there are other page naming configuration pages for SPA and Virtual Turns, if you want to measure a single AJAX call, you can do that by enabling the option Use Partial String Match on Ajax. With this set, the Blue Triangle tag will monitor and record the performance of the AJAX calls with URL’s matching the set partial string. Although it’s available here, we recommend keeping your SPA and Virtual Turn page naming rules separate on the different pages in the portal, especially if you have many Virtual Turn pages to capture.
The next option is Priority. This simply defines the order this rule should be placed in. The Page Naming rules are checked in order of priority, meaning the lower the number the higher priority. Once a rule is matched, none of the other rules are checked.
Brand Value allows you to define a dollar amount for a page view that matches this rule. For example, if a user visits a subscription confirmation page. Brand analysis can be done in the Business Analytics module. Depending on your account with Blue Triangle, this may not be available.
Lastly, leave a Comment for context about what the rule does. Here we’ll say “This rule matches all Product Detail Pages.”
At the bottom of the screen, click Save. You’ll see the rule fill into the table at the top of the screen. You can see the details of the rule and can edit or delete it from here.
Examples
URL Search
Similar to our example above, this rule is for a PDP page. We're using the URL Search Match Type and the partial string we've specified is "/p/" because we know our products are all categorized on the site into a directory /p.
JavaScript Code - Variable
As the name suggests, the JavaScript Code Match Type can be a JavaScript variable or any JavaScript code. We’ll start with an example with a JavaScript variable. It’s common to have a variable on the page that holds the name of the page – this could be a dataLayer variable, or any other variable you know of. So let’s say we use Tealium for tag management on our site. Tealium typically has a variable called utag_data and our site’s page name variable is inside there as utag_data.pageType. Now, once you have the variable be sure to test and validate by opening up the dev console in your browser, putting the variable in and hitting enter. Be sure to do this on a few different pages on the site to thoroughly test.
Once you've validated the variable, go ahead plug it into the form. When you choose the JavaScript Code Match Type, you’ll notice the page name changes to auto – this means the result of the JavaScript will be the page name. If the JavaScript variable or code is not defined, this page name rule will be passed, just like a URL Search Match Type where the partial string is not in the URL.
Now, because this rule is going to accurately capture most of our page names, we're going to set the priority as the highest in the list (30 in this example). The number is arbitrary - what ultimately matters is the order the rules are checked (in order of priority ascending).
Lastly, we've added a comment for added context to anyone viewing this configuration in the future – “This rule should work for all pages Tealium is loaded.”
JavaScript Code - Function
Here we're going to create a rule using JavaScript Code. A good example of this is something we often use for the Home Page. The following example snippet checks if location.href is "https://www.bluetriangle.com/," and if it is it'll return the string "Home."
(function(){if(location.href == "https://www.bluetriangle.com/"){return "Home"}})()
If we go over to https://www.bluetriangle.com/, open the dev console, plug in this snippet and hit enter we can see this is working. On another page that's not the Home Page, we'll see this does not work (as expected).
Once we have it thoroughly tested, we can copy and paste this snippet into the JavaScript Code field in the page name form.
Considering the other examples we've done, we chose to set the priority for this rule so it runs after the rule using the telium page name variable. The JavaScript Variable rule is going to do the majority of the page naming work, but in the event this variable is not available or otherwise not defined, we can rely on this rule to capture the Home Page.
Please note, do not enter or paste a JavaScript function into the JavaScript Variable field on the JavaScript Variable tab when creating a page name rule. If there are errors, they will be highlighted in red.
Special Considerations
We recommend configuring your page naming rules before deploying the tag, this way your data is ready to use as soon as it’s available. However, it’s okay to deploy the tag first and start doing page naming while the data comes in. However, doing this will leave you with some Unnamed Pages as you are working through the rules. If URL’s are hit that do not match any rules, they will appear in the portal with the name “Unnamed_Pages.” Once the tag is on the site, URL’s of real user page views will appear in the table below the page name rules. If pages are not named correctly you will be able to tell from that table.
Additional Notes
- The JavaScript snippet used in the example above can be written more effectively as:
-
(function(){if(location.pathname=="/"){return "Home";}else{return void 0;}})() - Doing this allows for the possibility of query string parameters in the URL of the Home Page.
-
- We have largely deprecated the "Use Partial String Match on Ajax" part of Standard Page Naming as it predates the SPA Page Naming page. When troubleshooting it can be difficult to remember to look for virtual turn rules in the Standard or Regular Page Naming page. We recommend using the SPA Page Naming and/or Mutation Observer Page Naming exclusively for virtual turn page name rules.