Add Engagement to existing Discovery setup

This guide walks you through adding Engagement to a website that already has Bloomreach Discovery tracking running via the legacy Discovery pixel tracker (brtrk.js).

Unlike adding Discovery to an existing Engagement setup, this is a full tracker replacement. The Bloomreach Web SDK takes over tracking for both products, and your existing Discovery pixel snippet and all br_data tracking code are removed entirely. Your existing br_data assignments are replaced by brweb.track() calls using the Web SDK.

If you're starting from scratch with no existing Bloomreach tracking, see Set up Engagement and Discovery instead.

Prerequisites

Before you start, make sure the following have been completed:

  • Your Data hub workspace has been provisioned
  • A Bloomreach Engagement project has been provisioned
  • DNS records are configured for your custom tracking domain (CTD)

What changes

Your current Discovery pixel implementation consists of two parts: the brtrk.js loader script and per-page br_data variable assignments. Both are removed and replaced with a single Bloomreach Web SDK snippet that handles tracking for both Engagement and Discovery.

The table below shows how your existing br_data variables map to the new SDK configuration and tracking calls:

Discovery pixel (br_data)Bloomreach Web SDK
br_data.acct_idNot required — replaced by stream_id
br_data.domain_keytrack.metadata.domain_key in snippet config
br_data.view_idtrack.metadata.view_id in snippet config
br_data.user_idtrack.metadata.user_id (optional)
br_data.debugtrack.metadata.debug in snippet config
br_data.test_datatrack.metadata.test_data in snippet config
br_data.ptype = "product"brweb.track("view_item", { ... })
br_data.ptype = "category"brweb.track("view_category", { ... })
br_data.ptype = "search"brweb.track("view_search_results", { ... })
br_data.ptype = "homepage"brweb.track("view_homepage")
br_data.ptype = "other"brweb.track("view_other")
br_data.ptype = "content"brweb.track("view_content", { ... })
br_data.ptype = "thematic"brweb.track("view_thematic")
BrTrk.getTracker().logEvent("suggest", "submit", ...)brweb.track("search_submit", { ... })
BrTrk.getTracker().logEvent("suggest", "click", ...)brweb.track("suggest_click", { ... })
BrTrk.getTracker().logEvent("widget", "widget-view", ...)brweb.track("widget_view", { ... })
BrTrk.getTracker().logEvent("widget", "widget-click", ...)brweb.track("widget_click", { ... })
BrTrk.getTracker().logEvent("cart", "widget-add", ...)brweb.track("cart_update", { action: "add", ... })

Step 1: Remove the Discovery pixel

Remove the following code from every page on your website:

  • The brtrk.js loader script is the self-executing function that loads the Discovery tracker. It looks similar to this:
<script type="text/javascript">
  (function() {
    var BrTrk = document.createElement('script');
    BrTrk.type = 'text/javascript';
    BrTrk.async = true;
    BrTrk.src = "//cdn.brcdn.com/v1/br-trk-{{BloomReach Account ID}}.js";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(BrTrk, s);
  })();
</script>
  • All br_data variable assignments: Every instance of var br_data = br_data || {}; and all subsequent br_data.* property assignments on any page or template.

Step 2: Install the Bloomreach Web SDK

Follow the full installation and configuration guide for a combined Engagement and Discovery setup: New Engagement and Discovery setup.

This guide covers:

  • The complete tracking snippet with credentials
  • The full snippet configuration reference (domain_key, view_id, default_properties, and all metadata params)
  • Customer identification with brweb.identify()
  • Cookie expiration configuration

Step 3: Replace your Discovery tracking calls

Once the new snippet is installed, replace each br_data block on your pages with the equivalent brweb.track() call. The examples below show the before and after for each common pixel type.

Product page (view_item)

var br_data = br_data || {};
br_data.acct_id = "1234";
br_data.ptype = "product";
br_data.title = "Yellow wide sweater with turtleneck";
br_data.domain_key = "Pacific";
br_data.view_id = "en_US";
br_data.prod_id = "119479";
br_data.prod_name = "Yellow wide sweater with turtleneck";
br_data.sku = "MJ12199-0400";
brweb.track("view_item", {
  title: "Yellow wide sweater with turtleneck",
  product_id: "119479",
  variant_id: "MJ12199-0400",
  price: 49.99
});

Category page (view_category)

