How to resolve GA4 Pixel tracking issue on checkout pages?

[leemcd]

Hello,

I have recently installed the GA4 Pixel through the Google channel app on behalf of a client. We are experiencing an issue where checkout pages are not being tracked successfully, due to the Content Security Policy. The JavaScript console shows the below error when the checkout is loaded:

I believe this is due to the fact our GA4 property is EU based, and therefore the domain for GA4 data collection is region1.google-analytics.com rather than www.google-analytics.com. 

Has anyone else experienced the same issue and found a solution? This is causing some problems as we are totally unable to record page_view, begin_checkout and add_payment_info events on these pages. I've contacted Google support however after 5 days I've yet to receive a response!

[leemcd]

For anyone interested - I managed to get around this by using a custom pixel. I've generated the events begin_checkout and add_payment_info through subscribing to the corresponding Shopify analytics events, then pushing the events to gtag.

The important part: set the gtag transport_url first before sending the events like below:

gtag("config", TRACKING_ID, { 
  transport_url: 'https://www.google-analytics.com'
});

Not a perfect solution, but I'm now getting the events sent to GA4.

[flareAI]

Hello @leemcd,

I am Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.

It's possible that the issue you're experiencing with the GA4 Pixel not tracking checkout pages is related to the Content Security Policy (CSP) set up on your website. The error message you're seeing suggests that the CSP directive "connect-src" is preventing the GA4 Pixel from connecting to the analytics server.

Here are a few potential solutions you can try:

1. Add the Google Analytics domain to the connect-src directive in your CSP
You can add the domain "https://region1.analytics.google.com" to the connect-src directive in your website's CSP. This will allow the GA4 Pixel to connect to the analytics server and track events on your checkout pages. For example, you could add this to your CSP header:

connect-src 'self' *.shopifycs.com https://region1.analytics.google.com;

2. Modify the CSP policy in your Shopify store
You may be able to modify the CSP policy in your Shopify store to allow the GA4 Pixel to connect to the analytics server. This can be done by editing the "content_security_policy" section of your Shopify theme's "config/settings_data.json" file. You can add the following to the "content_security_policy" section:

"connect-src": "'self' *.shopifycs.com https://region1.analytics.google.com",

3. Contact Shopify support
If you're still having trouble after trying the above solutions, you may want to contact Shopify's support team for assistance. They may be able to help you troubleshoot the issue or escalate it to the appropriate team for further investigation.

4. Contact Google support
You can also try contacting Google's support team for further assistance with the issue. They may be able to provide more specific guidance on how to resolve the CSP issue with your GA4 Pixel.

I hope these suggestions help you resolve the issue and successfully track events on your checkout pages with the GA4 Pixel.

Gina

[tyler00822]

may i ask  , does this work  if  i add  these to  theme  linquid file, header,  does it has  influence on checkout page ?

thank you . 

[Barnett4321]

This is an issue that will affect all users, not just EU. This is an issue which affects all shopify users using GA4. And while your work around will work, it needs to be fixed by shopify.

As you mentioned, it's a problem with Shopify not adding the appropriate content-security-policy: header in their server responses.

Here's the header I get for CSP . Edited to make it easier to read (excluding my own URLs)

default-src 'self';

block-all-mixed-content;

child-src 'self' blob: 
- cdn.shopify.com
- cdn.shopifycdn.net
- checkout.shopify.com
- *.shopifycs.com
- MYWEBSITE.myshopify.com
- www.MYWEBSITE.com
- MYWEBSITE.com
- MYWEBSITE.account.myshopify.com
- account.MYWEBSITE.com
- shop.app/
- www.paypalobjects.com
- *.snapchat.com
- www.facebook.com
- facebook.com
- bid.g.doubleclick.net
- pinterest.com
- *.pinterest.com
- www.pinterest.at
- www.pinterest.ca
- www.pinterest.ch
- www.pinterest.cl
- www.pinterest.co.kr
- www.pinterest.co.uk
- www.pinterest.com.au
- www.pinterest.com.mx
- www.pinterest.de
- www.pinterest.dk
- www.pinterest.es
- www.pinterest.fr
- www.pinterest.ie
- www.pinterest.it
- www.pinterest.jp
- www.pinterest.nz
- www.pinterest.ph
- www.pinterest.pt
- www.pinterest.ru
- www.pinterest.se
- *.bugsnag.com
- hooks.stripe.com
- www.paypal.com
- www.sandbox.paypal.com
- centinelapistag.cardinalcommerce.com
- centinelapi.cardinalcommerce.com
- pay.flow.io
- api.flow.io
- hcaptcha.com
- *.hcaptcha.com
- link.flow.io/
- cdn.flow.io/
- c.paypal.com;


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;


font-src 'self' 
- fonts.shopifycdn.com
- fonts-staging.shopifycdn.com
- cdn.shopify.com
- cdn.shopifycdn.net;


