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.
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 -> General 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.:
You will then need to add any URLs relating to your tag management solution to the Content Security Policy section in your Limio app instance. This can be found under Allowed Hosts (Developer -> Allowed Hosts):
You can use the Add New Host section to add the relevant host - once that is done, you may need to wait for around 5 to 10 minutes for the changes to be reflected in your Limio environment. This does not require pages to be rebuilt and republished.
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.
Example page_view event payload:
{
"event": "page_view",
"label": "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,
"term": "month",
"attributes": {
"rate_plan__zuora": "",
"ltm_firstPaymentAmount": "9.80",
"ltm_product": "DIGITAL",
"ltm_recurringPaymentAmount": "11.99",
"ltm_journey": "acquisition"
},
"products": [
{
"sku": "DIGITAL001",
"rate_plan": "Monthly Offer"
}
]
}
],
"addOns": [
{
"addon_name": "add-on name",
"products": [
{
"sku": "DIGITAL001",
"rate_plan": "Monthly Add On"
}
],
"currency": "GBP",
"price": 5,
"attributes": {
"discount_field": {
"value": "4",
"termLength": "1",
"termType": "months"
}
}
}
],
"tag": "{{Limio Page tag}}",
"path": "{{Limio App 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.
Example user-authentication event payload:
{
event: "user-authentication",
user: {
email: "customer@limio.com",
family_name: "Customer",
given_name: "Name"
},
userSubscriptionType: "New" || "Returning"
}Add to cart
An add_to_cart event will fire when an item (for example offer or add-on) is added to a basket. An add_to_cart event will be triggered in the following scenarios:
- Customer adds an item to their cart through an offers component
- Customer accepts an upsell with the Cart Items component (both an add_to_cart and remove_from_cart event will be triggered)
- Customer accepts a cross-sell with the Cross Sell component
- Customer clicks a purchase link which names specific offers or an offer label
- Note: purchase links that use a basket ID will not trigger the add_to_cart event
The event can contain one or more items, and the value field will be the total value of the items added to cart in that action.
Example add_to_cart event payload:
{
event: "add_to_cart",
label: "Add items: /offers2/offer name, /add_on/add-on name",
currency: "USD",
value: 150,
items: [
{
offer_name: "offer name",
attributes: {}
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Offer"
}
],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
addon_name: "add-on name",
attributes: {}
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Add On"
}
],
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. A remove_from_cart event will be triggered in the following scenarios:
- Customer removes manually removes an item from their cart, for example through the Cart Items component, or the floating basket
- Customer accepts an upsell offer in the Cart Items component (both an add_to_cart and remove_from_cart event will be triggered)
This event will only every contain one item, and the value is that of the item.
Example remove_from_cart event payload:
{
event: "remove_from_cart",
label: "Remove offer: xxxxx",
currency: "USD",
value: 50.00
}Apply promo code
An add_promo_code event will fire when a promo code is added to the cart. This could be through the Promo Code Redeem component, or a purchase link using the &pc=xxx syntax. Note that if an abandoned basket contains a promo code, and a purchase link is used which uses the basket ID, the add_promo_code event will not be triggered.
Example add_promo_code event payload:
{
event: "add_promo_code",
name: "Promo code name",
value: 40.00 (The order total post promo code being applied),
currency: "USD",
discount: 10.00 (The discount on the order expressed as a monentary value),
items: [
{
offer_name: "offer name",
attributes: {}
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Offer"
}
],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
}
]
} Remove promo code
A remove_promo_code event will fire when a promo code is removed from the cart. In most scenarios, this would be through the Promo Code Redeem component.
Example remove_promo_code event payload:
{
event: "remove_promo_code",
name: "Promo code name"
} 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, including any discounts applied.
This event will be triggered in the following scenarios:
- Customer adds an offer to their basket which is configured to go straight to checkout
- Customer navigates to a checkout, potentially through the Initiate Checkout Button
- Customer clicks on a purchase link which is configured to go to a checkout page
Example begin_checkout event payload:
{
event: "begin_checkout",
label: "Begin Checkout",
currency: "USD",
value: 65.00 (The total value of checkout at that point post discount),
discount: 10.00 (The discount on the order expressed as a monentary value),
promoCode "Name of promo code"
items: [
{
offer_name: "offer name",
attributes: {},
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Offer"
}
],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
addon_name: "add-on name",
attributes: {}
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Add On"
}
],
term: "month" | "year" | "week",
currency: "USD",
price: 25,
quantity: 4
}
]
} 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, including information about any promo codes applied.
Example order event payload:
{
event: "order",
order_type: "new",
subscriptionId: "sub id",
userSubscriptionType: "new" | "returning",
paymentType: payment method used,
total: 65 (The order total post discount),
discount: 10.00 (The discount on the order expressed as a monentary value),
promoCode: "Name of promo code",
currency: "USD",
quantity: 5,
items: [
{
offer_name: "offer name",
attributes: {},
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Offer"
}
],
term: "month" | "year" | "week",
currency: "USD",
price: 50,
quantity: 1
},
{
offer_name: "offer name 2",
attributes: {},
products: [
{
sku: "DIGITAL001",
rate_plan: "Monthly Offer"
}
],
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,
subscriptionId: "XXXXXXXX",
order_id: "XXXXXXXX",
currency: "EUR",
value: 49.99,
payment_type: "card",
promoCode: "Promo code name",
discount: 10.00 (The discount on the order expressed as a monentary value)
}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.
Comments
0 comments
Please sign in to leave a comment.