dataLayer & Google Tag Manager with Shopify Checkout Extensibility

// Google Tag Manager (GTM) & dataLayer integration for Shopify Checkout Extensibility
// provided by owntag.eu

// Configuration
const gtmContainerId = "GTM-XXXXXXX";
const gtmContainerUrl = "https://www.googletagmanager.com/gtm.js";

(function (w, d, s, l, i) {
	w[l] = w[l] || [];
	w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
	var f = d.getElementsByTagName(s)[0],
		j = d.createElement(s),
		dl = l != "dataLayer" ? "&l=" + l : "";
	j.async = true;
	j.src = gtmContainerUrl + "?id=" + i + dl;
	f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", gtmContainerId);

const pushToDataLayer = (eventName, eventData) => {
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({
		event: eventName,
		...eventData,
	});
};

async function sha256(message) {
	const msgBuffer = new TextEncoder().encode(message);
	const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer);
	const hashArray = Array.from(new Uint8Array(hashBuffer));
	const hashHex = hashArray
		.map((b) => b.toString(16).padStart(2, "0"))
		.join("");
	return hashHex;
}

async function hashUserData(userData) {
	const hashPromises = Object.entries(userData).map(async ([key, value]) => {
		if (value) {
			return [key, await sha256(value)];
		}
		return [key, null];
	});
	return Object.fromEntries(await Promise.all(hashPromises));
}

analytics.subscribe("page_viewed", (event) => {
	const userData = {
		sha256_email_address: init.data.customer?.email || null,
		sha256_phone_number: init.data.customer?.phone || null,
		sha256_first_name: init.data.customer?.firstName || null,
		sha256_last_name: init.data.customer?.lastName || null,
	};

	hashUserData(userData).then((hashedUserData) => {
		pushToDataLayer("init", {
			shop_country: init.data.shop.countryCode,
			shop_name: init.data.shop.name,
			shop_domain: init.data.shop.myShopifyDomain,
			shop_storefront_url: init.data.shop.storefrontUrl,
			user_data: hashedUserData,
			user_id: init.data.customer?.id,
			orders_count: init.data.customer?.ordersCount,
		});

		pushToDataLayer("page_view", {
			page_location: event.context.window.location.href,
			page_title: event.context.document.title,
		});
	});
});

const createItemData = (productVariant) => {
	return {
		item_id: productVariant.sku,
		item_name: productVariant.product.title,
		item_variant: productVariant.title,
		currency: productVariant.price.currencyCode,
		item_brand: productVariant.product.vendor,
		price: productVariant.price.amount,
	};
};

const createLineItemsData = (lineItems) => {
	return lineItems.map((item) => {
		return {
			item_id: item.variant.sku,
			item_name: item.title,
			item_variant: item?.variant.title,
			currency: item.variant.price.currencyCode,
			item_brand: item.variant.product.vendor,
			price: item.variant.price.amount,
			quantity: item.quantity,
		};
	});
};

// view_item
analytics.subscribe("product_viewed", (event) => {
	const { productVariant } = event.data;
	const itemData = {
		item_id: productVariant.sku,
		item_name: productVariant.product.title,
		item_variant: productVariant.title,
		currency: productVariant.price.currencyCode,
		item_brand: productVariant.product.vendor,
		price: productVariant.price.amount,
	};

	pushToDataLayer("view_item", {
		ecommerce: {
			currency: productVariant.price.currencyCode,
			value: productVariant.price.amount,
			items: [itemData],
		},
		_clear: true,
	});
});

// add_to_cart
analytics.subscribe("product_added_to_cart", (event) => {
	const { cartLine } = event.data;
	const subtotalPrice = cartLine.cost.totalAmount.amount;
	const itemData = {
		item_id: cartLine.merchandise.sku,
		item_name: cartLine.merchandise.product.title,
		item_variant: cartLine.merchandise.title,
		currency: cartLine.merchandise.price.currencyCode,
		item_brand: cartLine.merchandise.product.vendor,
		price: cartLine.merchandise.price.amount,
	};

	pushToDataLayer("add_to_cart", {
		ecommerce: {
			currency: cartLine.merchandise.price.currencyCode,
			value: subtotalPrice.toFixed(2),
			items: [Object.assign(itemData, { quantity: cartLine.quantity })],
		},
		_clear: true,
	});
});

analytics.subscribe("checkout_started", (event) => {
	const checkoutData = ga4CheckoutEvents(event);
	pushToDataLayer("begin_checkout", checkoutData);
});

analytics.subscribe("payment_info_submitted", (event) => {
	const checkoutData = ga4CheckoutEvents(event);
	pushToDataLayer("add_payment_info", checkoutData);
});

analytics.subscribe("checkout_completed", (event) => {
	const checkoutData = ga4CheckoutEvents(event);
	const { checkout } = event.data;

	checkoutData.ecommerce.transaction_id =
		checkout.order?.id || checkout.token;
	checkoutData.ecommerce.shipping =
		checkout.shippingLine?.price.amount ||
		checkout.shipping_line?.price.amount ||
		0;
	checkoutData.ecommerce.tax = checkout.totalTax?.amount || 0;

	pushToDataLayer("purchase", checkoutData);
});

function ga4CheckoutEvents(event) {
	const { checkout } = event.data;
	const lineItems = createLineItemsData(checkout.lineItems);

	return {
		ecommerce: {
			currency: checkout.subtotalPrice.currencyCode,
			value: checkout.subtotalPrice.amount,
			items: lineItems,
		},
		_clear: true,
	};
}