Limio now allows you to feed data to a Tag Manager through a data layer. The Tag Manager, such as Google Tag Manager or Tealium, will then be responsible for sharing the collected data to your analytics' tool of choice, such as Google Analytics or Snowplow. The Limio solution provides the maximum control and flexibility for enterprise clients to track all the real-time user data and map it to their analytics' custom dimensions.
The solution described below allows to collect customer data via the data layer object as well as any real-time user events, such as adding to a cart or pressing a cancel button.
If you want to embed a tracking technology, please embed the code in Inject Script Code or Inject Document and/or use the Data Layer.
- What is a Data Layer?
- Setting up your Tag Manager
- Capturing Events within the Data Layer
- For Customers on Release 66 and below
- Seeing your Data Layer
Note: Please note that direct integration with Facebook Pixel ID, Google Analytics ID, Google Optimize ID, LinkedIn Insight ID are being retired.
What is a Data Layer?
A Data Layer is an object in the window which contains all the information you wish to add to a Tag Manager such as Google Tag Manager or Tealium. The types of data contained in a data layer can vary greatly. It can consist of things like e-commerce transactional information, the objects currently present on the page, and user data.
Limio allows you to take in information about the user, Campaigns, Offers and transactional data and add it to your data layer. This is the primary supported way of configuring the analytics within Limio.
Setting up your Tag Manager
First you will need to set up your Tag Manager to be added to each Limio page To do this you will need to navigate to your analytics settings (Developer -> Settings -> Analytics):
Here you should see a number of settings relating to Analytics setup for Limio, the most important one here is:
-
Inject Document
-
Allows for global injection of HTML code into Limio Landing Pages
-
To initialise the Data Layer you will firstly need to define your Tag Manager. It's important to remember that this is a global setting and so all changes made here will be applied to each page. Please refer to your Tag Manager documentation for more details on how to inject your configuration into an external site e.g.:
Capturing Events within the Data Layer
Setting up Event capture with your Tag Manager
It is possible to capture events in the following way:
<script>
limio.dataLayer.subscribe(cb)
//where the callback function had the following signature
function cb(event) {
if (typeof dataLayer === 'object' && Array.isArray(dataLayer)) {
dataLayer.push(event)
}
}
</script>
This callback function is configurable by the user and can be used to push events to the limio.dataLayer object on the window. This function can take the documented Limio events and convert them to a format your Tag Manager can manage e.g.:
In the event of a customer successfully being logged-in:
{
event: "user-authentication",
user: {
email: "customer@limio.com",
family_name: "Customer",
given_name: "Name"
}
}
In the event of a customer adding an Offer to Cart:
{
event: "add_to_cart",
label: "Add offer: xxxxx",
currency: "USD",
value: 50,
items: [
{
offer_name: "offer name",
sku: ["product_sku_1", "product_sku_2"],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
}
]
}
In the event of a customer removing an Offer from Cart:
{
event: "remove_from_cart",
label: "Remove offer: xxxxx",
currency: "USD",
value: 50.00
}
In the event of a customer initialising the Checkout flow:
{
event: "begin_checkout",
label: "Begin Checkout",
currency: "USD",
value: 75.00 (total value of checkout at that point),
items: [
{
offer_name: "offer name",
sku: ["product_sku_1", "product_sku_2"],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
offer_name: "offer name 2",
sku: ["product_sku_3"],
term: "month" | "year" | "week",
currency: "USD",
price: 25,
quantity: 4
}
]
}
In the event of a customer successfully completing a new order:
Note: This requires the Synchronous Process Order setting to be enabled in your shop to populate correctly.
The event will look like:
{
event: "order",
order_type: "new",
subscriptionId: "sub id",
userSubscriptionType: "new" | "returning",
paymentType: payment method used,
total: 75,
currency: "USD",
quantity: 5,
items: [
{
offer_name: "offer name",
sku: ["product_sku_1", "product_sku_2"],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
offer_name: "offer name 2",
sku: ["product_sku_3"],
term: "month" | "year" | "week",
currency: "USD",
price: 25,
quantity: 4
}
]
}
For Customers on Release 66 and below:
| ⚠️ This is legacy functionality and while available will not be further developed and support in future releases. |
For customers on Release 66 and below, a Limio Data Object is available to be used instead. Before setting this up, we recommend you contact Limio Support and arrange an upgrade to a later version to take advantage of advanced Events.
Setting up your Data Object
First you will need to set up the initial object of what your Data Layer will look like. To do this you will need to navigate to your analytics settings (Developer -> Settings -> Analytics):
Here you should see a number of settings relating to the Data Layer setup for Limio - namely:
-
Data Layer ID
- Defines the name of the global object which holds your data layer data this is commonly called simply "dataLayer"
-
Inject Document
-
Allows for global injection of HTML code into Limio Landing Pages
-
To initialise the Data Layer you will firstly need to define the Data Layer ID and then initialise the Data Layer object within the Inject Document setting. It's important to remember that this is a global setting - therefore it's important to not make the Data Layer destructive, i.e. make sure that if a Data Layer is already present, that data must be maintained instead of wiping it.
For example, if your Data Layer ID is "dataLayer":
<script>
window.dataLayer = window.dataLayer || {};
window.dataLayer.events = window.dataLayer.events || [];
window.dataLayer.user = window.dataLayer.user || {
status: "logged-out",
contactId: undefined,
};
window.dataLayer.screen = window.dataLayer.screen || {
name: undefined,
};
window.dataLayer.limio = {
shop_country: undefined,
campaign: undefined,
offers: undefined,
journey: undefined,
cart: {},
transaction: {},
};
</script>
This will initiate a Data Layer object that looks as follows:
{
events: [],
user: {
status: "logged-out",
contactId: undefined
},
screen: {
name: undefined
},
limio: {
shop_country: undefined,
campaign: undefined,
offers: undefined,
journey: undefined,
cart: {},
transaction: {}
}
}
Data in the Limio Data Object
Each Limio page will then have access to data in the Limio Data Layer to provide more rich analytics information. This sits in a hidden object that looks like this:
{
"limio": {
"shop_country": "{{IP Country}}",
"campaign": "{{The Limio Campaign path}}",
"campaignParams": {
"name": "{{The Limio Campaign name}}",
"tag": "{{The Limio Campaign tag}}",
"path": "{{The Limio Campaign path}}",
"entry": "{{The Limio Landing page customer entered on}}"
},
"offers": [
{
"name": "{{Limio Offer Name for Offer Present on Limio Landing Page}}",
"path": "{{Limio Offer Path for Offer Present on Limio Landing Page}}",
"data": {
"attributes": "{{Limio Offer Attributes Object for Offer Present on Limio Landing Page}}",
"products": [
{
"name": "{{Limio Product Name for Offer Present on Limio Landing Page}}",
"path": "{{Limio Product Path for Offer Present on Limio Landing Page}}",
"attributes": "{{Limio Product Attributes Object for Offer Present on Limio Landing Page}}"
}
]
}
}
],
"journey": "{{Limio Journey accesses}}",
"currency": "{{Transaction currency}}",
"total_price": "{{Transaction total amount}}",
"location": "{{Current URL}}",
"referrer": "{{URL which referred to Limio Landing Page}}"
},
"user": {
"status": "{{Login status of current user}}",
"sub": "{{The sub (subject) of JWT ID Token}}",
"contactId": "{{Salesforce Contact ID (If using Salesforce SSO)}}",
"userSubscriptionType": {{"Returning" | "New" }} // Only available on /checkout and /complete
},
"screen": {
"name": {{"offer-page" | "customer-details" | "delivery-details" | "billing-details" | "order-complete"}}
},
"order": {
"transaction": {
"order_id": "{{Limio Order reference}}",
"currency": "{{Transaction currency}}",
"value": "{{Transaction total amount}}",
"payment_type": "{{Transaction payment method e.g. PayPal, CreditCard}}"
}
},
"events": []
}
This data layer will persist on every page and so new data such as transactional data will be put into the Data Layer as it becomes available.
Any custom attributes configured on the offer will appear inside of the attributes object of the offer. This can be used for configuring offer-specific analytics information without further code changes.
Events within Limio data object
As well as the live Data Layer values. Limio will push events in the "events" object within your Data Layer. Below is a full list of available events:
In the event of selecting a payment method during checkout:
{
event: "element.click.selection",
name: "element.click.selection",
category: "payment type",
type: <<Payment Type ID>>
}
In the event of failed form submission:
{
event: "form.formSubmitError",
name: "form.formSubmitError",
form: {
name: "billing-details",
category: "subscription",
error: `Missing fields: [firstName, lastName]`
}
}
In the event of a declined payment:
{
event: "form.formSubmitError",
name: "form.formSubmitError",
form: {
name: "payment",
category: "subscription",
error: "payment-declined",
data: <<Error Data>>
}
In the event of cancellation reason selection:
{
event: "form.formSubmit",
name: "form.formSubmit",
form: {
name: "cancellation-reason",
category: "subscription-cancellation",
fields: {
name: "reason",
value: <<Cancellation Reason ID>>
}
}
}
In the event of cancellation confirmation:
{
event: "form.formSubmit",
name: "form.formSubmit",
form: {
name: "cancellation-confirm",
category: "subscription-cancellation",
fields: {
name: "reason",
value: <<Cancellation Reason ID>>
}
}
}
Saving and publishing your changes
Once you have configured your data layer in Settings, save your changes. Note that at this time, they won't be published online. You will need to rebuild all your campaigns/pages, then publish each of them individually. See How to publish your page.
Seeing your Data Layer
Once configured your data layer can be seen on each page via the JavaScript Developer's Console of your browser, to access the console following the steps outlined for Chrome, Firefox and Safari.
In the JavaScript console while on any Limio Page, you can type in "window.{{Data Layer Name}}", for example if your Data Layer was name "dataLayer" you would access it like this:
Here you can explore how the Limio Checkout fills out the Data Layer as you move from Landing Page, to Checkout, to Order Complete.
Comments
0 comments
Please sign in to leave a comment.