How to set up the Sendinblue tracker in a React TypeScript application
Edit Feb 24, 2023: added a few clarifications and tips.
We chose Sendinblue because its pricing model: cost doesn’t increase with the amount of contacts you have. Setting it up wasn’t as easy as I had hoped, so here I go over some tips to integrate the Sendinblue tracker easily in React/TypeScript applications.
What is the Sendinblue tracker?
Combined with Sendinblue automations, all transactional and nurture sequence emails can be moved from an application’s backend codebase to Sendinblue, as well as the conditions on if and when they should be sent. That’s great!
1. Combine the JS Tracker with the API
If you’re using Sendinblue for automations with transactional emails or important nurture sequences, you should track those events using the RESTful API implementation.
Alternatively, if you need to send an email right away without triggering a workflow, don’t use the tracker. It’s better to trigger the email send directly from your backend using their Email API.
2. No TypeScript support
Sharing here my configuration in case it’s useful for you:
3. Waiting for the script to be ready before using it in Next.js
In Next.js, we’ll load the script with
strategy='afterInteractive' like other tracking utilities. That means that the script execution will be deferred so
window.sendinblue could take a bit to be defined. There is the
onReady callback that can be used to wait for it. Note the
onLoad callback isn’t called for inline scripts.
You might add any functionality directly in the callback as well, or set a state variable and leverage effects when there are other async variables that need to load:
4. Wrap the Sendinblue tracker functions in a lib file
It’s good practice to wrap libraries and re-export them preconfigured for your application. By convention, I place them in the
My lib file handles:
Checking for the feature flag
Defining our application’s event names in an
Defining the application paths that we want to explicitly track in an
Logs calls when in development environment
5. Don’t use
trackLink with React
trackLink exists to override the behavior of
<a> tags, overriding their default behavior to first track that they were clicked and then redirecting the browser to the new URL. Since it acts on the DOM node, likely adding a click listener, this happens outside React’s lifecycle.
A workaround would be to use
trackLink in an effect, like this:
The only problem is that there doesn’t seem to be a way to remove the listener when the effect cleans up.
So my recommendation here is don’t use
trackLink, and instead override yourself the
onClick event on links to track the event. In Next.js apps, if the link is internal and you use
next/link, you won’t need to worry about the necessary delay to track the click since the link won’t produce a browser redirection.
6. Make sure event names match
Once I had an issue with a workflow not firing, and I spent 2 hours investigating and sharing information with the Sendinblue support team. In the end, the root cause was really silly. The event name my application was sending was
userSignUp and what I configured in Sendinblue was
Make sure your names are consistent when your workflows don’t fire as expected!
7. Expect occasional delays in event processing
Sendinblue’s events might take a while to show up in their event logs. Workflows might fire immediately or take minutes to start. It looks like their processing queues can get backed up sometimes, so be patient and don’t reach out to their support team right away. It might have to do with using the free plan, which I usually do until things are set up and the customer confirms they’re satisfied with the solution.
That’s all! I’ll keep this blog post updated as I come across new tips to share.