Bento Tracking Script Integration

Overview

The tracking script sends browser activity into Bento so you can build segments and workflows from website behavior. It covers four common jobs:

Track page views as $page events.
Identify logged-in visitors by email.
Update subscriber fields from browser context.
Track custom events such as demo_booked, pricing_viewed, or purchase.

Requirements

An approved Bento account
Ability to edit your website's source code so you can add the tracking script

Tracking Script Installation

Open your source code

Edit the source code of the website you want to track.

Copy the Tracking Script

Copy the Tracking Script. If the snippet contains a site_uuid placeholder, replace it with your site UUID from the Bento Teams screen.

Paste the Tracking Script

Paste the Bento Tracking script into the source code of your website. Double check that it looks the same as what you copied from Bento.

Save the changes

Save your website changes and publish your changes if that is required.

When a visitor browses your site, bento.js loads in the browser and sends events to Bento. Anonymous browsing starts as an anonymous visitor. Once you call bento.identify("person@example.com"), Bento can connect future browser events to that subscriber.

For the complete method reference, see Bento.js web tracking. This page is the setup guide.

Identify logged-in users

Call identify as soon as your app knows the visitor's email. Do this before bento.view() or bento.track() when possible.

Code

window.addEventListener("bento:ready", function () {
  if (typeof bento$ !== "undefined") {
    bento$(function () {
      bento.identify("customer@example.com")
      bento.view()
    })
  }
})

Update fields

Use updateFields for profile data you want to use in segments, workflows, or Liquid.

Code

bento.updateFields({
  first_name: "Ari",
  plan: "growth",
  role: "owner",
})

Keep field names stable. A small set of predictable fields is easier to use than many one-off keys.

Track custom events

Custom events are best for product and marketing behavior that should trigger automation.

Code

bento.track("demo_booked", {
  source: "pricing_page",
  plan: "growth",
})

Good event names describe what happened. Use names such as demo_booked, trial_started, checkout_started, or feature_used.

Track purchases

For purchase tracking, include a unique key so refreshes and duplicate page loads do not inflate value.

Code

bento.track("purchase", {
  unique: {
    key: "order_1234",
  },
  value: {
    currency: "USD",
    amount: 3000,
  },
  cart: {
    items: [
      {
        product_name: "Growth plan",
        quantity: 1,
        price: 3000,
      },
    ],
  },
})

Do not put secrets, payment details, or private account data in browser-side tracking calls. Send sensitive events from your server through the Events API.

Debugging

Problem	What to check
No page views	Confirm the script URL uses the correct site UUID and is present on the published page.
Events stay anonymous	Call `bento.identify()` before tracking the event when the email is known.
Fields do not appear	Send fields before the event, then inspect the subscriber in Bento.
Duplicate purchase value	Add `unique.key` to purchase events.
Custom event does not trigger a workflow	Match the workflow trigger to the exact event name.