export const exampleFile = 'webtracking-examples'


# 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](https://www.bentonow.com), 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.

    
      - **Site Key** (`string`): 
        This key can be found on your API Keys page or the team dashboard
      
    
  
> ⚠️ **Warning**
> 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.

  
> This can trigger automations.


  


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


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


  


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