Jane Docs
Search…
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
1
product_id = number // the ID of the product
2
name = string // the name of the product
3
brand = string // the brand of the product
4
category = ["indica", "sativa", "hybrid", "cbd"]
5
kind = ["flower", "edible", "extract", "merch", "grow", "tincture", "gear", "topical", "pre-roll", "vape"]
6
7
Checkout Event Data
8
count = number // the quantity added to cart of each item
9
unit_price = number // the unit price of each item
10
special_id = number | null // if applicable, the id of the special applied to the product
11
special_title = string | null // if applicable, the title of the special applied to the product
Copied!
Checkout
1
{ messageType: 'analyticsEvent',
2
payload: { name : 'checkout',
3
properties: {
4
estimatedTotal: number
5
cartId: number
6
products: Array { product_id, name, brand, category, kind, count }
7
}
8
}
9
}
Copied!
Menu Load
customerEmail will be non-null only if the user is authenticated.
1
{ messageType: 'analyticsEvent',
2
payload: { name : 'menuLoad',
3
properties: { storeId: string }
4
}
5
}
Copied!
Product View
1
{ messageType: 'analyticsEvent',
2
payload: { name : 'productView',
3
properties: {
4
productId: string,
5
productKind: string
6
product: { category, brand, name, kind }
7
}
8
}
9
}
Copied!
Item Added To Cart
1
{ messageType: 'analyticsEvent',
2
payload: { name : 'cartItemAdd',
3
properties: {
4
productId: string,
5
product: { product_id, name, brand, category, kind }
6
}
7
}
8
}
Copied!
Item Removed From Cart
1
{ messageType: 'analyticsEvent',
2
payload: { name : 'cartItemRemoval',
3
properties: { productId: string }
4
}
5
}
Copied!
Implementation:
1
<script>
2
window.addEventListener("message", receiveMessage, false);
3
4
function receiveMessage(event) {
5
var payload = event.data && event.data.payload;
6
7
if (!payload || event.data.messageType !== 'analyticsEvent') return;
8
9
if (
10
payload.name === "checkout"
11
) {
12
var subtotal =
13
payload.properties && payload.properties.estimatedTotal;
14
var cartId =
15
payload.properties && payload.properties.cartId;
16
var products =
17
payload.properties && payload.properties.products;
18
19
// do something with payload
20
console.log(subtotal, cartId, products);
21
22
// Example – if you're using Enhanced Ecommerce in Google Analytics,
23
// you can use the following code:
24
var items =
25
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}))
26
27
gtag('event', 'purchase', {
28
"transaction_id": cartId,
29
"affiliation": "store",
30
"value": subtotal,
31
"currency": "USD",
32
"items": items
33
});
34
}
35
36
if (
37
payload.name === 'menuLoad'
38
) {
39
var storeId =
40
payload.properties && payload.properties.storeId;
41
42
// do something with the customerEmail if user is authenticated
43
console.log(storeId);
44
}
45
46
if (
47
payload.name === 'productView'
48
) {
49
var productId =
50
payload.properties && payload.properties.productId;
51
var productKind =
52
payload.properties && payload.properties.productKind;
53
var product =
54
payload.properties && payload.properties.product;
55
56
// do something with productId, productKind, product
57
console.log(productId, productKind, product);
58
}
59
60
if (
61
payload.name === 'cartItemAdd'
62
) {
63
var productId =
64
payload.properties && payload.properties.productId;
65
var product =
66
payload.properties && payload.properties.product;
67
68
console.log(productId); // do something with the productId
69
}
70
71
if (
72
payload.name === 'cartItemRemoval'
73
) {
74
var productId =
75
payload.properties && payload.properties.productId;
76
77
console.log(productId); // do something with the productId
78
}
79
}
80
</script>
Copied!

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
Last modified 6mo ago
Copy link
Contents
Example