How to resolve GA4 Pixel tracking issue on checkout pages?

Shopify Apps
,

Topic summary

GA4 events on Shopify checkout were not firing due to Content Security Policy (CSP) blocking Google endpoints (e.g., analytics.google.com, region-specific collectors). Impacted events included page_view, begin_checkout, and add_payment_info. Console errors and posted CSP headers showed missing connect-src allowances for *.google-analytics.com and *.analytics.google.com.

Workarounds reported:

  • Custom pixel using Shopify analytics events, then pushing to gtag with transport_url set to https://www.google-analytics.com.
  • Thank-you page tagging for conversions when checkout tracking isn’t possible.
  • GTM remains restricted at checkout for non‑Plus stores; theme.liquid edits do not affect checkout.

Reference documentation from Google specified required CSP directives for GA4 (script/img/connect-src to *.googletagmanager.com, *.google-analytics.com, *.analytics.google.com, and, with Signals, additional Google domains).

Vendor responses and outcome:

  • Shopify initially directed merchants to Google; community argued Shopify must update checkout CSP.
  • Multiple users reported a fix rolled out around April 11–13, 2023. Later updates note 90–100% conversion match via native GA4, and reduced discrepancies (~10%) for manual dataLayer setups, suggesting a Shopify-side update.

Current state: Largely resolved for native integration, but some still see missing purchase events (e.g., iDEAL/system-browser flows). Discussion remains open for edge cases.

Summarized with AI on December 15. AI used: gpt-5.
6

Here’s my compiled email I’ve sent to Shopify’s Support attempting to deal with this. Currently they’re saying there’s no issue, but we know there is. Hopefully this will help others in describing this issue, if I can’t get Shopify to resolve this myself.

I know why this is happening, and it is an issue Shopify needs to resolve. I will describe it as best I can. If you do not understand CSR headers, please forward this request to someone who does.

Why is Google Analytics GA4 code is not firing on Shopify’s Checkout Pages

As mentioned in my emails and in the community thread: Shopify’s checkout process aka URLs (/checkouts/c/*) do not include the proper CSR HTTP Headers.

CSR HTTP Headers are served via Shopify’s servers (thus this issue needs to be fixed there) and actually has nothing to do with Google’s javascript implementation of GA4.

IF Google’s GA4 javascript URLs are not explicitly added to Shopify’s CSR HTTP Headers on the checkout pages, THEN when Google GA4 javascript is BLOCKED.

Here’s the error of Google’s GA4 Javascript being blocked due to Shopify’s incorrectly configured CSR HTTP Headers:

**Refused to connect to 'https://analytics.google.com**/g/collect?v=2&tid=G-XXXXX&gtm=XXXXXXX&_p=2105325346&cid=2111485033.1666174160&ul=en-us&sr=2560x1440&uaa=x86&uab=64&uafvl=Chromium%3B111.0.5563.64%7CNot(A%253ABrand%3B8.0.0.0&uamb=0&uam=&uap=Linux&uapv=5.19.0&uaw=0&_eu=AEA&_s=2&sid=1679458096&sct=20&seg=1&dl=https%3A%2F%2Fwww.MYWEBSITE.com%2Fcheckouts%2Fc%xxxxxxxx%2Finformation%3F_ga%3D2.201687447.702385085.1679309372-2111485033.1666174160%26preview_theme_id%3D132554490042&dr=https%3A%2F%2Fwww.MYWEBSITE.com%2F%3F_ab%3D0%26_fd%3D0%26_sc%3D1&dt=Information%20-%20XXXX%20XXX%20-%20Checkout&en=scroll&epn.percent_scrolled=90' because it violates the following Content Security Policy directive: "connect-src 'self' *.shopifycs.com c1-stats.shopifysvc.com/performance c1-stats.shopifysvc.com/custom-metrics monorail-edge.shopifysvc.com monorail-edge-staging.shopifycloud.com ct.pinterest.com analytics.tiktok.com stats.g.doubleclick.net c1-stats.shopifysvc.com www.google-analytics.com www.facebook.com www.instagram.com *.snapchat.com atlas.shopifysvc.com atlas.shopifycloud.com MYWEBSITE.myshopify.com www.MYWEBSITE.com MYWEBSITE.com MYWEBSITE.account.myshopify.com account.MYWEBSITE.com shop.app shopify-chat.shopifycloud.com shopify-chat.shopifyapps.com *.pusher.com *.bugsnag.com experiments.shopify.com hcaptcha.com *.hcaptcha.com www.sandbox.paypal.com www.paypal.com".

The main part of this to look at is:

Refused to connect to 'https://analytics.google.com … because it violates the following Content Security Policy directive: "connect-src

The domains Shopify includes in CSR HTTP Headers are listed below:

Because analytics.google.com is NOT in that list of CSR HTTP Headers, it’s being BLOCKED by the browsers. And thus, these events will not work on browsers which enforce CSR Headers.
You’ll notice in this list that analytics.google.com is NOT in that list.

To resolve this issue Shopify will need to follow the documentation provided by Google and implement the appropriate CSR Headers at Checkout:
https://developers.google.com/tag-platform/tag-manager/web/csp#google_analytics_4_google_analytics

Google Analytics 4 (Google Analytics)

To use the Google Analytics 4 (Google Analytics) tag, the CSP must include the following directives:

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.googletagmanager.com
connect-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com

For Google Analytics 4 (Google Analytics) deployments using Google Signals, the CSP must include the following directives:

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com
             https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>
connect-src: https://*.google-analytics.com https://*.analytics.google.com
             https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>

^ Documentation about what domains are required in CSR Headers on Shopify’s end so that GA4 code can be run on checkout pages in Shopify.

To CONFIRM this is an error on Shopify’s end, ask someone who knows at Shopify for a list of CSR headers included on Checkout Pages.

Then see if *.analytics.google.com is in that list. I bet it’s not.