frame-ancestors 'none';

img-src * data:;

media-src 
- cdn.shopify.com
- cdn.shopifycloud.com;


object-src 'none';

script-src 'unsafe-inline' 
- cdn.shopify.com
- connect.facebook.net
- www.facebook.com
- www.google-analytics.com
- *.g.doubleclick.net
- ct.pinterest.com
- s.pinimg.com
- sc-static.net
- analytics.tiktok.com
- www.googletagmanager.com
- www.googleadservices.com
- www.google.com
- *.shopifycs.com
- *.pusher.com
- MYWEBSITE.myshopify.com
- www.MYWEBSITE.com
- MYWEBSITE.com
- MYWEBSITE.account.myshopify.com
- account.MYWEBSITE.com
- hcaptcha.com
- *.hcaptcha.com
- www.paypal.com
- www.paypalobjects.com
- c.paypal.com;


style-src blob: 'unsafe-inline' 
- cdn.shopify.com
- cdn.shopifycloud.com
- hcaptcha.com
- *.hcaptcha.com;


upgrade-insecure-requests;

worker-src 'self' blob:;

Here are my errors:

js?id=G-XXXXXXX:51 Refused to connect to 'https://analytics.google.com/g/collect?v=2&tid=G-XXXXXXXX&gtm=45je33f0&...' because it violates the following Content Security Policy directive: "connect-src 

js?id=G-XXXXXXX:51 Refused to connect to 'https://analytics.google.com/g/collect?v=2&tid=G-XXXXXXX&gtm=45je33f0&_...' because it violates the following Content Security Policy directive: "connect-src 'self' 

Refused to connect to 'https://www.google.co.th/ads/ga-audiences?v=1&t=sr&slf_rd=1&_r=4&tid=G-XXXXXXX&...' because it violates the following Content Security Policy directive: "connect-src 'self' 

Domains not added to CSP for me are

