Analytics & Conversion Tracking

<hytiva-menu id="hytivaMenu" businessId="@@YOUR_EMBED_KEY_HERE@@" @event=""></hytiva-menu>
<script src="https://e.hytiva.com/v1/js/menu.js" defer></script>
<script>
// Get the menu element
let menu = document.getElementById("hytivaMenu");

// Add your event listener
menu.addEventListener("menu-event", (event) => {
	let type = event.detail.type;
	let data = event.detail.data;

	/*
	 * Do something different with each event, using a switch statement.
	 */
	switch (type) {
		case "user.login":
			console.log("User logged in with id : " + data.userId);
			break;
		case "menu.item.detail":
			console.log("Customer viewed item", data)
			break;
		case "cart.item.add":
			console.log("Customer added an item to the cart", data);
			break;
		case "cart.item.remove":
			console.log("Customer removed an item from the cart", data);
			break;
		case "cart.checkout.start":
			console.log("Customer started checkout", data);
			break;
		case "order.complete":
			console.log("Customer submitted a " + data.type + " order", data);
			break;
		default:
			// Do nothing for any other events
	}
});
</script>

<hytiva-menu id="hytivaMenu" businessId="@@YOUR_EMBED_KEY_HERE@@" @event=""></hytiva-menu>
<script src="https://e.hytiva.com/v1/js/menu.js" defer></script>

<script>
// Get the menu element
let menu = document.getElementById("hytivaMenu");

// Add your event listener
menu.addEventListener("menu-event", (event) => {
	let type = event.detail.type;
	let data = event.detail.data;

	/*
	 * Handle events with Google Analytics Enhanced Ecommerce (GA4).
	 * This code is purposefully verbose for readability and changing it to your needs.
	 */
	switch (type) {
		case "user.login":
			gtag("event", "login", {});
			break;

		case "menu.item.detail":
			var items = data.map(({ id, title, brand, category, unitPrice, options }) => {
				return {
					id: id,
					name: title,
					brand: brand,
					category: category,
					quantity : 1,
					price: unitPrice,
					variant: (options !== null) ? Object.values(options).join() : ""
				};
			});

			/*
			 * Detail views display one or more variants, which we provide in an array.
			 * Choose the value you want to associate with each detail view here.
			 * Comment / uncomment the lines for average, minimum, maximum price or decide your own value.
			 */
			// Average Price
			var value = items.reduce((previousValue, item) => previousValue + item.price, 0.00) / items.length;
			// Minimum Price
			// var value = Math.min(...items.map((item) => item.price));
			// Maximum Price
			// var value = Math.max(...items.map((item) => item.price));

			gtag("event", "view_item", {
				currency: "USD",
				value: value,
				items: items
			});
			break;

		case "cart.item.add":
			var items = data.map(({ id, title, brand, category, unitPrice, quantity, options }) => {
				return {
					id: id,
					name: title,
					brand: brand,
					category: category,
					quantity: quantity,
					price: unitPrice,
					variant: (options !== null) ? Object.values(options).join() : ""
				}
			});

			var value = items.reduce((previousValue, item) => previousValue + (item.price * item.quantity), 0.00);

			gtag("event", "add_to_cart", {
				currency: "USD",
				value: value,
				items: items
			});
			break;

		case "cart.item.remove":
			var items = data.map(({ id, title, brand, category, unitPrice, quantity, options }) => {
				return {
					id: id,
					name: title,
					brand: brand,
					category: category,
					quantity: quantity,
					price: unitPrice,
					variant: (options !== null) ? Object.values(options).join() : ""
				}
			});

			var value = items.reduce((previousValue, item) => previousValue + (item.price * item.quantity), 0.00);

			gtag("event", "remove_from_cart", {
				currency: "USD",
				value: value,
				items: items
			});
			break;

		case "cart.checkout.start":
			var order = data;
			var items = order.items.map(({ id, title, brand, category, unitPrice, quantity, options }) => {
				return {
					id: id,
					name: title,
					brand: brand,
					category: category,
					quantity: quantity,
					price: unitPrice,
					variant: (options !== null) ? Object.values(options).join() : ""
				}
			});

			gtag('event', 'begin_checkout', {
				"value": order.subtotal,
				"currency": "USD",
				"items": items
			});
			break;

		case "order.complete":
			var order = data;
			var items = order.items.map(({ id, title, brand, category, unitPrice, quantity, options }) => {
				return {
					id: id,
					name: title,
					brand: brand,
					category: category,
					quantity: quantity,
					price: unitPrice,
					variant: (options !== null) ? Object.values(options).join() : ""
				}
			});

			gtag('event', 'purchase', {
				"transaction_id": order.orderId,
				"affiliation": "store",
				"value": order.subtotal,
				"currency": "USD",
				"items": items
			});
			break;

		default:
			// Do nothing for any other events
	}
});
</script>