Shopify Setup

CleanClicks integrates with Shopify through three components: a GA4 first-party proxy (theme snippet), a Custom Pixel (ecommerce events), and a server-side webhook (order backup). Which components you use depends on your plan.

Prerequisites

• Your domain must be added and verified in CleanClicks (CNAME active)
• You need admin access to your Shopify store
• For GA4 proxy: a Google Analytics 4 property

Heads up for anyone editing theme code: Shopify's theme code editor uses a Monaco-based editor that can break silently under strict privacy settings. Firefox with ad-blockers, Enhanced Tracking Protection in "Strict" mode, or similar privacy extensions can prevent the editor from loading, loading save buttons, or rendering the file tree. If the editor looks broken or unresponsive, try Chrome or Edge, or temporarily allow shopify.com and cdn.shopify.com in your privacy extensions. The same applies to installing the Custom Pixel in Step 2.

Step 1: GA4 First-Party Analytics (Signal or Clarity)

The theme snippet routes GA4 traffic through your own first-party domain to keep the sessions ad blockers hide. It fires the storefront ecommerce events straight to GA4: view_item, view_item_list, add_to_cart, begin_checkout, and search.

Configure in CleanClicks

1. In your CleanClicks dashboard, go to Configuration → Ecommerce tab, to the GA4 First-Party Mode section
2. Enter your GA4 Measurement ID (starts with G-, found in GA4 Admin > Data Streams)
3. Click Save GA4 Proxy Settings
4. Copy the generated Theme Snippet

You can also run this from card 4 of the Shopify guided setup on the same tab.

Install the Theme Snippet

1. In Shopify Admin, go to Online Store > Themes
2. Click ... on your active theme, then Edit code
3. Open theme.liquid
4. Paste the snippet just before the closing </head> tag
5. Click Save

Disable Existing GA4

Remove or comment out any existing GA4/gtag.js scripts to avoid duplicate tracking. CleanClicks loads its own proxied copy of gtag.js, and two copies send every event twice. Three places to check:

• Theme script: remove or comment out any gtag.js or googletagmanager.com/gtag/js script tags in your theme
• Google & YouTube app: open the app's settings and turn off its GA4 tracking
• Google Tag Manager: if you run GA4 through GTM, remove the GA4 tags from your container

Note which property and web stream each one used before you remove it, so you have a rollback path.

Configure API Secret for Purchase Events

The Custom Pixel (Step 2) sends GA4 purchase events through the Measurement Protocol. This requires an API Secret:

1. In your CleanClicks dashboard, go to Configuration → Vendors → GA4 tab
2. Enter your GA4 API Secret (found in GA4 Admin > Data Streams > your stream > Measurement Protocol API secrets)
3. Leave the API Secret saved. The Shopify pixel generator reads it, and purchase events reach GA4 through it. Installing the pixel is not on its own a reason to change the GA4 server-side setting. If GA4 starts showing duplicate purchases, contact support instead of flipping that setting yourself. See GA4 Connections.

Google Signals / Demographics

GA4 demographics reports (age, gender, interests) and GA4 remarketing audiences need Google Signals. The option is Turn on Google Signals in the GA4 connection flow, and it is off by default.

Our recommendation is to leave it off. Demographics only come from visitors who are signed into Google with Ads Personalization on, which is a slice of your traffic rather than a census, so the picture is often inaccurate. It will not change your Google Ads results either, because CleanClicks sends conversions to Google Ads directly. Turn it on and Google may also hide report rows for small audience segments, which hits smaller-traffic sites hardest.

Step 2: Install the Custom Pixel (Signal or Clarity)

The Custom Pixel is generated for your domain with your configuration baked in. It runs in Shopify's sandboxed iframe and tracks the full ecommerce funnel. When GA4 is configured, it also sends the GA4 purchase event on checkout completion.

1. In your CleanClicks dashboard, go to Configuration → Ecommerce tab
2. Copy the Pixel Code (it's generated per-domain with your configuration baked in)
3. In Shopify Admin, go to Settings > Customer events
4. Click Add custom pixel
5. Name it CleanClicks
6. In the Customer privacy section, set Permission to Not required
7. Set Data sale to Does not qualify as data sale
8. If Shopify shows a Data collection setting, set it to Collected from this website or app
9. Paste the pixel code into the code editor
10. Click Save, then click Connect

Important: You must click both Save and Connect. A saved but unconnected pixel won't fire.

Why "Not required"? The CleanClicks pixel runs for every visitor and applies the visitor's consent choice itself. When a visitor declines, it sends events as measurement-only and removes their hashed email. See CCPA and opt-out behavior for what each platform receives.

Note: If you've already installed an older version of the pixel, delete it and create a fresh one. Always use the latest code from the dashboard.

What the Pixel Tracks

Step 3: Server-Side Webhook (Signal or Clarity)

The webhook provides a server-side order path. Verify webhook delivery, event and order IDs, deduplication, and the intended destination receipt before treating the purchase path as accepted.

1. In your CleanClicks dashboard, go to Configuration → Ecommerce tab and copy the Webhook URL
2. In Shopify Admin, go to Settings > Notifications > scroll to Webhooks
3. Click Create webhook
4. Event: Order payment
5. Format: JSON
6. URL: paste the webhook URL
7. Click Save
8. Copy the signing secret that Shopify generates
9. In your CleanClicks dashboard's Configuration → Ecommerce tab, paste the signing secret and save

Refunds and cancellations: to reverse refunded value in your ad platforms, also subscribe Shopify's Refund created and Order cancellation events to the same webhook URL, then map the refund (and cancellation) event for each platform in Configuration → Vendors. Without that mapping the reversal is recorded but not uploaded, so a refund is never sent as a purchase.

Testing

After setup, verify each component:

GA4 Theme Snippet

1. Visit your store in an Incognito window
2. Open GA4 Realtime report
3. You should see events flowing through your first-party domain (check the traffic source)
4. Browse a product page — look for view_item

Custom Pixel

1. Browse products, add to cart, search
2. Check your CleanClicks dashboard Audit tab for all 7 event types
3. Complete a test checkout — verify purchase appears

Webhook

1. Complete a test order
2. Check the CleanClicks Audit tab for a server-side purchase event (source: shopify_webhook)
3. Verify the event has vendor dispatch results (Google Ads, Meta, etc.)

Testing with a Shopify Dev Store (optional)

If you want to test CleanClicks on a sandbox store before installing on your live store, use a Shopify dev store. Two gotchas that cost real time:

Use the Dev Dashboard, not the Partner Dashboard. Shopify deprecated Partner Dashboard store creation during the 2025/2026 Dev Dashboard migration. If you click "Add store" in your old Partner Dashboard you'll create a dev store that has restrictions you can't lift later. Create stores at dev.shopify.com instead.

Pick the right dev store tier when you create it. The Dev Dashboard offers multiple dev store variants. The default "Basic App Development" tier strips theme editing — the Online Store channel looks installed but the theme editor returns "This feature is unavailable on your plan." You cannot upgrade or transfer a Basic App Development store to lift this, and Shopify support will confirm. Pick a tier that includes full theme editing (the "Advanced"-equivalent option in the current Dev Dashboard flow) before you do anything else. If you're already stuck on a Basic store, create a new one at the right tier — the old store is unrecoverable for theme-based testing.

Troubleshooting

---

Next: WordPress Setup