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.
For example, if you use Google Tag Manager, this representation from Analytics Mania explains how the Limio Shop & Self-Service (website), the Limio data layer, Google Tag Manager, and analytics service such as Google Analytics will relate:
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
- (LEGACY) For Customers on Release 66 and below
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.:
Once you have connected your Tag Manager to Limio, you will then need to use your Tag Manager to connect the data layer events to the destination, for example Google Analytics 4. You will need to create Tags in Google Tag Manager, use the Tag Google Analytics: GA4 Event and map the Limio Data Layer User Events, e.g. add_to_cart (more details here). Alternatively, you can map your data to via the Custom HTML tag (more details here).
Once your events feeds into Google Analytics 4, you can start leveraging ecommerce reports, such as Purchase Journey.
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.:
To check the data layer is firing events on your Limio shop and self-service, build and publish your page. Inspect the page, go to the Network tab and filter for events. You will see the relevant Limio user events firing.
Page View
A page_view event will fire every time a user lands on a page. It provides data of all offers/add-ons visible on the page as well as page information such as page path, page tag, meta title, and page referrer.
payload example for page_view:
{
"event": "page_view",
"campaign_name": "{{The Limio Page name}}",
"offers": [
{
"offer_name": "{{Limio Offer Name for Offer Present on Limio Landing Page}}",
"path": "{{Limio Offer Path for Offer Present on Limio Landing Page}}",
"currency": "GBP",
"price": 15,
"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}}"
}
]
}
}
],
"addOns": [
{
"addon_name": "add-on name",
"products": [{"sku": "LI.DIGITAL"}],
"currency": "GBP",
"price": 5,
"attributes": {
"discount_field": {
"value": "4",
"termLength": "1",
"termType": "months" }
}
}
],
"tag": "{{Limio Page tag}}",
"path": "{{Limio Page path}}",
"page_path": "{{Current Page Path}}",
"page_location": "{{Current URL}}",
"page_title": "{{Current Page Meta Title}}",
"referrer": "{{URL which referred to Limio Landing Page}}"
}
User authentication
A user-authentication event will fire when a customer successfully logs in.
payload example for user-authentication:
{
event: "user-authentication",
user: {
email: "customer@limio.com",
family_name: "Customer",
given_name: "Name"
}
}
Add to cart
An add_to_cart event will fire when an item is added to a basket, this can occur both on and off a checkout, for example if you had a basket on your offer page. The event can contain one or more items, and the value field will be the total value of the entire basket.
payload example for add_to_cart:
{
event: "add_to_cart",
label: "Add offer: /offers2/offer path",
currency: "USD",
value: 150,
items: [
{
offer_name: "offer name",
sku: ["product_sku_1", "product_sku_2"],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
addon_name: "add-on name",
sku: ["product_sku_1", "product_sku_2"],
term: "month" | "year" | "week",
currency: "USD",
price: 100,
quantity: 1
},
]
}
Remove from cart
A remove_from_cart event will fire when an item is removed from a basket, similarly to add_to_basket this can occur both on and off a checkout, for example, if you had a basket on your offer page. This event will only every contain one item, and the value is that of the item.
payload example for remove_from_cart:
{
event: "remove_from_cart",
label: "Remove offer: xxxxx",
currency: "USD",
value: 50.00
}
Begin Checkout
A begin_checkout event will fire when a user initiates a checkout. It will contain all basket items, and the total value of the basket when initiated.
payload example for begin_checkout:
{
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
},
{
addon_name: "add-on name",
sku: ["product_sku_3"],
term: "month" | "year" | "week",
currency: "USD",
price: 25,
quantity: 4
}
]
}
Submitting a new order
An order event will fire once the order has been sent before the order complete page. The data includes all items in the cart at the time of checkout and the total value of the entire basket.
payload example for order:
{
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
}
]
}
In the event of a customer getting to the order complete page:
Note: This requires the Synchronous Process Order setting to be enabled in your shop to populate correctly and a standard checkout flow to be implemented.
The event will look like:
{
event: "order_complete_view",
page_path: "/complete/,
page_location: "https://my-shop.com/complete/",
page_title: "Order Complete",
tag: /tags/new-page,
campaign: /pages2/new-page,
referrer: referrer,
subscription_id: "XXXXXXXX",
order_id: "XXXXXXXX",
currency: "EUR",
value: 49.99,
payment_type: "card"
}
(LEGACY) 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 Page path}}",
"campaignParams": {
"name": "{{The Limio Page name}}",
"tag": "{{The Limio Page tag}}",
"path": "{{The Limio Page 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 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.