Bento.js (Web Tracking)
This guide shows how to install bento.js, identify visitors, track events, and pass useful browser data into Bento. Use this when you want page views, product views, opt-ins, and other website behavior to drive segments, workflows, and email personalization.
Installation
There are two methods for logging events and web metrics. The most common is adding the bento.js tracking script to your site. Use it when you want browser-side data like page views, product views, and opt-ins. The second method is logging events from your backend using the Bento API or an SDK library. Use it for events that happen server-side or that you don't want to expose in client code.
When you sign up to Bento, you'll be able to copy and paste bento.js on your site. The script loads asynchronously and will not block your page from loading.
Installation Example
The following loads bento.js and fires off an event, bento:ready, that you can listen for. In this example it listens for the event and then fires off a bento.view() event. This is useful for tracking pageviews reliably.
- Name
Site Key- Type
- string
- Description
This key can be found on your API Keys page or the team dashboard
Note: Site Key will automatically be replaced on the script page. Do not copy and paste the example verbatim.
Identify
In Bento, all new visitors are anonymous. If you'd like to identify a visitor, run the following command before you track an event or pageview.
After you do so, all future events sent from this user's device will be correctly identified as that person. All previous events sent from that visitor's device will also be associated to that user.
Identify (Chat)
In Bento, if you wish to identify a user in chat (not requiring self-identification) then you can use the following method. It requires both an email AND an identifier (like a user_id or account_id in your database).
Update Fields
If you'd like to update a visitor's custom field (firstname, last_name, status, etc) run the following command before you track an event or pageview.
This will send their fields inside the event and update the visitor.
Track
The following builds an event with a custom type/name and a details payload. You can filter by both in Workflows.
Track Purchase (Create Unique Events)
The following will track a purchase and increase or decrease the LTV of a customer. The unique key stops duplicate values being tracked. This matters if you're loading this script on a thank you page that can load multiple times.
Tag
Fires an event that adds a tag to the visitor.
Chat Visibility Hooks
Use the chat visibility hooks when your site needs to react to Bento Chat opening or closing. Common uses include hiding a custom launcher, pausing an animation behind the chat window, or recording a support-intent event before a visitor starts a conversation.
These hooks run in the browser after bento.js has loaded. Keep the handlers small and avoid putting sensitive data in client-side code.
Get Email
If you have identified the device at least once during the session you can fetch that information for your own use. This will usually be available if someone has logged in, opted in via Bento Capture, or used a form on your site.
Spam Check
If you have content behind an opt-in, visitors will sometimes enter fake email addresses to get it. Use Bento's Spam API to check that an email address is valid before proceeding.
Track Subdomains
If you have traffic going to multiple subdomains and want to track people across that journey, run the following at least once per pageview. We will attempt to add the visitor's identifier to each link. Test this thoroughly before going live.