Advanced tracking

Sendinblue tracker (sa.js) offers four methods to track accurately the activity of a user on your website and create advanced Marketing Automation workflows.

  • identify: used to identify a user on your website, for example when someones registers to a newsletters or logs in.
  • trackLink: used to track the clicks on the links of your website.
  • page: used to track the views of the pages of your website.
  • track: used to track any custom event. This is the most advanced option and it offers a lot of flexibility.

Identifying the contact

When a user comes to your website, Sendinblue tracker will write a cookie (sib_cuid) to your domain to track his activity.
To use the full potential, we'll need to match this cookie with an email address. This can be done in three ways:

  • When someone clicks in one of your emails and then comes to your website;
  • By calling the identify method;
  • By passing the email address to any method. To do so you've to uncomment the line window.sib.email_id = '[email protected]'; in the JS snippet and replace [email protected] with your variable containing the user's email address.
<script type="text/javascript">
(function() {
    window.sib = { equeue: [], client_key: "xxxxxxxxxxxxxxxx" };
    /* OPTIONAL: email for identify request*/
    window.sib.email_id = window.email;
    window.sendinblue = {}; for (var j = ['track', 'identify', 'trackLink', 'page'], i = 0; i < j.length; i++) { (function(k) { window.sendinblue[k] = function() { var arg = Array.prototype.slice.call(arguments); (window.sib[k] || function() { var t = {}; t[k] = arg; window.sib.equeue.push(t);})(arg[0], arg[1], arg[2]);};})(j[i]);}var n = document.createElement("script"),i = document.getElementsByTagName("script")[0]; n.type = "text/javascript", n.id = "sendinblue-js", n.async = !0, n.src = "https://sibautomation.com/sa.js?key=" + window.sib.client_key, i.parentNode.insertBefore(n, i), window.sendinblue.page();
})();
</script>

📘

Cookies can be deleted, so we recommend to pass the email address as often as you can.

The properties object

In every method you can optionally pass the object { properties }. It's a very powerful feature that allows you to create conditions to trigger your workflows.

For instance you can choose to trigger a workflow only when a purchase is made for a diamond plan. To do so you would call the track() method with the event name purchase and pass the product name in the properties.

sendinblue.track( 'purchase', {'product':'productA'} );

The properties object expects key-value pairs.

In your website triggering event you can then add a condition on the product name to match productA.

1202

📘

You can also use the properties to update the attributes of the user in your database on Sendinblue. All you have to do is to use the name of the attribute as the key.

Identify users

The identify method is used to identify the users who visited your website. When calling the identify method it's common to pass the user attributes (firstname, lastname etc.) in the properties object to update the users database on Sendinblue.

The identify method can be used to trigger a workflow. A common use case if to add all the contact identified on your website to a list on Sendinblue.

sendinblue.identify('email address', {'properties' /*optional*/});

Code sample

The following call will update (or create) the user [email protected] with the firstname John and the lastname Doe in your main users database, and create three properties than can be used only in Marketing Automation workflows unless you also add them as attributes of your users database (id, plan, location).

sendinblue.identify('[email protected]', {
  'FIRSTNAME': 'John',
  'LASTNAME' : 'Doe'
  'id': '10001',
  'plan' : 'diamond',
  'location' : 'San Francisco'
});

Track links

Track link is used to track click events on various links of your website.
We have inserted a small timeout so that there is enough time to log the event, otherwise the page would change before the method is called.

sendinblue.trackLink('link', {'properties' /*optional*/});

link is the DOM element that you want to track.

🚧

Implement trackLink() after the tag

trackLink() needs you to pass the DOM elements which should have been loaded before. Therefor it's better to implement trackLink() after the <body> tag while making sure that your DOM elements are already loaded.

Code sample

Let's say you want to target all of your users who have downloaded the pdf file for the casestudy A. If link is the DOM element you want to track clicks on, then your code would look like:

var link = document.getElementById('download_casestudy_a');
sendinblue.trackLink(link, {
  'casestudy': 'A'
});

Track page views

When you install the script on your website, by default we already take care of tracking the page views. However, sometimes it can be useful to track virtual page views if the page don't really change (mutti-steps form completion ; popin etc.). For such cases you can always fire the page view event yourself.

sendinblue.page('page name', {'properties' /*optional*/})

page name is the name of your page.

🚧

Reserved keywords

In addition to any key-value pair, you can pass four reserved keywords beginning with the prefix ma_ in the properties object:

  • ma_url: the full url of the page, including the scheme;
  • ma_path: the path of the page, i.e. the url without the scheme, the domain, the query string or the fragments;
  • ma_title: the title of the page;
  • ma_referrer: the referrer of the page.

If any of this parameter is not provided then the value will be taken from the current page.

Code sample

sendinblue.page('homepage', {
'ma_title' : 'My Home Page',
'ma_url' : 'http://www.example.com/home',
'ma_path' : '/home'
})

Track Events

You can use the track() function to send any custom event.
For example a cart on an e-commerce website, along with the data of all the products in the cart, that you'll then be able to use in your abandoned cart email.

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

event data is a json object in which you can pass:

  • id (optional): it's your own unique identifier of the event. If you pass an existing identifier, Sendinblue will update the existing data in your Marketing Automation database. 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 his cart it's reflected on Sendinblue.
  • data (optional): it can be any valid JSON object. You'll then be able to use it in the body of your emails. For example you can pass the details of all the products in the cart of your client, to display them in your abandoned cart email.

Code sample

sendinblue.track(
  'cart_created',
  {
    "FIRSTNAME": "John",
    "LASTNAME" : "Doe",
    "PLAN" : "Diamond",
    "LOCATION" : "San Francisco"
  },
  {
    "id": "a4123c72-c6f7-4d8e-b8cd-4abb8a807891",
    "data": {
      "products": [
        {
          "product_id": 1234,
          "product_name": "a",
          "amount": 1,
          "price": 220
        },
        {
          "product_id": 5768,
          "product_name": "b",
          "amount": 5,
          "price": 1058
        }
      ]
    }
  },
);