Track your website activity

Now that you have learned how to manage your contacts and send your first transactional email through Sendinblue API, here is a complete guide on how to track a website's visitor behavior thanks to Sendinblue 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 Sendinblue 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 Sendinblue Tracker

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

Here are the steps to install Sendinblue Tracker:

  1. Login on your Sendinblue 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 </head> closing tag in your website.
    If you don't have a </head> tag, you can add the script just before the <body> tag.

You can simply visit your website now to test that the tracker is well installed. If so, the Tracking ID status will show: "We've recently received traffic for this Tracking ID".

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 Sendinblue 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 SendinBlue.

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

{  
   "email":"thomas.bianchi@email.com",
   "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 Sendinblue.
  • 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 sendinblue.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.

To capture a cart update, you'll need to call sendinblue.track() each time a visitor clicks on the cart update button.

To capture a cart update, you'll need to call sendinblue.track() each time a visitor clicks on the cart update button.

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

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

        var properties = {
            "email": "thomas.bianchi@email.com",
            "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"
                }]
            }
        }
        sendinblue.track("cart_updated", property, 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 Sendinblue 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 Sendinblue 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 Sendinblue Tracker in order to track your website activity! For that, we have seen together how to use sendinblue.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 Sendinblue Tracker here!

Track your website activity


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.