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, which fires a bento:ready event when it is ready. The second block listens for that event and calls bento.view(), which records the page view as a $view event. The script does not record a page view on its own, so keep this block.
- Name
Site Keystring- 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. Bento stores the email in the browser and sends it with the next event.
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 these methods to control Bento Chat from your own code. showChat() loads and shows the chat widget. hideChat() hides the chat bubble. openChat() and closeChat() both toggle the chat window.
Call them after bento.js has loaded, for example inside a bento:ready listener.
Get Email
If you have identified the device at least once, you can fetch that email for your own use. Bento keeps it in localStorage. 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. It returns false right away for an email with an invalid format.
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.