Now that you have learned how to manage your contacts and send your first transactional email through Brevo API, here is a complete guide on how to track a website's visitor behaviour thanks to Brevo Tracker.

As an illustration, we will see how to capture cart abandonments and target identified visitors through cart recovery emails after 2 hours of inactivity. This will be your abandoned cart workflow!

👍

What you will learn from this tutorial

In this tutorial, you will learn how to:

• Install Brevo Tracker

• Track your first website's event

• Build an abandoned cart workflow

💡Please note that you can also easily track abandoned carts using Plugins. Read more about this option here.

Install Brevo Tracker

Brevo Tracker enables you to track all of the pages on your site visited by your contacts. Once identified, contacts will be automatically added on Brevo.

Here are the steps to install Brevo Tracker:

1. Login on your Brevo Platform
2. Activate Marketing Automation feature on your Apps page
3. Go to Automation > Settings > Tracking code
4. Copy-paste the tracking code just before the closing tag in your website.
   If you don't have a tag, you can add the script just before the tag.

You can simply visit your website now to test that the tracker is well installed. If so, the Tracking ID status will show verified next to the Verify button.

Track your first website's event

Now that you're set up, let's see how to send a custom event that a visitor would perform on your website.

💡As you might already notice, page views get automatically tracked once Brevo Tracker is installed.

The track() function

track() function is what you need to start sending custom events. This function can accept 3 kinds of entries:

• Event name [required]
• Properties [optional]
• Event data [optional]

sendinblue.track(
  'event name' /*mandatory*/,
  {
    'properties' /*optional*/
  },
  {
    'event data': /*optional*/
  }
);

To understand what each of these entries represents, let's take again the example of our contact Thomas Bianchi.

Let's assume that Thomas visited your website and has just added 2 Black shoes and 1 White shirt to cart.

Event name:

The event name field corresponds to the name you want to give to your event.

In the case of our visitor Thomas Bianchi who has just added items to his cart, the event name will be cart_updated.

Properties:

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

💡It's common to pass on the user attributes (firstname, lastname etc.) to the properties object to update the users database on Brevo.

In the case of our visitor Thomas Bianchi, the Properties object would be the following:

{  
   "email":"[email protected]",
   "FIRSTNAME":"Thomas",
   "LASTNAME":"Bianchi"
}

📘

Properties and Contacts attributes

As you may notice, there is some similarity between Contacts attributes and the information you can pass onto the Properties object. Indeed:

• The Contacts attributes that correspond to Properties will be updated each time an event is fired.

• Properties that don't correspond to existing Contacts attributes can be used only in the Marketing Automation feature unless you add them as attributes of your contacts database.

Event data:

event data is a JSON object in which you can pass on information about a transaction. It is composed of two optional entries:

• id (optional): It is the unique identifier of the event. For instance, it can be the unique identifier of the cart object on your website, so that every time the user adds an object to their cart it's reflected on Brevo.
• data (optional): Here you can pass on any information related to your transaction. For instance, the details of all the products in the cart of your client.

In the case of our visitor Thomas Bianchi who purchased 2 Black shoes and 1 White shirt, the event data object would be the following:

{  
   "id":"cart:1234",
   "data":{  
      "total":280,
      "currency":"USD",
      "url":"www.example.com",
      "items":[  
         {  
            "name":"Black shoes",
            "price":90,
            "quantity":2,
            "url":"www.example.com/black-shoes",
            "image":"www.example.com/black-shoes.jpg"
         },
         {  
            "name":"White shirt",
            "price":100,
            "quantity":1,
            "url":"www.example.com/shirt",
            "image":"www.example.com/shirt.jpg"
         }
      ]
   }
}

Build your first track event

To fire your track event, you need to call brevo.track() where you should pass on an Event name, properties, and an event data as previously seen.

If we take again our example of a cart update, you'll need to fire the cart_updated track event each time a user clicks on the blue button.

Bellow, you can see an example on how you can do it:

$(".update-btn").click(function() {

        var properties = {
            "email": "[email protected]",
            "FIRSTNAME": "Thomas",
            "LASTNAME": "Bianchi",
        }

        var track_event = {
            "id": "cart:1234",
            "data": {
                "total": 280,
                "currency": "USD",
                "url": "www.example.com",
                "items": [{
                    "name": "Black shoes",
                    "price": 90,
                    "quantity": 2,
                    "url": "www.example.com/black-shoes",
                    "image": "www.example.com/black-shoes.jpg"
                }, {
                    "name": "White shirt",
                    "price": 100,
                    "quantity": 1,
                    "url": "www.example.com/shirt",
                    "image": "www.example.com/shirt.jpg"
                }]
            }
        }
        brevo.track("cart_updated", properties, track_event);
        alert('A \"cart_updated\"" event has been fired')
    });

<!-- Update cart button -->
<a href="#" class="update-btn">Update cart</a>

👍🏽 That's it! Now let's see how you can combine Brevo Tracker and Marketing Automation Feature in order to build an abandoned cart workflow for instance!

Build an abandoned cart workflow

Abandoned cart workflows present a great opportunity to recover potential lost sales.

There are 3 key events that you need to track in order to build an abandoned cart workflow:

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

Once your events are set in your website, all you need to do is:

1. Login on your Brevo Platform
2. Go to Automation (If haven't enabled Automation before, you'll need to switch it on from Apps page)
3. Click on Create a new workflow at the top right side of your screen
4. Click on Abandoned cart and that's it! 🎉

👍

Congrats! 🎉

You've just learned how to use Brevo Tracker in order to track your website activity! For that, we have seen together how to use brevo.track() function that accepts 3 types of entries:

• an Event name. We recommend using cart_updated, order_completed, and cart_deleted in the case of abandoned cart tracking.

• Properties that describes the state of an individual person (your website visitor or you product user for instance).

• Event data where you can pass on precise information about your transaction. The details of all the products in the cart for instance.

Discover more about Brevo Tracker here!