Web tracking - Javascript
Integrating your business with Bloomreach Engagement is the first step in getting closer to your customers. Once integrated, you will immediately start getting data about your customers' behavior. If you need any assistance in deciding which API is the best for your business, please contact our integration specialist.
Integration through Javascript is recommended for a business based on web-browsing or for a business coded in other languages that still make use of Javascript.
Basic integration
To integrate with Bloomreach Engagement using Javascript, you need to copy-paste the integration snippet into the header of your webpage. This step is an essential prerequisite for identifying your customers and tracking their actions. Read more about the integration process here.
Checking if you initialized Bloomreach Engagement correctly
After copy-pasting the initialization code, open your business website in a new window and visit a few pages. Then open the Web integration window in the Bloomreach Engagement app. If you did everything correctly, it should say Your tracking code is working.
Events
In Bloomreach Engagement, we distinguish between two types of events: system and custom ones. System events are automatically tracked across all projects. You can find their comprehensive list in the System events article. Custom events are the ones specifically-tailored integration for each project and you can choose whether to incorporate them. You can find some of them with examples of how to track them below. However, if you are looking for a more extensive list go to the Custom events article.
Deduplication of events
Every tracked or imported event is checked for possible deduplication. Read more here.
Purchase
The purchase
event tracks the basic purchase transaction of your customers. It is crucial for analyzing the overall performance of your business, evaluating campaigns, calculating the lifetime value of your customers and much more.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
purchase_status | string | success / fail |
product_list | list - JSON (Array of objects) | List of all purchased products |
total_price | number | Total value of the order |
payment_type | string | cash / card / bank_transfer... |
<script type="text/javascript">
exponea.track('purchase', {
purchase_status: 'success',
product_list: [ {product_id: "abc123", quantity:1} ],
total_price: 7.99,
payment_type: 'credit_card',
...
});
</script>
Purchase_item
purchase_item
events are generated alongside every purchase
event and are related to every item ordered within that purchase. For example, if a customer buys 1 unit of product A and 2 units of product B within one purchase, then a single purchase
event and two purchase_item
events are generated.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
purchase_status | string | success / fail |
product_id | string | Unique ID of the product |
price | number | Price of 1 unit of the product |
total_price | number | Total price paid for all units of this product |
title | string | Human-readable name of the product |
quantity | number | Number of items of this product bought |
category_1 | string | Top level category name (human-readable) |
<script type="text/javascript">
exponea.track('purchase_item', {
purchase_status: 'success',
product_id: 123456,
price: 90,
total_price: 180,
title: 'product name',
quantity: 2,
category_1: 'category name',
...
});
</script>
Cart_update
Event cart_update
is tracked whenever customers add or remove a product from the shopping cart. This event is mainly used in the abandoned cart email campaign.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
product_list | list - JSON (Array of objects) | List of all products in the cart after the last update |
total_quantity | number | Number of products in the cart |
total_price | number | Total value of the cart |
action | string | add / remove |
product_id | string | Unique ID of the updated product |
title | string | Human-readable name of the updated product |
price | number | Price of the updated product |
category_1 | string | Top level category of the updated product |
<script type="text/javascript">
exponea.track('cart_update', {
action: 'add',
product_list: [{item_id: "1234", item_quantity:3}, {item_id: "2345", item_quantity:2}],
total_quantity: 2,
total_price: 123.45,
price: 54.99,
title: 'Toy toy',
category_1: 'Party toys'
...
});
</script>
View_item
Event view_item
tracks every view of a product page, which allows you to know how many users are interested in each product.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
product_id | string | Unique ID of the product |
title | string | Human-readable name of the product |
price | number | Price of 1 unit of the product |
category_1 | string | Top level category name (human-readable) |
brand | string | Brand of the item |
<script type="text/javascript">
exponea.track('view_item', {
product_id: '123456',
price: 123,
title: 'Lenovo ThinkPad',
brand: 'Lenovo',
category_1: 'Notebooks',
...
});
</script>
View_category
Event view_category
tracks every view of a category page. This information is useful when determining what are the most visited categories.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
category_id | string | Unique identifier of the category |
category_name | string | Human-readable name of the category |
<script type="text/javascript">
exponea.track('view_category', {
category_id: '123456',
category_name: 'Notebooks'
...
});
</script>
Checkout
Event checkout
is used to track several steps of the purchase process, including the customer data acquisition, payment, shipping, and the transaction thank-you page. Tracking these steps is vital for analyzing where customers drop out.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
step_number | number | Step of the checkout process |
step_title | string | Human readable checkout process step title |
<script type="text/javascript">
exponea.track('checkout', {
step_number: 2,
step_title: 'Shipping details'
...
});
</script>
Registration
Event registration
is tracked when a new user registers on the website. This event allows you to keep track of customer behavior or trigger automated marketing campaigns. In combination with the 'exponea.update' function, the attributes this event tracks will be attributed directly to the customer profile.
Overview of basic recommended attributes to track:
Attribute name | Type | Value / Description |
---|---|---|
string | Lower-cased and trimmed email address | |
first_name | string | First name |
last_name | string | Last name |
phone | string | International phone number format, such as +15417543010 |
<script type="text/javascript">
exponea.track('registration', {
email: '[email protected]',
first_name: 'Gordon',
last_name: 'Freeman',
phone: '+15417543010',
...
});
</script>
Tracking list attributes
It is possible to track list attributes, that is equivalent to JS array. It is possible to use Bloomreach Engagement list filters with list attributes, which is not possible with objects (as shown above in cart_update).
<script type="text/javascript">
exponea.track('view_article', {
tags: ["finance", "red", "..." ]
});
</script>
Customer identification
To know your customers better, you need to identify them with a unique identifier, such as e-mail or username.
Automatic identification
Bloomreach Engagement automatically creates an anonymous customer when the method initialize() (e.g from Javascript SDK) is called for the first time on a device. These customers are identified by a generated cookie which means that subsequent sessions within a single device will be tracked to the same customer.
Multi-device identification
Apart from the automatic cookie tracking, Bloomreach Engagement also allows clients to track a single customer across more platforms or devices. Therefore we can, for example, connect events that customers make in the Android and iOS version of your business.
Hard IDs
We use the method identify(hard_id) to assign a hard ID (e.g. email address or username) to a user. When a customer with the given hard ID already exists, all customer profiles with the same ID will be merged. A new customer is created in Bloomreach Engagement every time a user is identified with a different hard ID. However, all previous events remain in the previous customer history.
Implementation
We can use the identify() method in two ways:
- identify(hard_id);
- identity field registered will be updated
- identify({identity: id});
- We can save various hard IDs for a customer. However, customers are merged under every hard ID. Therefore if two customers with different
registered
are identified with the same hard ID identity field, event tracking will fail.
- We can save various hard IDs for a customer. However, customers are merged under every hard ID. Therefore if two customers with different
A good practice is to identify customers after every successful login/registration. More frequent identification may lead to problems with customer merging.
To read more about identifying customers, continue reading the documentation for the identify()
method.
Multiple identities
If there are more identities (more than registered
and cookie
) in the project, you need to use a special identify call.
For example to identify with email_id you call:
<script type="text/javascript">
exponea.identify({
email_id: "[email protected]"
});
</script>
If you are identifying a customer and you know all identities, you can also identify with:
<script type="text/javascript">
exponea.identify({
registered: "user_id_123",
email_id: "[email protected]"
});
</script>
If using caching on your web server, you need to make sure you do not insert the identify script into this part.
Updating the customer’s profile
In addition to tracked events, every customer in Bloomreach Engagement has a set of attributes. Attributes can be used to contact the customer through a personalized campaign.
Read more in our documentation about the update()
method.
This guide should have provided you with all the basics needed to start tracking your first events and customers. We would love to help you get started as soon as possible, so if you have any questions, please contact our integration specialist.
Advanced tracking
Customizing default tracking
Default tracking behavior can be adjusted in the exponea.start(options) call:
<script type="text/javascript">
exponea.start({
token: 'PROJECT TOKEN',
customer: 'Insert unique identified of your customer or remove this line (so cookie identification will used)',
ping: { enabled: true}, // enables tracking session_start, first_session and session_end events
track: { visits: true } // enables tracking page_visit event
});
</script>
You can also specify custom properties to be emitted with the session_start
and session_end
events.
<script type="text/javascript">
exponea.start({
token: 'PROJECT TOKEN',
customer: 'Insert unique identified of your customer or remove this line (so cookie identification will used)',
ping: {
// specify your custom properties here
properties: {
version: 2,
subdomain: 'www'
}
}
});
</script>
The customer parameter can use any object with identifier same as exponea.identify(). When string is used, it will use identifier registered only.
Action tracking
You can emit custom events when clicking links:
<a id="bloomreach_link" href="http://www.bloomreach.com">Bloomreach</a>
<script type="text/javascript">
exponea.trackLink('#bloomreach_link', 'external_link', {
site: 'Bloomreach'
});
</script>
Limitations
Characters . and $ are not allowed to be used in JSON keys. However, they can be used as values.
Bot filtering
Bloomreach Engagement automatically filters out bot traffic which it can identify. This currently works by default and can’t be configured on project-level basis.
Bloomreach Engagement filtering:
If customer/events is tracked with Bloomreach Engagement web tracking, and the message includes user-agent header with patterns from this file, the message is automatically neglected. The message then isn’t stored within Bloomreach Engagement.
Javascript SDK
All functionalities in a detail are described in a Javascript SDK.
Updated about 1 year ago