Pixels for Partners: The New Shopify Checkout and Web Pixel and What it Means to Merchants and Elevar Partners

Shopify recently released Checkout Extensibility for Shopify Plus with the Shopify Web Pixel. Until now, Shopify has allowed developers access to e-commerce event data (purchase, add-to-cart etc.) with custom code in the browser. The Shopify Web Pixel restricts access to some of these e-commerce events, and will only allow access via use of a new API. It’s likely that to continue to function, some of the existing pixels will need to migrate to this new API.

Shopify indicated they made this change to protect the integrity of checkout by eliminating any chance of bad actors injecting malicious javascript. 

Shopify Plus merchants looking to customize their checkouts will be able to do so with Checkout Extensibility tools instead of checkout.liquid. Merchants have historically placed their pixel code directly in checkout.liquid, but moving forward they will need to do so using Web Pixels. 

How This Impacts Your Customers

Merchants interested in Checkout Extensibility will likely reach out to you with questions. It’s important to know that if they adopt the new checkout, merchants will lose access to checkout.liquid. For now, they will continue to have access to “thank you page scripts.” 

Here are the most significant takeaways from this change:

1. Merchants will have reduced ability to track checkout events (Note that Elevar is working on a solution to track these events server-side)
2. While the timing isn’t known yet, there will be an eventual forced cut-over to Checkout Extensibility and Web Pixel.
3. Google Tag Manager will no longer work in Shopify’s checkout pages. This includes all steps of checkout (e.g. begin checkout, add payment info, add address info).
4. Merchants will no longer have access to input tracking into checkout.liquid.
5. It is presumed that at some point in the near future, merchants will no longer have access to copy/paste tracking into Order Status or Post Purchase scripts admin setting.
6. Apps that rely on Scripts API for injecting tracking into Checkout will no longer work and need to transition to the new tracking API.
7. Merchants can utilize Elevar’s server-side tracking to maintain 100% accuracy through checkout.

How Elevar Can Help

Our goal is to ensure that conversion tracking for Shopify merchants remains accurate, reliable, and uninterrupted. Server-side tracking is a great answer. Server-side tracking will not only allow merchants to continue tracking events as they are used to, but it will enable them to collect more 1st party data.

The eCommerce shift to server-side tracking is inevitable, as an estimated 43% of U.S. adults block online ads and by 2025, Gartner predicts 75% of the world’s population will have its personal data covered under privacy regulations. 

• Watch this video on what’s happening in the world of tracking and how Elevar’s server-side tracking is the best way forward.
• Read our article about the Shopify Web Pixel.
• Watch an insightful video with Brad Redding about Checkout Extensibility and the Web Pixel.
• Listen to the “Checkout Extensibility and Web Pixel FAQ” podcast by Brad Redding sharing what we’ve learned after customers have upgraded to Checkout Extensibility.
• Read our knowledgebase article on upgrading to Checkout Extensibility (with Shopify Plus).
• Read our knowledgebase article on upgrading to Checkout Extensibility (with Shopify).

Additional Documentation from Shopify

Interested in a deep dive about Checkout Extensibility and the Web Pixel for Shopify Plus:

Per Shopify, the new requirement for merchants and partners to implement tracking in checkout, purchase, and post-purchase events is as follows:

The Web Pixel Extension sandbox loads pixels in a strict web worker environment. Traditional JavaScript pixels that use browser APIs, like window.document will not work. Instead, we provide app developers a set of contextual APIs to replace their functionality.

The sandbox is designed so that merchants and buyers have complete control over what data is collected by Partners. These controls mean some common features of pixels won’t work the same or won’t work at all. Specifically, these include any features that rely on scraping the DOM for information or attempting to write to the DOM.

Shopify Checkout Extensibility Partner Page

Shopify Web Pixel API reference

Shopify Pixel Manager Overview

Shopify Web Pixel API Overview

 

Questions and Answers

As you can imagine, we receive a lot of questions about Checkout Extensibility and the Shopify Web Pixels. The following are questions received by partners (with our answers). 

We invite you to submit questions by emailing us at [email protected]. We’ll answer you directly and add them to the Q&A to help everyone. 

 

If checkout.liquid is being removed completely, so any checkout dataLayer events can no longer be pushed via Elevar, does this mean that tags that utilized these (e.g. UA/GA4/FB) will need to be implemented via Web Pixels?

