Single Page Application Tracking
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:
- Map all the global tracking variables in the global tracking snippet.
- Insert the page view specific tracking parameters in the Global Tracking snippet.
- Insert the required parameter (orig_ref_url) for the single page application tracking.
Single Page Application tracking Variables Checklist
| Variable | Value type, example | Description |
|---|---|---|
| orig_ref_url | string, "https://myshop.com" | The URL from which it is originally referred. Only to be used in Virtual Page Views for the Ajax request. Pixel requires the parameter to be sent on all virtual page loads. |
| user_id | string, "947345478564" | If you track users via a universal customer ID, populate this parameter with that ID. This should be an anonymized string. It should not contain the user's email or other personally identifiable information. This parameter is only required if you wish to identify your users via a universal customer ID. This will allow Bloomreach to recognize users in a way that is aligned with your system for various personalization features. The correct implementation of this parameter can vary for different user scenarios. Learn what parameter value you can set for each scenario in the user_id recommended implementation article. |
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();
Updated 9 months ago