Skip to main content
JavaScript API - JS API

Pass data to Fresh Relevance with JavaScript.

Updated over a week ago

You can add custom JavaScript to your web pages to pass data to Fresh Relevance, or we can do it for you as services work.

For example, you can raise custom signals from your site using JavaScript to start custom trigger programs. This allows the system to respond to specified actions of your customer on your site, for example, ordered a brochure or viewed a particular page.

You can pass data through to the signal, which is available all the way through to email send time, meaning it can be merged into an email.

When site visitors log in, you can also pass information about them to Fresh Relevance for use in triggered messages or in personalization.

The following calls can be used from your website JavaScript and causes data to be sent to the server with the details you supply.

Name

Description

$TB.setEmail(emailAddress)

Set the email address for this person, for example, when they've logged in.

You need to call $TB.sendBeacon() directly afterward, to ensure the data is sent to the Fresh Relevance server.

$TB.setMobile(mobile, code)

Set the mobile number (and optional mobile code) for this person.

You need to call $TB.sendBeacon() directly afterward, to ensure the data is sent to the Fresh Relevance server.

$TB.setDetails(emailAddress, firstName, lastName, fullName, options)

Set details for this person, for example, when they've logged in. Any parameters passed as null are ignored. Set options.emailType to

  • 'e' for plain email address

  • 'b64e' for base64-encoded email address

  • 'rc4e' for RC4 encrypted email address

You don't need to call $TB.sendBeacon() separately, as this is called part of $TB.setDetails().

$TB.setData(rootData, extraData)

Set data for this person; where rootData and extraData are JSON objects. rootData can contain the data from the Person fields table below.

extraData contain any other data that you may wish to submit to be added to the person's record.

Example (gender).

$TB.setData({'e': emailAddress, 'fn': firstName, 'ln': lastName}, {'gender': customerGender}

You don't need to call $TB.sendBeacon() separately, as this is called part of $TB.setData().

$TB.raiseSignal(...)


Hooks

There are hooks available within the personalization lifecycle. You can create functions within these hooks and the code is called at the appropriate time, for example, when a slot has loaded.

Function name

Called

Description

window.frBeforeSlotLoad(slotID, data)

Once for each Slot, after the data has been retrieved, before the page is updated.

Parameters:

  • slotID (string): the ID of the Slot currently being processed

  • data (object): the data generated by the server for the current Slot

{
"html": "<h2>Hello World</h2>",
"css": null,
"js": null,
"var": {}, // Optional variables passed back from the server

meta: {
"tmsb": "SmartBlock ID",
"tmsl": "Slot ID"
"tmrl": "Rule ID"
"tmcs": "Content ID"
}
}

Return value: true | false. If true, the slot is added to the page as normal. If false, the slot is not added to the page.

This hook can also be used to alter the html before it is added to the document by replacing the html attribute.

window.frOnSlotLoad(slotLoaded, slotID, data)

Once for each slot, after the page has updated.

Parameters:

  • slotLoaded (Boolean): indicating whether the Slot was added to the page or not

  • slotID (string): the ID of the Slot currently being processed

  • data (object): the data generated by the server for the current Slot

{
"html": "<h2>Hello World</h2>",
"css": null,
"js": null,
"var": {}, // Optional variables passed back from the server

meta: {
"tmsb": "SmartBlock ID",
"tmsl": "Slot ID"
"tmrl": "Rule ID"
"tmcs": "Content ID"
}
}

Return value: None

A wider range of hooks are available.


Popover reporting functions

Important

Popover reporting only works in SmartBlocks displayed on a web page that contains our script.

In order for the Popover reporting to function correctly, we need to use special functions to indicate when a Popover has been: Shown, Dismissed and Submitted. The functions should be used in the relevant JavaScript of the Popover at the point where each action takes place.

Example popoverShown signal

$TB.popoverShown('{{ slotid }}')

Example popoverDismissed signal

$TB.popoverDismissed('{{ slotid }}')

Example popoverSubmitted signal (where emailAddress is the submitted email address)

$TB.popoverSubmitted('{{ slotid }}', emailAddress)

You can submit additional data inside the popover in additional parameters, in the following format

Example popoverSubmitted signal using rootData and extendData

$TB.popoverSubmitted('{{ slotid }}', emailAddress, rootData, extendData)

Person fields

The rootData object contains some core person fields used in Fresh Relevance, the list of fields that can be submitted is below:

Parameter

Description

e

Plain email address

b64e

Base64-encoded email address

rc4e

RC4-encrypted email address

cid

Customer ID, usually a username or user ID used on your website

curr

Currency

eid

External ID, usually to identify users in an ESP

fn

First name

lang

Site language

ln

Last name

mobile

Mobile/Cell/SMS number

perm

Permission to send emails to the person

sbr

Site brand

extendData contains any other data that you want to submit with this popover.

Example

This is an example of popoverSubmitted signal with gender passed into extendData.

$TB.popoverSubmitted({{ slotid }}, emailAddress, {'fn': firstName, 'ln': lastName}, {'gender': customerGender})

Did this answer your question?