Javascript Tag basics
Enrich your customer data
The Lexer Javascript Tag allows you to combine digital customer behavior with purchase and email data for a true, 360 degree view of your customer.
The Lexer Tag on your website facilitates individual analysis of a customer’s on-site behaviours. All attributes that are created via the tag can be searched, analyzed, and combined with first-party data, and then segmented.
This means real humans, not cookies!
In this article, we’ll discuss how the Javascript Tag works, its benefits, and the “out of the box” attributes that it can create, before wrapping up and talking through some next steps.
Why you should use the Lexer Javascript Tag
Between privacy concerns and depreciating accuracy, the third-party cookie is on the way out, putting pressure on marketers and tech providers to shift to other alternatives.
Lexer’s zero-party data solution is the Lexer Tag, and at Lexer we’re only interested in real people we can identify, not cookies, and the Lexer Tag specializes in just that! As soon as someone identifies themselves on your channels, we track and connect their digital behaviors to their profile in the Lexer Hub.
Implementing the Lexer Javascript Tag
The Javascript Tag is straightforward to implement and can be embedded in the code of your website or inside of a tag manager, for example, Google Tag Manager. It’s a two-step process:
- Lexer scope and configure the Tag bespoke to you.
- You and your team implement the Tag on your website.
The Javascript Tag works by capturing customer data, such as the number of seconds it took the customer to checkout in their last session, present on your website’s existing dataLayers. This data is identified when we scope your website. If there is no current dataLayer identified on site when we are scoping, then we make dataLayer recommendations according to Google Enhanced Ecommerce standards to gather the data.
This data is then sent to Lexer through a Payload that can map to a customer profile through an identifiable action (i.e. newsletter subscription, account login, account registration, transaction, etc.) enriching your existing customer data.
Out of the box attributes
When the Lexer Tag is embedded into your website it collects your customers’ activities in an action or manner specified by you from one of the 18 “out of the box” attributes listed below. Each of these is fully customizable to your use case and requirements. These attributes capture first-party data from the customers’ interaction on your website once they are linked.
The Lexer Javascript Tag is not designed to support web analytics and is strictly focused on recording actions that can be linked to an identifiable customer or prospect.
Auto-tracking
The Lexer Javascript Tag automatically tracks several events upon deployment. These include:
Device used: Did the customer browse on a Mobile, Tablet, or Desktop device?
Time spent to convert: How long did the customer spend on the site?
Referrer URL: The domain of the site the customer came from, only supported on some browsers.
UTM codes: How did the customer 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 [.code]lxt('converted')[.code] command. This could happen when a customer makes a final action on your site, like completing the purchase of a product.
Adding Lexer to your CORS policy
CORS, or Cross-Origin Resource Sharing, is an essential security feature that lets heaps of resources (e.g., fonts, JavaScript, etc.) on a web page be requested from another domain. You'll need to add * lexer.io to your CORS policy to allow your website to communicate with Lexer. For more information about CORS, you can refer to this comprehensive guide by Mozilla: Cross-Origin Resource Sharing (CORS).
Follow these steps to add Lexer to your CORS policy:
- Locate your server configuration file: This will be specific to your server setup. It could be an [.code].htaccess[.code] file for an Apache server, a [.code]nginx.conf[.code] file for Nginx, or a [.code]web.config[.code] file for Microsoft servers.
- Add a CORS policy: You will need to add or update a CORS policy in this file. The exact syntax will depend on your server, but in general, you will need to add a line that specifies [.code]*lexer.io[.code] as an allowed origin. For example, in an Apache server, you might add: [.code]Header set Access-Control-Allow-Origin "* lexer.io"[.code]
- Restart your server: After saving your configuration file, you'll need to restart your server for the changes to take effect.
UTM codes
Urchin Tracking Module (UTM) codes are snippets of code attached to the end of a URL. They allow us to track data like traffic sources or campaign click names.
However, they don’t stop there. If you can include a UTM code in your URL, Lexer can be configured to track it.
As an example, you can append the email address of your customer to the URL when they click on an email, bumping up your identification rate.
For example:
[.code]www.yoursite.com/category/product?utm_campaign=campaignName&utm_source=newsletter&utm_email=myname@email.com[.code]
Implementation FAQs
What is a dataLayer?
A JavaScript object that collects data on your website in a standardized way. This data is dynamic depending on the page being viewed. A dataLayer is the most robust way to pass data to the Lexer Tag.
Why do we need a Tag Management System (TMS)?
A TMS allows you to deploy and manage tags on your site without relying wholly on IT. It removes the need to hard code anything into your website. Whilst a TMS isn’t necessary for deploying the Tag, it streamlines the process from implementation to QA.
What can the Tag track?
The Lexer Tag can track any data that you surface in the dataLayer. The Tag is told what data to capture by the dataLayer path you specify for your variable.
If there is a new data point you would like to capture and it doesn’t have a corresponding Lexer attribute, get in touch with your Solutions Lead.
Next steps
Now you know what the Lexer Javascript Tag is, its benefits, and how it can be implemented. The following Tag articles in this section expand further on the initial setup and how the dataLayer can be configured with Shopify.
