Bento.js (Web Tracking)

This guide explores Bento's simple yet powerful analytics for web projects. Gain deeper insights into your audience, track user behavior in real-time, and optimize your site's performance with comprehensive data. Utilize the intuitive Bento API to seamlessly integrate analytics, enhancing your site's functionality and user experience. Enhance your marketing decision-making with actionable metrics and real-time insights for strategic growth and to optimize campaign performance.

Installation

There are two methods for logging events and web metrics. The most common is by adding the BentoJS Tracking Script to your site. The second method involves logging events directly from your website using the Bento API or a backend SDK library. Both approaches offer significant value in different ways.

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.

Script installation

<script src="https://app.bentonow.com/{Site Key}.js"
        async defer
>
</script>
<script>
  window.addEventListener("bento:ready", function () {
  if (typeof(bento$) != 'undefined') {
  bento$(function() {
  // bento.showChat();
  bento.view();
});
}
})
</script>

Identify

In Bento, all new visitors are anonymous. If you'd like to identify a visitor, simply run the following command before you track an event or pageview.

After you do so, all future events sent from this users device will be correctly identified as that person. Worth mentioning that all previous events sent from that visitors device will also be associated to that user. Magic, right?

Identifing a user for tracking

bento.identify("[email protected]");

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).

Set Chat User Identity

window.addEventListener("bentochat:ready", function () {
window.$bentoChat.setUser("<identifier>", {
  email: "<email>",
  name: "Jane Doe",
  phone_number: "",
});
console.log("running this");
});

Update Fields

If you'd like to update a visitors 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.

Updating Identity Values

bento.updateFields({ first_name: "Ash", last_name: "Ketchum" });

Track

The following will build an event with a custom type/name and a details payload that you can filter by in Workflows.

Tracking Custom Event

bento.track("optin", { organisation_name: "Team Rocket" });
bento.track("demo");
bento.track("download");

Track Purchase (Create Unique Events)

The following will track a purchase and increase/decrease the LTV of a customer. Note that the key stops duplicate values being tracked, this is important if you're loading this script on a thank you page and it loads multiple times. Cool, huh?

Create and Track Custom Event

bento.track("purchase", {
  unique: {
  key: "INV1234", // a unique key — this stops duplicate unique events
},
value: {
  currency: "USD",
  amount: 1000, // in cents
},
cart: {
  items: [
    // an array of items, can be any format
    {
      product_name: "Product 1",
      product_id: "1234",
      quantity: 1,
      price: 1000,
    },
  ],
},
});

Tag

Fires an event with a tag inside.

This can trigger automations.

Custom Triggering Tag

bento.tag("demo_booked");

Chat Visibiltiy Hooks

Chat Bubble and Window hooks

// Renders or hides chat bubble.
bento.showChat();
bento.hideChat();

// Opens or closes the chat window.
bento.openChat();
bento.closeChat();

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.

Get the session email

  bento.getEmail();

Spam Check

Got an important piece of content behind an opt-in and don't want your users putting fake emails_api in to get it? Leverage Bento's Spam API to ensure their email is correct before proceeding.

This does not check MX records as that can be super slow.

Validate email address

await bento.spamCheck(email);

Track Subdomains

If you have traffic going to multiple subdomains and wish to track people throughout that journey simply run the following at least once per pageview. We will attempt to add the visitors identifier to each link. Please test this thoroughly before going live.

List Domains Per Page Load

bento.trackSubdomains(["example.com", "test.example.com"]);