<aside> ⛔ The Elevar listener script (from the Part 1) must be installed before utilizing the debugger described below.

</aside>

This step must be completed on the headless site before deploying to production. The debugger can be utilized to validate and correct issues with the data layer events. To enable the debugger, you can run the following in the console.

window.ElevarGtmSuiteAAT.utils.pushContextToDataLayer();
window.ElevarGtmSuiteListener.utils.debug(true);

<aside> ⚠️ If you get any error like the following in your browser's console then please make sure that Elevar’s Non-Shopify Attribution 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.

</aside>

If you do not get any error, then this code will enable the debugger across your entire session and can be turned off by running the following:

window.ElevarGtmSuiteListener.utils.debug(false)

After enabling the debugger, you can start clicking through your site to test the data layer events. Here is an example of a failed data layer event:

window.ElevarPushToDataLayer({
	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>"
			}]
		}
	}
});

What is shown in the console is shown below. As we can see, the data layer object has incompatible fields for ecommerce.add.products[0].id and ecommerce.add.products[0].variant.

We can correct this and run the data layer push again:

window.ElevarPushToDataLayer({
	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>"
			}]
		}
	}
});

And the event passes.