Google Tag Manager
The Flight framework comes with support for Enhanced Ecommerce tracking via Google Tag Manager. This gives you a lot of freedom to set up custom conversion tracking, or to enrich/manipulate events before they are sent to Google Analytics.
Initial setup
First of all, enable GTM by going into the Norce admin -> Settings -> Statistics, and enter your GTM container ID. This will enable that GTM container on the selected channel, and make sure that all events are passed from the shop to the data layer, to be consumed by GTM.
Events triggered by Flight
Initialization (gtm.js)
{
"event": "gtm.js",
"gtm.start": 1636098501007,
"originalLocation": "https://www.demostore.se/se/sv/"
}When the script is initialized, there's an event sent called "gtm.js", which contains the time for initialization as well as the original location, which is used to solve the issue of Rogue referrals (see below). Note that this init event will only be sent on the first page load of a page, or when you do a full page refresh. For subsequent page views, there's a separate event.
Page view (pageView)
{
"event": "pageView",
"pagePath": "/se/sv/",
"pageTitle": "Demostore"
}This is triggered on every navigation. If you have added custom routes to your shop, make sure to render the <Head> component in those routes in order to both render title and meta data and to trigger the page view event. If you cannot use this component, trigger the trackPageEvent manually.
Product click (productClick)
{
"event": "productClick",
"productIds": "663011",
"ecommerce": {
"click": {
"actionField": {
"list": "Start page - Selected products"
},
"products": [
{
"id": "663011",
"productId": 491,
"productSKU": "663011",
"name": "Chair Nordic",
"base_product": "663011",
"price": 6125
}
]
}
}
}Triggered when you click a product in any kind of list. Contains data about which product was clicked and in which list the click was made.
Product details view (productDetails)
{
"event": "productDetails",
"ecommerce": {
"currencyCode": "SEK",
"detail": {
"products": [
{
"id": "663011",
"productId": 491,
"productSKU": "663011",
"name": "Chair Nordic",
"base_product": "663011",
"category": "/Mobler",
"price": 6125
}
]
}
}
}Triggered when a product page has been opened and you see the details of a product. Note that a page view event is also sent at this time.
Add product to cart (addToCart)
{
"event": "addToCart",
"productIds": "663011",
"ecommerce": {
"actionField": {
"list": "Start page - Selected products"
},
"currencyCode": "SEK",
"add": {
"products": [
{
"id": "663011",
"productId": 491,
"productSKU": "663011",
"name": "Chair Nordic",
"base_product": "663011",
"category": "/Mobler",
"price": 6125,
"quantity": 1
}
]
}
}
}Triggered when you add a product to cart. Contains information about where this was added from as well.
Remove product from cart (removeFromCart)
{
"event": "removeFromCart",
"productIds": "663011",
"pageType": "cart",
"ecommerce": {
"currencyCode": "SEK",
"remove": {
"products": [
{
"id": "663011",
"productId": 491,
"productSKU": "663011",
"name": "Chair Nordic",
"base_product": "663011",
"category": "/Mobler",
"price": 6125
}
]
}
}
}Triggered when a product is removed from the cart.
Begin checkout (checkout)
{
"event": "checkout",
"ecommerce": {
"products": [
{
"id": "663011",
"productId": 491,
"productSKU": "663011",
"name": "Chair Nordic",
"base_product": "663011",
"category": "/Mobler",
"price": 6125,
"quantity": 1
}
]
}
}Triggered when you go to the checkout. Can be used to listen for checkout initialization (e.g. in a purchase funnel).
Track product lists (productList)
{
"event": "productList",
"ecommerce": {
"currencyCode": "SEK",
"impressions": [
{
"id": "543-234-131-pack2",
"productId": 565,
"productSKU": "543-234-131-pack2",
"name": "Paketpris på vardagsrums möbler",
"base_product": "543-234-131-pack2",
"price": 20052,
"position": 0,
"list": "Nyheter"
},
{
"id": "892045234",
"productId": 564,
"productSKU": "892045234",
"name": "Nice Chair",
"base_product": "892045234",
"category": "/Mobler",
"price": 1999,
"position": 1,
"list": "Nyheter"
}
]
}
}Triggered when rendering product lists. Contains all the products rendered in a category page, or recommendation slot. Useful to see how many times a product has actually been shown.
Login (login)
{
"event": "login"
}Triggered when a user has successfully signed in.
Sign up (register)
{
"event": "register"
}Triggered when a user as signed up for a membership.
Add to wishlist (addToWishlist)
{
"event": "addToWishlist",
"articleNumber": "441922-Classic-20",
"productName": "Watch Classic"
}Triggered when you add a product to a wishlist.
Set up Google Analytics tracking in Google Tag Manager
To make implementation with Google Analytics easy, you can import our default tag configuration in your GTM container, which will set up basic events for product impressions, clicks, add to cart, remove from cart, checkout initialization, purchase tracking as well as page view tracking.
- Download the template or copy from here
- Open your container in Google Tag Manager and go to Administrator -> Import container.
- Select the file, which workspace you want to import it to, and wether you want to overwrite or merge (preferred) your current config.
- Update all Norce related dependencies - Google Analytics Settings variable and input the correct Google Analytics tracker ID.
- Publish the changes and you should be good to go!
Rogue referal issue
In order to solve the "rogue referal" issue for Single Page Apps in Google Analytics we have made an originalLocation variable available on the data layer. In order to uptake this a variable must be created in Tag Manager. If you're using the template above, we've already set this up for you. In other cases, read this blog post for instructions.