The Javascript API allows you to pass data and events from single page applications, without the need to rely on scraping or a data layer. This allows you to pass data from an app built with a framework such as React, Angular or vue.js, or with plain JavaScript.

Your app should, for example:

Call the pageChange event when the SPA has finished loading.
Call the cartUpdate event when the shopping cart contents change.

Learn more about Raising events.

You can also register for notifications when certain events occur within the Personalization script. You have the option of cancelling the event, for example, if you want to block a Slot from loading.

Learn more about Consuming events here.

$TB.hooks object

$TB.hooks is the object you need to interact with to manage, monitor, raise, and consume events.

The following calls and properties are available on the $TB.hooks object:

`$TB.hooks.events`

This property returns all the events, as an array, that have been raised by the current page. This is useful for validating that the events you're expecting to be raised are happening and contain the correct data.

[
    {
        "eventID": "GUID596D",
        "eventName": "pageChange",
        "data": null,
        "options": {
            "sendBeacon": true
        },
        "eventTime": "2025-08-08T13:41:41.211Z",
        "processed": false
    },
    {
        "eventID": "GUID596E",
        "eventName": "productBrowse",
        "data": {
            "url": "http://www.example.com/example_product",
            "name": "Example Product",
            "image": "http://www.example.com/example_product.jpg",
            "thumbnail": "http://www.example.com/example_product_tn.jpg",
            "description": "Example Product Description",
            "variants": [
                {
                    "url": "http://www.example.com/example_product_blue",
                    "name": "Example Product Blue",
                    "id": "example_product_blue",
                    "stock": 1,
                    "image": "http://www.example.com/example_product_blue.jpg"
                },
                {
                    "url": "http://www.example.com/example_product_red",
                    "name": "Example Product Red",
                    "id": "example_product_red",
                    "stock": 1,
                    "image": "http://www.example.com/example_product_red.jpg"
                }
            ],
            "id": "example_product",
            "sku": "example_product_01",
            "price": 100,
            "sale_price": 89.99,
            "categories": [
                "example products",
                "on sale"
            ],
            "extra_data": {
                "example_data": "example extra data",
                "author": "John Doe",
                "style": "polo",
                "color": "red"
            },
            "language": "ENG",
            "brand": "brand",
            "currency": "GBP",
            "stock": 5
        },
        "options": {
            "sendBeacon": true
        },
        "eventTime": "2025-08-08T13:42:48.555Z",
        "processed": false
    }
]

`$TB.fireEvent(eventName, data, options)`

Parameter	Type	Description
eventName	string	The name of the event that's occurred. For a list of events available see`$TB.hooks.validCallEvents()`.
data	object	An object containing the data for the event raised. This could be product information, user details or a cart.
options	object	An object containing any additional parameters for the event. Additional parameters are detailed withach event.

Call to allow Personalization to know that an event has occurred on your website, such as a product browse or cart update. You can pass data along to Personalization, like the product information for a product browse event or the contents of a cart for a cart update event.

Learn more about Raising events.

`$TB.registerEvent(eventName, callback)`

Parameter	Type	Description
eventName	string	The name of the event that you want to attach your callback method to. For a list of events raised by Personalization see$TB.hooks.validReturnEvents().
callback	object	A callback function you want to run whenever the event has been raised.

This allows for callback methods to be registered against events raised by Personalization when capturing information from your website.

Learn more about Consuming events.

`$TB.validCallEvents()`

No parameters

Returns a list of valid event names that can be raised using $TB.hooks.fireEvent.

[
    "pageChange",
    "productBrowse",
    "productList",
    "cartUpdate",
    "addCartProduct",
    "removeCartProduct",
    "checkout",
    "purchaseComplete",
    "productVariantSelected",
    "userLoggedIn",
    "addCartProduct",
    "removeCartProduct",
    "skipSlotsLoad",
    "searchShown",
    "searchResultsReturned",
    "fullSearchResultsReturned"
]

`$TB.validReturnEvents()`

No parameters

Returns a list of valid event names that can be listened for using $TB.hooks.registerEvent.

[
    "pageChangeCaptured",
    "productCaptured",
    "listCaptured",
    "cartUpdated",
    "checkoutCaptured",
    "purchaseCompleteCaptured",
    "userCaptured",
    "slotPreload",
    "slotPreinsert",
    "slotInserted",
    "personalizationComplete",
    "cartProductAdded",
    "cartProductRemoved",
    "initialSlotsLoadSkipped"
]

`$TB.reloadSlotConfig()`

No parameters

Used to reload the Slot configuration on the current page. This adds any Slots that haven't been added to the page and populates them with their content.

📘
Slots that have been successfully loaded to the page before this call are not affected.

What’s Next

What’s Next