Front-end Integration

Suggest Edits

Integrating your business with Bloomreach Engagement Frontend Software Development Kit (SDK) is the first step in getting closer to your customers. Once integrated, you will immediately start getting data about your customers' on-site behaviour.

Your responsibility	Bloomreach's responsibility
1. Tracking snippet and Service worker deployment 2. Tracking code deployment	1. QA: Ensuring correct data flow and touch points coverage

The following event tracking types are available.

Type	Description
System events	You will leverage Bloomreach Engagement's JS SDK functions to ensure tracking of system events, which are a group of events available to all Bloomreach Engagement customers by default without the need for a specifically-tailored integration (e.g. first_session, session_start, page_visit, campaign).
Custom events	Custom events include the most commonly observed events in online stores, namely view_item and cart_update. By deploying tracking code to your page, you will ensure pushing of the necessary data to Bloomreach Engagement. You may deploy the tracking code to execute custom JS snippets on the website. In addition, an “opt_in” event is tracked on the subscription touchpoints on your website. This can be during checkout, registration or within a footer subscription box. However, double_opt_in is recommended to be tracked via backend (API) rather than frontend (JS-SDK).

Type

Description

System events

You will leverage Bloomreach Engagement's JS SDK functions to ensure tracking of system events, which are a group of events available to all Bloomreach Engagement customers by default without the need for a specifically-tailored integration (e.g. first_session, session_start, page_visit, campaign).

Custom events

Custom events include the most commonly observed events in online stores, namely view_item and cart_update. By deploying tracking code to your page, you will ensure pushing of the necessary data to Bloomreach Engagement. You may deploy the tracking code to execute custom JS snippets on the website.

In addition, an “opt_in” event is tracked on the subscription touchpoints on your website. This can be during checkout, registration or within a footer subscription box. However, double_opt_in is recommended to be tracked via backend (API) rather than frontend (JS-SDK).

Full frontend tracking for an e-commerce website would usually include events from the following funnel process.

You will leverage Bloomreach Engagement JS SDK functions to ensure all web tracking. By deploying tracking codes to your page, you will ensure pushing of the necessary data to Bloomreach Engagement. You may deploy the tracking code to execute custom JS snippets on the website.

Bloomreach Engagement Initialisation

To integrate your website with Bloomreach Engagement using our Javascript SDK, you will need to copy-paste the integration snippet into the header of your webpage via GTM or another tag manager. This snippet should be loaded on every page load.

This step is the essential prerequisite for identifying your customers, tracking their actions, and running campaigns. The snippet will initialize Bloomreach Engagement with your project token (your unique project identifier) so that every action will be tracked into your project correctly.

To complete the Bloomreach Engagement initialization, please follow our detailed JavaScript SDK section in our documentation.

Here, you will be able to choose between 2 types of integrations.

Type	Description
Standard	Insertion of the standard initialisation snippet into your website. This does not support the non-flickering experiments.
Non-flickering	For non-flickering experiments, the initialisation snippet will be adjusted according to one of the two options outlined in the documentation: Asynchronous Synchronous (with a service worker) Please note that this snippet cannot be loaded via GTM, it should contain {mode} configuration for experiments and should be inserted directly into the HEAD tag of the web page source code.

Web tracking via GTM (Google Tag Manager)

Google Tag Manager (GTM) is one of the most popular tag management systems that allows you to insert and manage tags (short snippets of code) into your website or mobile app. This means that you are able to add Bloomreach Engagement JavaScript SDK Tag to your site even without the need for advanced skills in JavaScript development.

Please note that tracking is deployed according to the Tracking Document created in cooperation between your team and the Bloomreach team. You are responsible for keeping the Tracking Document up to date.

You can read more about Google Tag Manager in our documentation, which also includes a guide on how to implement Bloomreach Engagement web tracking via GTM.

Identification via GTM

Type	Description
GTM Identification	You will identify all the usual touchpoints where customers should be identified (e.g. login, registration, purchase) and mark these touch points in the Tracking document. Then, you will deploy Bloomreach Engagement's JS code via GTM or other Tag manager to identify customers. Bloomreach will support you to identify the ideal type of identifier for the project and perform a high-level review of the website identification process.

Type

Description

GTM Identification

You will identify all the usual touchpoints where customers should be identified (e.g. login, registration, purchase) and mark these touch points in the Tracking document. Then, you will deploy Bloomreach Engagement's JS code via GTM or other Tag manager to identify customers. Bloomreach will support you to identify the ideal type of identifier for the project and perform a high-level review of the website identification process.

Updated about 1 year ago