What is Single Page Application Tracking

Single Page Application Tracking is a method used to track user behavior that doesn't necessarily involve loading a new page. This is particularly useful for Single page applications (SPAs) or websites where a lot of user activity happens without refreshing the page or navigating to a new one.

If you have virtual navigation on your website, you’ll need to add an AJAX response handler snippet. In most SPA frameworks, the router provides hooks, events, or observables that can be used to execute code in response to navigation changes. For example, if you have a link to a category or product page that loads via AJAX, you need to add this response handler to the category or product page link. This will trigger a log event to Bloomreach so we can track the AJAX product page view.

Please note that Single Page Application tracking is not a type of pixel. Similar to the Global tracking snippet, it provides a way to trigger specific page view types when tracking single-page applications (SPAs).

How to Implement Single Page Application Tracking

Follow the below steps:

1. Map all the global tracking variables in the global tracking snippet.
2. Insert the page view specific tracking parameters in the Global Tracking snippet.
3. Insert the required parameter (orig_ref_url) for the single page application tracking.

Single Page Application tracking Variables Checklist

Implementing Pixel in a Test Environment

If you are implementing the pixel in a test environment (development, staging, UAT, etc.), you must add the test_data variable. When set to “true”, this flags pixel data to be ignored during analytics processing. Read more about the test_data variable here.

Tracking Snippet for Single Page Application

var br_data = br_data || {};
 
// Global tracking parameters ...,
br_data.acct_id = "<Bloomreach Provided Account ID>"; 
br_data.ptype = "<Bloomreach Page Type>";
br_data.title = "<title of current page>";
br_data.domain_key = "<Bloomreach Domain Key>"; 
br_data.view_id = "<Bloomreach View ID>";
br_data.user_id = "<Bloomreach User ID>";
br_data.tms = "<Tag Management system to exclude during transition>"
br_data.debug = true; // remove for production
br_data.test_data = true; // remove for production
 
// Add additional Product, Category, Search or Conversion specific pixel parameters
// here ...
 
 
// this parameter is required on all Virtual Page Loads
br_data.orig_ref_url = location.href;
 
BrTrk.getTracker().updateBrData(br_data);
BrTrk.getTracker().logPageView();