Javascript Tag

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 Autodetection of UTM tracking tags in the URL filling a list of campaign engagement Newsletter
UTM Medium Autodetection of UTM tracking tags in the URL filling a list of campaign engagement email
UTM Campaign Autodetection of UTM tracking tags in the URL filling a list of campaign engagement EMAIL_CAMPAIGN_TSHIRTS
UTM Term Autodetection of UTM tracking tags in the URL filling a list of campaign engagement  
UTM Content Autodetection of UTM tracking tags in the URL filling a list of campaign engagement 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:

  1. lxt('initiate', <id>, <attributes>): Used to initiate the tag and provide the all important client identifier and attributes we’ll be tracking.
  2. lxt('identify', <attribute name>, <attribute value>): is used to identify the user in the session.
  3. lxt('track', <attribute name>, <attribute value>): assigns actions to the identified user.
  4. 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 provided lxt_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 in lxt_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.

Further reading