First, let’s address the rollout of Checkout Extensibility:

The removal of checkout.liquid is an outcome of Shopify’s release of Checkout Extensibility (aka Checkout Extensibility). This affects Shopify Plus sites. This rollout is happening on an opt-in basis today. While we anticipate that at some point in 2023 Shopify will announce a mandatory cut-over to the new checkout we have no information today on the timing of this. For now, any merchant using Shopify Plus can stay on the current checkout with checkout.liquid. 

If a merchant decides to move to Checkout Extensibility, they will no longer be able to use GTM for checkout events, hence the need to use the Shopify Web Pixel (for a limited number of events) or use Elevar server-side tracking. 

 

Is it true that you can paste GTM + dataLayer code into the checkout scripts settings for purchase events?

Today, you are able to copy/paste tracking into the Order Status or Post Purchase scripts admin setting. However, we anticipate that this will not be possible at some point in the future. All pre-checkout events can still be tracked with GTM.

 

Is the data layer not impacted for all events up to the point of checkout (i.e. tags up until that point in the purchase journey will not need to be updated)?

If a merchant opts to migrate to Checkout Extensibility, all tags pre-checkout (i.e. View Item Events, Add to Cart Events, etc) that use GTM will not be impacted. The checkout funnel event tags (i.e. Initiate Checkout, Add Shipping Info, and Add Payment Info) will be affected. The Purchase event tag will need to be migrated from the checkout.liquid to the Order Status Page scripts. If a client opts not to use Checkout 1 their tagging and tracking is not immediately impacted. 

 

Regarding the (beta version) of Elevar’s web pixel app: Does the Elevar web pixel app only send events via server side? If so, do clients need to be on a server-side plan to use it?

The web pixel portion of our app is mainly to enable our system to track checkout events. It wouldn’t be used by a merchant directly. We have a single app plugin with Audiohook for the web pixel. All other functionality happens behind the scenes.

 

Do agencies/merchants need to customize the web pixel app in any way?

The only reason to customize the web pixel app is if custom tracking were being implemented by the merchant. 

 

Will there be an option for Data Layer plan customers, or will only customers on Server plans be able to track checkout events via Elevar’s app? 

Today, our data layer works fine for Shopify merchants and Shopify Plus merchants that are not using Checkout Extensibility. Only if a plus merchant were to upgrade to Checkout Extensibility would they need our server-side plan to recover checkout events. In the future, merchants will need to decide whether to use the Shopify Web Pixel for checkout events or Elevar server-side tracking. 

 

Once Shopify enforces Checkout Extensibility for all merchants, will Elevar stop offering the Data Layer plan? Will there be any reasons/benefits for merchants to stay on the Data Layer plan?

As it stands, we plan to keep offering the Data Layer plan, but this could change depending on what Shopify tracking features (order status page/upsell page/web pixel changes) are available at some time in the future.

 

Will Data Layer plan customers be able to use Elevar’s Web Pixel or is it only part of the server-side tracking plan?

Checkout events are only available server side. The Data Layer plan won’t support these events as GTM can’t be loaded in this environment. {GTM is not supported with Checkout Extensibility}

 

Does the Elevar web pixel app utilize the Customer Privacy API so that any consent status is passed through? Or will a client need to add this script in themselves?

All of the Elevar server events are consent-aware.

 

Is the Shopify Web Pixel available for Shopify Plus only or all Shopify sites?

The Shopify Web Pixels is available for any site but it is optional for all. It really only becomes a serious consideration today for those upgrading to Checkout Extensibility. Shopify Web Pixels will fill in the gap from “begin checkout” to “order status.” With Checkout 1, a merchant will lose this tracking if they don’t use Shopify Web Pixels or an Elevar solution. 

 

Will Elevar manage a merchant’s upgrade from checkout.liquid to Checkout Extensibility?

We will not manage this upgrade but we are providing solutions so that merchants won’t lose tracking. We have launched a pixel integration for our server-side destinations to access data following the Shopify guidelines. Because merchants lose tracking through GTM when they upgrade to Checkout Extensibility, they will need to move the data layer from checkout.liquid to the order status page if they want to continue to use GTM for purchase events. Non-purchase events can stay in GTM.