Jane Docs 1.0
Search…
⌃K

Custom Analytics Scripts

How to fire off custom analytics events on Jane
Use Case
You’d like to integrate your own analytics pipeline (e.g. Google Analytics) with Jane.
High-Level Solution
When users interact on your menu, Jane’s embedded solution will dispatch an ‘analytics event’ using the browser’s postMessage API. You can listen to these events and fire off any analytics events you wish.
Supported Events:
Glossary
product_id = number // the ID of the product
name = string // the name of the product
brand = string // the brand of the product
category = ["indica", "sativa", "hybrid", "cbd"]
kind = ["flower", "edible", "extract", "merch", "grow", "tincture", "gear", "topical", "pre-roll", "vape"]
Checkout Event Data
count = number // the quantity added to cart of each item
unit_price = number // the unit price of each item
special_id = number | null // if applicable, the id of the special applied to the product
special_title = string | null // if applicable, the title of the special applied to the product
Checkout
{ messageType: 'analyticsEvent',
payload: { name : 'checkout',
properties: {
estimatedTotal: number
cartId: number
products: Array { product_id, name, brand, category, kind, count }
}
}
}
Menu Load
customerEmail will be non-null only if the user is authenticated.
{ messageType: 'analyticsEvent',
payload: { name : 'menuLoad',
properties: { storeId: string }
}
}
Product View
{ messageType: 'analyticsEvent',
payload: { name : 'productView',
properties: {
productId: string,
productKind: string
product: { category, brand, name, kind }
}
}
}
Item Added To Cart
{ messageType: 'analyticsEvent',
payload: { name : 'cartItemAdd',
properties: {
productId: string,
product: { product_id, name, brand, category, kind }
}
}
}
Item Removed From Cart
{ messageType: 'analyticsEvent',
payload: { name : 'cartItemRemoval',
properties: { productId: string }
}
}
Pre-requisite:
To be able to properly send the data to Google Analytics, the Google Tag has to be properly installed in your site. This can be done either automatically via Google Tag Manager or manually, as shown in the tagging instructions sections of the setup.
The manual installation boils down to adding the script shown below, adding the proper id of your Google Analytics
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "YOUR_ID");
</script>
Implementation:
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
var payload = event.data && event.data.payload;
if (!payload || event.data.messageType !== 'analyticsEvent') return;
if (
payload.name === "checkout"
) {
var subtotal =
payload.properties && payload.properties.estimatedTotal;
var cartId =
payload.properties && payload.properties.cartId;
var products =
payload.properties && payload.properties.products;
// do something with payload
console.log(subtotal, cartId, products);
// Example – if you're using Enhanced Ecommerce in Google Analytics,
// you can use the following code:
var items =
products.map(({ product_id, name, brand, category, kind, unit_price, count, special_id, special_title }) => ({id: product_id, name: name, brand: brand, category: kind, variant: category, quantity: count, price: unit_price}))
gtag('event', 'purchase', {
"transaction_id": cartId,
"affiliation": "store",
"value": subtotal,
"currency": "USD",
"items": items
});
}
if (
payload.name === 'menuLoad'
) {
var storeId =
payload.properties && payload.properties.storeId;
// do something with the customerEmail if user is authenticated
console.log(storeId);
}
if (
payload.name === 'productView'
) {
var productId =
payload.properties && payload.properties.productId;
var productKind =
payload.properties && payload.properties.productKind;
var product =
payload.properties && payload.properties.product;
// do something with productId, productKind, product
console.log(productId, productKind, product);
}
if (
payload.name === 'cartItemAdd'
) {
var productId =
payload.properties && payload.properties.productId;
var product =
payload.properties && payload.properties.product;
console.log(productId); // do something with the productId
}
if (
payload.name === 'cartItemRemoval'
) {
var productId =
payload.properties && payload.properties.productId;
console.log(productId); // do something with the productId
}
}
</script>

Example

If you'd like to test this out using a Jane staging environment, please use the html file below:
jane-analytics-example.html
3KB
Text
Jane Analytics Sandbox HTML File