• analytics.google.com
• www.google.co.th (i assume there's tonnes of regional ones for this) 

Additional issues

neither begin_checkout nor add_payment_info use the event field "items" which is required fields

Documentation on required fields:

https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#b...

 

[Barnett4321]

Here's the Google Documentation on what's required for CSP settings to be properly configured for GA4

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>

[tyler00822]

 does this work  if  i add  these to  theme  linquid file, header,  does it has  influence on checkout page ?

thank you . 

[Barnett4321]

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:

• *.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

You'll notice in this list that analytics.google.com is NOT in that list. Thus javascript loaded via this URL is BLOCKED by the browser. Javascript being loaded from analytics.google.com is the GA4 begin_checkout code. Thus this is why these events do not get fired/collected. Hence low numbers in screenshot previously provided.

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.

[Barnett4321]

Shopify won't fix this, so I'm going to figure out a way to get this fixed via other means. 

Here's the last email I got about this:

Thank you for reaching back.

The Google Analytics integration is fully supported by Google - if changes need to be made, then it must come from their end.

We highly recommend contacting Google using the Get Support button in the channel and choosing Google Analytics as the topic. If Google determines that there is an issue, they will contact us directly.

Thank you for your patience and understanding of this matter.

All the best,

Sarah A.
Marketplaces Advisor

[LennardW]

I did in the meanwhile also contact google support for this and linked this issue!

[tyler00822]

hello,  may i ask  , does this work  if  i add  these to  theme  linquid file, header,  does it has  influence on checkout page ?

thank you . 

[Barnett4321]

@leemcd seems this issue finally got resolved around April 11th-13th. 

Can you confirm this is working for you now?

I've been spamming everywhere/anywhere I could to get this in front of devs and it seems finally someone noticed.

[LennardW]

Yes seem to be fixed, I have seen multiple abandoned checkouts from Shopify, and since then also seen the events in analytics, so it seems to be resolved! Still have a weird issue left that most of the time missing purchase events, but that's probably caused by iDEAL payments. (System browser vs browser where you started)

[Tryhard]

Purchase events are missing again 🤦

[Mitrodol]

Hi! What are the iDeal payments can you tell please?

We are struggling for more than a month with missing big percentage of purchase events .

https://community.shopify.com/c/shopify-apps/ga4-not-counting-every-purchase/m-p/2115746#M64728

[AlewinePottery]

Hey, 

Firstly, thank you for creating this discussion- it's the only one I've found that's hit on exactly what we're experiencing. I found an extremely helpful article that talks about this specifically as well as a ton of super useful info for general GA4 setup best practices. I'm still digging through the article myself as well as talking with Shopify/Google, but I figured I'd share my findings in hopes one of us will be able to reach some helpful conclusions.

One of the sections in the article states the following, which interestingly enough, mirrors the exact issue, although I'm not sure what to do to fix it yet:

"You cannot install Google Tag Manager within the custom JavaScript section of Google Analytics. Shopify has made Google Tag Manager exclusive to Plus stores. However, this statement is miss-leading. Any store can use the tag solution, but non-Plus stores cannot have it at checkout. If you add GTM to the additional Google Analytics scripts then view the developer console of your browser, you will see several Content Security Policy directive reports like “[Report Only] Refused to frame ‘https://checkout.shopify.com/’ because it violates the following Content Security Policy directive: “child-src c.paypal.com cdn.shopify.com cdn.shopifycdn.net”. Note that ‘frame-src’ was not explicitly set, so ‘child-src’ is used as a fallback.” Many years ago you could make it work, which is why there are wrong, out-of-date guides elsewhere teaching you otherwise."

Link to full article: https://www.digitaldarts.com.au/google-analytics-shopify

[AlewinePottery]

UPDATE:

I've been talking with Google and had a call with them. They were confused why the tag wasn't firing correctly even after correct installation. We ran out of time and had to reschedule for another appt. I was able to get ahold of Shopify about the CSP issue and they told me Google tag manager won't work on any shopify stores that aren't on a shopify plus plan. We've had our same plan since 2015 and have been grandfathered in with really good rates and things, so we have no interest in swapping to a different plan that does little for us aside from making us pay more for less. However, this poses a serious issue now that we can't connect our site to GA4. Don't know if anyone else is on a custom plan too, or even just not a shopify plus one, but just throwing it out there as another potential to look at for anyone else still struggling with this.

[Vincent1983]

Hi Leemcd,

I was reading your post regarding GA4 implementation via the google channel app and was curious if you have seen any improvements? 

In my case i record about a third of the the actual conversions. When i use analytics debugger i do get below messages similar to yours.

Refused to connect to 'https://www.google.com/pay' 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.facebook.com *.google-analytics.com *.analytics.google.com analytics.google.com *.googletagmanager.com www.instagram.com *.amazon.com *.snapchat.com atlas.shopifysvc.com atlas.shopifycloud.com myurl.myshopify.com myurl.nl www.myurl.nl myurl.account.myshopify.com shop.app shopify-chat.shopifycloud.com shopify-chat.shopifyapps.com *.pusher.com *.bugsnag.com experiments.shopify.com hcaptcha.com *.hcaptcha.com google.com/pay".

This happens after the add_to_cart event during the begin_checkout event. Strange is that not everything is blocked since i do have begin_checkout and add_payment_info events

So really curious if you booked any progress because in this way its useless.

Thanks

Best regards,

Vincent

[AlewinePottery]

We ended up having to just go for a tag on the thank you page after the purchase is completed as our event tracker. Annoying that Shopify doesn't allow access to customizations for checkout unless you're on their most expensive plan. But that's fixed the issue for us.

[AlewinePottery]

Also wanted to add some new info I've learned along the way. GA4 can be connected with Shopify just fine by going to online store>preferences>google analytics>manage pixel here. When you click on that, it'll navigate to a page in Shopify where you can log in and set up your GA4 account (assuming you have an active property for GA4 already set up. If you had a UA account before, a new property was automatically created for you July 1 when everything moved over, otherwise you'll need to go create a property. If that's a challenge or you're not sure how to, there are lots of articles, or you can set up a call with Google). Google Tag Manager (GTM) can still be used too- it just won't track checkout. I had to create a new event to track thank you pages like I mentioned before to see some data on our conversions, since just adding to cart doesn't equal a completed purchase. I'm still in the process of seeing if I'll need to manually re-add our GTM tag to the header of theme.liquid. Our theme updater won't carry over customizations when it updates...so that's a bit of a PITA but not the end of the world. I understand Google having so many different tools since each of them are made to do different things, but it's a challenge for a noob to get the hang of it so quickly, especially while the success or failure of our store and all our profits hang in the balance. I was on several calls with Google before we got things moving a bit again. We were jumping between Shopify, GTM, GA4, and Google Ads, so a lot of hopping around. I hope things stay steady for awhile now after all that and best of luck to all of us trying to learn on the fly!

[AlewinePottery]

I've found an EXCELLENT article explaining how to implement GTM on Shopify to work in tandem with GA4 (this is the method we used while on a call with Google- complete with the preview testing to make sure the tag is firing correctly). Here's the link: https://dev.to/analyzify/how-to-set-up-google-tag-manager-on-shopify-2021-tutorial-p19

[Vincent1983]

Hi All,

I have a 100% match for conversions in the last 6-7 days with the native google shopping GA4 integration. This combined with a decrease in store speed.. Leads me to think Shopify has updated something. Can anyone confirm the same behavior?

[Mitrodol]

Hi,

Yes, confirming this . Some stores with native integration have 90-100% match for the last 10-14 days. 

Also checked stores with manual dataLayer method - discrepancy decreased to 10 % also. 

Seem there was fix from Shopify side