Shopify / Shopify/liquid

Shopify GA4 Pixel Errors

Open
#1,701 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

Getting railroaded by Shopify Support on fixing this issue. I need a developer to look at it. I know shopify devs are here and I know this isn't the place to post these types of issues.....but there really needs to be a place where devs can submit issues to Shopify and actually get devs to look at it, instead of random support people, which are generally useless.


Shopify's Google Analytics 4 Javascript implementation via Google Channel is being blocked by Shopify's CSP Headers on the checkout pages. Because of this begin_checkout and add_payment_info events are not getting tracked. You can confirm this by checking out any Shopify Google Analytics 4 website and you'll notice the discrepancy between "purchase" and "begin_checkout" events.

Google Analytics 4 loads javascript via many URLs, the most common being analytics.google.com, which is not added to CSP headers, so it's being explicitly blocked by browsers which enforce this.

Shopify needs to implement the CSP headers which are outlined in Google's Analytics 4 documentation here:
https://developers.google.com/tag-platform/tag-manager/web/csp#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>

Full details of this issues are documented here:
https://community.shopify.com/c/shopify-apps/ga4-pixel-issues/m-p/1995798/highlight/true#M60995

Shopify while looking at this (or whom ever implements this channel/implementation) should also add the event "add_shipping_info" and should also include the required field "items" field in "begin_checkout" and "add_payment_info" events.

Also I'd recommend Shopify makes a more generic github project for developers who want to report bugs. Unfortunately this will be the 3rd time I've used this hack to fix thing on Shopify, which are being ignored otherwise.

I have other issues with Facebook Channel and Custom/App Pixels I'd like resolved as well, but I know talking with Support will get me no where.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository files, tests, or entry points are identified, and the report concerns Shopify's Google Analytics 4 implementation on checkout pages rather than a named Liquid component. First confirm whether Shopify/liquid owns this implementation; completion would require resolving the reported checkout tracking gaps and the additional event and field requirements described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
analytics, security, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
15/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.