Getting started with Brevo Tracker

Overview

Brevo Tracker tracks website visitor behavior and identifies contacts. Once identified, contacts are automatically added to Brevo.

This guide demonstrates how to capture cart abandonments and target identified visitors through cart recovery emails after 2 hours of inactivity.

Install Brevo Tracker

Brevo Tracker tracks all pages visited by your contacts. Once identified, contacts are automatically added to Brevo.

Track your first website event

After installation, you can send custom events when visitors perform actions on your website.

The track() function

The track() function sends custom events. It accepts three parameters:

• Event name (required)
• Properties (optional)
• Event data (optional)

1
brevo.track(
2
  'event name', // required
3
  {
4
    // properties - optional
5
  },
6
  {
7
    // event data - optional
8
  }
9
);

Event name

The event name identifies the action being tracked.

For a visitor who adds items to their cart, use cart_updated as the event name.

Properties

Properties is a JSON object that describes the visitor’s state, such as email, age, gender, and location.

Pass user attributes (firstname, lastname, etc.) to the properties object to update the contact database in Brevo.

1
{
2
  "email": "thomas.bianchi@example.com",
3
  "FIRSTNAME": "Thomas",
4
  "LASTNAME": "Bianchi"
5
}

Event data

Event data is a JSON object that contains information about a transaction. It has two optional entries:

• id (optional): Unique identifier of the event. For example, the unique identifier of the cart object on your website, so each time the user adds an object to their cart, it’s reflected in Brevo
• data (optional): Any information related to your transaction. For example, the details of all products in the cart

1
{
2
  "id": "cart:1234",
3
  "data": {
4
    "total": 280,
5
    "currency": "USD",
6
    "url": "www.example.com",
7
    "items": [
8
      {
9
        "name": "Black shoes",
10
        "price": 90,
11
        "quantity": 2,
12
        "url": "www.example.com/black-shoes",
13
        "image": "www.example.com/black-shoes.jpg"
14
      },
15
      {
16
        "name": "White shirt",
17
        "price": 100,
18
        "quantity": 1,
19
        "url": "www.example.com/shirt",
20
        "image": "www.example.com/shirt.jpg"
21
      }
22
    ]
23
  }
24
}

Build your first track event

Call brevo.track() with an event name, properties, and event data to fire a track event.

For a cart update, fire the cart_updated track event each time a user clicks the update button.

Below is an example implementation:

1
$(".update-btn").click(function() {
2
  var properties = {
3
    "email": "thomas.bianchi@example.com",
4
    "FIRSTNAME": "Thomas",
5
    "LASTNAME": "Bianchi"
6
  }
7
8
  var track_event = {
9
    "id": "cart:1234",
10
    "data": {
11
      "total": 280,
12
      "currency": "USD",
13
      "url": "www.example.com",
14
      "items": [{
15
        "name": "Black shoes",
16
        "price": 90,
17
        "quantity": 2,
18
        "url": "www.example.com/black-shoes",
19
        "image": "www.example.com/black-shoes.jpg"
20
      }, {
21
        "name": "White shirt",
22
        "price": 100,
23
        "quantity": 1,
24
        "url": "www.example.com/shirt",
25
        "image": "www.example.com/shirt.jpg"
26
      }]
27
    }
28
  }
29
  
30
  brevo.track("cart_updated", properties, track_event);
31
});

Build an abandoned cart workflow

Abandoned cart workflows help recover potential lost sales.

Required events

Track these three events to build an abandoned cart workflow:

• cart_updated: Indicates when a cart is created or updated
• order_completed: Indicates when a cart is purchased
• cart_deleted: Indicates when products are deleted from an existing shopping cart

Create the workflow