var br_data = br_data || {};
br_data.acct_id = "1234";
br_data.ptype = "category";
br_data.title = "Turtlenecks";
br_data.domain_key = "Pacific";
br_data.view_id = "en_US";
br_data.cat_id = "650";
br_data.cat = "Clothes|Sweaters|Sweaters & Cardigans";
brweb.track("view_category", {
  category_id: "650",
  title: "Turtlenecks",
  category_level_1: "Clothes",
  category_level_2: "Sweaters",
  category_level_3: "Sweaters & Cardigans"
});

Search results page (view_search_results)

var br_data = br_data || {};
br_data.acct_id = "1234";
br_data.ptype = "search";
br_data.domain_key = "Pacific";
br_data.view_id = "en_US";
br_data.search_term = "turtleneck";
brweb.track("view_search_results", {
  search_term: "turtleneck",
  catalogs: [
    {
      name: "products_en",
      view_ids: ["en_US"]
    }
  ]
});

Homepage (view_homepage)

var br_data = br_data || {};
br_data.acct_id = "1234";
br_data.ptype = "homepage";
br_data.domain_key = "Pacific";
br_data.view_id = "en_US";
brweb.track("view_homepage");

Search submit event (search_submit)

var searchData = {};
searchData["q"] = "turtleneck";
searchData["catalogs"] = [{ "name": "products_en" }];
BrTrk.getTracker().logEvent("suggest", "submit", searchData, {}, true);
brweb.track("search_submit", {
  q: "turtleneck",
  catalogs: [
    {
      name: "products_en",
      view_ids: ["en_US"]
    }
  ]
});

Suggest click event (suggest_click)

var suggestData = {};
suggestData["q"] = "turtleneck";
suggestData["aq"] = "tur";
suggestData["catalogs"] = [{ "name": "products_en" }];
BrTrk.getTracker().logEvent("suggest", "click", suggestData, {}, true);
brweb.track("suggest_click", {
  q: "turtleneck",
  aq: "tur",
  catalogs: [
    {
      name: "products_en",
      view_ids: ["en_US"]
    }
  ]
});

Widget view event (widget_view)

var widget_view_data = {
  wrid: "abcd123",
  wq: "turtleneck",
  wid: "abc123",
  wty: "mlt"
};
BrTrk.getTracker().logEvent("widget", "widget-view", widget_view_data);
brweb.track("widget_view", {
  widget_response_id: "abcd123",
  widget_query: "turtleneck",
  widget_id: "abc123",
  widget_type: "mlt"
});

Widget click event (widget_click)

var widget_data = {
  wrid: "abcd123",
  wq: "turtleneck",
  wid: "abc123",
  wty: "mlt",
  item_id: "119479"
};
BrTrk.getTracker().logEvent("widget", "widget-click", widget_data);
brweb.track("widget_click", {
  widget_response_id: "abcd123",
  widget_query: "turtleneck",
  widget_id: "abc123",
  widget_type: "mlt",
  item_id: "119479"
});

Widget add-to-cart event (cart_update from a widget)

var widget_atc_data = {
  wrid: "abcd123",
  wq: "turtleneck",
  wid: "abc123",
  wty: "mlt",
  item_id: "119479",
  sku: "MJ12199-0400"
};
BrTrk.getTracker().logEvent("cart", "widget-add", widget_atc_data);
brweb.track("cart_update", {
  widget_response_id: "abcd123",
  widget_query: "turtleneck",
  widget_id: "abc123",
  widget_type: "mlt",
  action: "add",
  product_id: "119479",
  variant_id: "MJ12199-0400",
  product_list: [
    {
      product_id: "119479",
      quantity: 1
    }
  ],
  total_price: 49.99
});

Remaining events

For the full tracking call reference, including view_other, view_content, view_thematic, view_quickview, and the purchase event, see Required events. All events use brweb.track() with the same method signature as the examples above.

Verify your implementation

Use the Bloomreach Tracking Console extension to validate your updated tracking in the browser. It lets you inspect events as they fire, verify that metadata properties are passing correctly, and confirm that both Engagement and Discovery are receiving the expected data.

📘

Note

The Tracking Console extension does not include the pixel validation capabilities available in the Discovery Pixel Validator Chrome extension. Use the Pixel Validator to verify Discovery-specific parameters if needed.

What's next?


© Bloomreach, Inc. All rights reserved.