Enable Shopify Ecommerce Data Layer Checkout Update

Shopify recently updated their checkout process, requiring the use of Custom Pixels for tracking customer events.

Following this update, I enabled the Data Layer according to the new method to ensure accurate tracking of checkout and purchase events.

Edited the Theme code to add Google Tag Manager Script & custom JavaScript to enable the data layer

Edited theme. liquid to add Google Tag Manager Script

Added ultimate-datalayer.liquid to put JavaScript code to enable the data layer

The Additional Scripts section for Checkout has been deprecated

I used Custom pixel for this

Added code to Custom Pixel for Checkout tracking

In the browser console, you can find the Ecommerce event. I used “Shop_” to make the event unique.

We can also see Data Layer events in the Data Layer Checker extension

In the browser console, you can find the Ecommerce event (Shop_add_to_cart)

In the browser console, you can find the Ecommerce event (Shop_begin_checkout)

In the browser console, you can find the Ecommerce events: Shop_add_shipping_info, Shop_add_payment_info, and Shop_purchase.

Shop_purchase contain customer details included as customer object.

The Data Layer is now set up and ready to create triggers and variables in Google Tag Manager.

We can use these to implement Enhanced e-commerce tracking effectively.