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.
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 onReadycallback 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 lib folder.
My lib file handles:
Checking for the feature flag
Defining our application’s event names in an enum
Defining the application paths that we want to explicitly track in an enum
Logs calls when in development environment
5. Don’t use trackLink with React
The function 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:
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 userSignedUp. Classic.
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.