Overview

You can use the following debugger in your Chrome Developer Console to QA the data layer events you built.

Enable or disable the Debugger

To enable the debugger, you can run the following code in your console:

window?.ElevarInvalidateContext();
window.ElevarDebugMode(true);

❗️

If you get any error like the following in your browser's console then please make sure that Elevar’s Non-Shopify Subdomain Script is placed as it is without any modifications on all the headless pages.

If there are any modifications in the Non-Shopify Attribution Script, then it will throw this error on the page and the debugger will not work.

If you do not get any error, then this code will enable the debugger in your local storage and can be turned off by running the following in the console, or clearing your local storage.

window.ElevarDebugMode(false);

How to Use the Debugger

Once you've enabled your debugger, navigate through your website & trigger your data layer events.

When an event gets triggered, the debugger will show you if the event failed:

Why it failed:

Or if the event passed:

Debugger Examples

Here's an example of a data layer event that will be failed by the Debugger:

window.ElevarDataLayer.push({
	event: "dl_add_to_cart",
	ecommerce: {
		currencyCode: "USD",
		add: {
			actionField: {
				list: "/collections/all"
			},
			products: [{
				id: 41230516256821,
				name: "Bedside Table",
				brand: "Company 123",
				category: "Indoor",
				variant: null,
				anotherField: true,
				price: "69.99",
				quantity: "1",
				list: "/collections/all",
				product_id: "6938075758645",
				variant_id: "41230516256821",
				image: "https://cdn.shopify.com/s/files/1/0588/1049/9125/products/dark-wall-bedside-table_925x_0a1b2f38-14b2-494f-a7ca-1ed1e79d924a.jpg?v=1656091291"
			}]
		}
	}
});

The Debugger would show the below, noting that the event failed and the two unexpected items that caused the failure.

Thus you can tell that the Product ID was passed as a number, but needs to be a string. So you need to add quotes to the ID value.

And you can see that the variant value was null when it should have passed a string. So you need to make sure the variant value is populated.

Here's the corrected data layer event:

window.ElevarDataLayer.push({
	event: "dl_add_to_cart",
	ecommerce: {
		currencyCode: "USD",
		add: {
			actionField: {
				list: "/collections/all"
			},
			products: [{
				id: "41230516256821",
				name: "Bedside Table",
				brand: "Company 123",
				category: "Indoor",
				variant: "12345324123423",
				anotherField: true,
				price: "69.99",
				quantity: "1",
				list: "/collections/all",
				product_id: "6938075758645",
				variant_id: "41230516256821",
				image: "https://cdn.shopify.com/s/files/1/0588/1049/9125/products/dark-wall-bedside-table_925x_0a1b2f38-14b2-494f-a7ca-1ed1e79d924a.jpg?v=1656091291"
			}]
		}
	}
});

If you were to run this in the debugger, the debugger would show that the event passed: