Javascript Tag technical guide

How does the Lexer Javascript Tag work?

The Lexer Javascript Tag works by first deploying a list of instructions using HTML and Javascript (of course!) in your chosen Tag Manager. These instructions will identify the variables and triggers on your website’s dataLayer that will populate our "out of the box" attributes to enrich your customer data.

For a quick refresher, see our Lexer Javascript Tag basics article.

Javascript Tag basics

For the initial setup of the tag, the following lines below (bespoke to your use case) will be provided to you by Lexer. You should place these lines as high in the head or body of your website as you can, or within an HTML tag in your tag manager.

This is the Lexer Tag - Header that will initialize attributes on your website, and where your customers' actions on site will be stored and then sent to the Lexer platform through a payload.

The other Lexer tags in this article are the instructional tags that will tell the tags when to fire (on what events/triggers) and what customer behavior (out of the box variables/attributes) to capture from your website's dataLayers.

lxt() function

The [.code]lxt()[.code] function is the backbone of the tag. We interact with it through all the major commands.

There are four primary methods we will use in every implementation:

1. [.code]lxt('initiate', , )[.code]: is used to initiate the tag and provide the all important client identifier and attributes we’ll be tracking.
2. [.code]lxt('identify', , )[.code]: is used to identify the user in the session.
3. [.code]lxt('track', , )[.code]: is used to assign actions to the identified user.
4. [.code]lxt('converted')[.code]: is used to call this at the end of a conversion funnel, and it will send all metadata associated with the session to Lexer.

1. lxt(‘initiate’, {id}, {attributes})

Lexer will provide you with the exact code to use here, with the id and list of attributes defined, as this list will be different for each client.

The code will look like this:

2. lxt(‘identify’, {key}, {value})

This call assigns an identity to the current user. As Lexer’s platform deals only with identified data, anonymous users will not be tracked through their browsing journey, so providing an identifier early in the user’s browsing journey is a priority.

However, our tracking code is aware that on many websites, identification might not happen until very late in the funnel, for example, at checkout. So the identify call can take place at any time in the funnel, and we ensure that any previous events within that session will be sent to the CDXP.

Here's an example of the full request:

[.code]lxt('identify', window.lxt_attributes.email, 'myemail@mysite.com')[.code]

The parameters are as follows:

• key: Must be the name of one of the attributes in the provided [.code]lxt_attributes[.code] list.
• In the above example, email would be the correct key.
• value: Is a string or number identifier of the customer.
• Once an identity has been assigned, a cookie is used to track subsequent visits — so long as the user’s browser supports them.

Lexer supports many different types of identifiers, besides email. Contact support@lexer.io for more details.

3. lxt(‘track’, {action}, {value})

This call assigns attributes to the identity in the CDXP. It takes two parameters:

• key: Must be the name of one of the actions provided in [.code]lxt_attributes[.code].
• value: Is a string, number, or boolean value to be assigned to the attribute.

If more complex data types are required, then consider these approaches:

• arrays: Make multiple track requests for each value in the array.
• objects/dictionaries: Should be configured as separate attributes, have a chat with Lexer Support (support@lexer.io) for an ideal strategy.
• dates: Two options, convert this into a string (in an ISO8601 date format) or make them a UNIX date stamp (just be sure to convert the value to seconds).

Here is an example of the full request:

[.code]lxt('track', lxt_actions.added_product, 'metadata tshirt')[.code]

4. lxt(‘converted’)

Call this at the end of a conversion funnel, and it will send all metadata associated with the session to Lexer. This will allow for the populating of attributes such as device_id, device_used, and time_spent_to_convert.

Other lxt() Commands

lxt(‘debug’, true)

When implementing, you might want additional debug information to be generated from the tag. Simply call [.code]lxt('debug', true)[.code] to enable and look at the javascript console for details.

lxt(‘reset’)

Resets the user's cache and should be called at the point of a user logging out. This ensures the next person using the device will not get associated with the same cookie.

Further reading

That's it for our technical guide. For initial setup just follow the steps above and if you get confused or stuck please don't hesitate tor reach out for help at support@lexer.io. The following tag articles in this section expand on how the dataLayer can be configured with Shopify. See our further reading suggestions below.