SDK integration for Single page applications

👍

Welcome note

Data hub is our new upgraded platform, which we rolled out in August 2025. It offers a single unified integration for passing your data through to your Bloomreach products.

You have access to Data hub if you've implemented with Bloomreach after August 2025.

Customers who have implemented before August 2025 should follow the existing documentation for Engagement, Discovery, and Clarity.

Intro

Single page application (SPA) is an automatic option that works out of the box which does not require manually enabling.

Integrating single page applications

  • Tracking on single page applications (SPA) is enabled by default.
  • The JS SDK will observe URL changes (including hash changes) and trigger corresponding default tracking (e.g. tracks page_visit if visits: true).
    • When URL change is observed, referrer is set to previous page URL, and location is set to the current page URL.
  • You can configure the SPA behavior in the configuration spa_reloading object
  • You can override the SDK-generated values of referrer and location in special cases.
Event propertyMapped to Discovery param
locationurl
referrerref

Deprecated Discovery params:

  • explicit_referrer
  • orig_ref_url

Tracking page view without URL change

It is recommended to change the URL when filter or sort is applied. If that's not possible, you must track events manually. For example, when a visitor changes search filters, then track view_search_results manually:

brweb.track("view_search_results", {
    search_term: "turtleneck",
    referrer: "https://www.pacific.com/en/catalogsearch/result?q=turtleneck",
    location: "https://www.pacific.com/en/catalogsearch/result?q=turtleneck&colors=Beige"
});

Example: view_search_results API request:

{
    "commands": [
        {
            "name": "customers/events",
            "data": {
                "customer_ids": {
                    "cookie": "d218dfa8-37eb-4cd1-aec0-421ad6ccc5c9",
                },
                "event_type": "view_search_results",
                "properties": {
                    // custom event properties
                    "search_term": "turtleneck",
                    // manual overrides
                    "location": "https://www.pacific.com/en/catalogsearch/result?q=turtleneck",
                    "referrer": "https://www.pacific.com/en/catalogsearch/result?q=turtleneck&colors=Beige",
                    // added by SDK automatically
                    "page_title": "Pacific | Clothing & accessories",
                    "lang": "en-US",
                    "os": "Windows",
                    "browser": "Chrome",
                    "device": "Other",
                },
                "metadata": {
                    "_br_uid_2": "uid=7080827054609:v=cde-v3.38.0:ts=1741771054202:hc=6:cdp_segments=NjY1MGUwZjEzMzdmODlhMmViZTY2Y2FiOjY2NTcyMmI2NGQwYWIyMmQ2NTYzODgwMw==",
                    "domain_key": "Pacific",
                    "view_id": "en_US",
                },
                "timestamp": 1749545984.2786303
            }
        }
    ]
}