Javascript Tag
Configure your Javascript Tag to collect identifiable customer site activity
Lexer has a Javascript Tag which can be embedded into websites to collect your customer’s activities in an identified manner. The tag has a straightforward API to implement and can be embedded in the code of your website, or inside of a tag manager like Google Tag Manager.
Please contact Lexer Support for help in getting the tag configured. If you’d like a high level understanding of what the Tag can do you for you check out our overview article here.
Out of the box attributes
The Lexer JS Tag currently supports 16 attributes out of the box. Each of these are fully customisable to your use case and requirements. It is important to keep in mind that Lexer is not a platform designed to support web analytics, we are strictly focussed on recording actions that can be linked to an identifiable customer or prospect.
Attribute name | Description | Example value |
Products Viewed | A list of all the products viewed while on site | Data Punk T-Shirt |
Categories Viewed | A list of all the product categories viewed while on site | T-Shirts |
Products Added To Cart | A list of the products added to cart while on site | Data Punk T-shirt |
Products Removed From Cart | A list of the products removed from cart while on site | Data Maiden T-shirt |
Did Start Conversion | A flag to say that they started the checkout journey |
|
Did Complete Conversion | A flag to say that they did checkout |
|
Time Spent To Convert | The number of seconds it took the user to checkout in their last session | 123 seconds |
Pages Viewed To Convert | The number of pages the user viewed to checkout in their last session | 5 |
UTM Source | The external site that brought the customer to your site, such as Facebook or Amazon. Helpful for understanding where a customer saw your link | Newsletter |
UTM Medium | The medium that brought the customer to your site, such as social or email. Helpful for understanding how a customer saw your link | |
UTM Campaign | The name of the promotion or campaign that brought a customer to your site. Helpful for understanding what campaigns customers are engaging with | EMAIL_CAMPAIGN_TSHIRTS |
UTM Term | The search terms that brought the customer to your site. Helpful for understanding ROI on paid keywords, or informing keywords to put spend behind |
|
UTM Content | The specific content that brought the customer to your site. Helpful for understanding the type of content a customer is willing to click on | logolink |
Device Used | The type of devices used to browse the website | Desktop |
Referrer URL | The site responsible for the visit - i.e. user clicked on a facebook post |
|
Days Since Last Visit | The number of days since last visit | 10 |
Auto-tracking
The Lexer JS Tag automatically tracks several events upon insertion. These include:
- Device type: Did the user browse on an Mobile, Tablet, or a Desktop device?
- Time to conversion: How long did the user spend on the site
- Referrer domain: The domain of the site the user came from - Only supported on some browsers
- Time since last visit: How long has it been since they last visited?
- UTM code: How did the user land on my site?
Conversion
At the point of a customer’s conversion you are able to send all captured data to Lexer by employing the lxt('converted')
command. This could happen when a user makes a final action on your site, like completing the purchase of a product.
UTM codes
If you use UTM codes in your newsletters’ already the Lexer Tag will automatically collect that information, once we have embedded some custom code into your newletters/email campaigns. Contact Lexer Support for assistance in setting this up. For more information on what a UTM code is read the article on Wikipedia.
Javascript Basics
The initial setup of the tag is as expected, the following lines will be provided to you by the Lexer team, and you should place it as high in the head
or body
as you can on your site, or within a HTML tag in your tag manager.
<script>
window.__lxt_cache=window.__lxt_cache||[];
function lxt(){window.__lxt_cache.push(arguments);};
window.lxt_attributes = {
email: '0644...',
added_item_to_cart: '183b...',
removed_item_from_cart: '2073...',
viewed_item: 'b3cf...'
}
lxt('initiate', 's72d...', window.lxt_attributes);</script><script async src="https://tag.lexer.io/lxt.js"></script>
lxt function
The lxt()
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:
lxt('initiate', <id>, <attributes>)
: Used to initiate the tag and provide the all important client identifier and attributes we’ll be tracking.lxt('identify', <attribute name>, <attribute value>)
: is used to identify the user in the session.lxt('track', <attribute name>, <attribute value>)
: assigns actions to the identified user.lxt('converted')
: Call this at the end of a conversion funnel, and it will send all metadata associated with the session to Lexer.
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:
<script>
window.__lxt_cache=window.__lxt_cache||[];
function lxt(){window.__lxt_cache.push(arguments);};
window.lxt_attributes = {
email: '0644...',
added_item_to_cart: '183b...',
removed_item_from_cart: '2073...',
viewed_item: 'b3cf...'
}
lxt('initiate', 's72d...', window.lxt_attributes);</script>
lxt(‘identify’, {key}, {value})
This particular call assigns an identity to the current user. Lexer’s platform deals only with identified data, so anonymous users will not be tracked through their browsing journey, so providing an idenfitier as early in the user’s browsing journey is a priority.
However, our tracking code is aware that in many websites, identification might not happen until very late in the funnel - say, 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 CDP.
Here is an example of the full request:
lxt('identify', window.lxt_attributes.email, 'myemail@mysite.com')
The paramaters are as follows:
key
: Must be the name of one of the attributes in providedlxt_attributes
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, beyond just email. Contact support for more details.
lxt(‘track’, {action}, {value})
The track call assigns attributes to the identity in the CDP. It takes two paramaters:
action
: Must be the name of one of the actions provided inlxt_attributes
.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 seperate attributes, have a chat with Lexer Support for an ideal strategy.
- Dates: Two options, stringify them to an ISO8601 date, or make them a UNIX date stamp (Just be sure to convert the value to seconds).
Here is an exmaple of the full request:
lxt('track', lxt_actions.added_product, 'metadata tshirt')
Additional Commands
lxt(‘debug’, true)
When implementing you might want additional debug information to be generated from the tag, simply call lxt('debug', true)
to enable and look at the javascript console for details.
lxt(‘reset’)
Reset’s the users 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.