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+)

The theme snippet routes all GA4 traffic through your first-party domain, bypassing ad blockers and improving data quality. It fires storefront ecommerce events (view_item, add_to_cart, begin_checkout, search) directly to GA4.

Configure in CleanClicks

1. In your CleanClicks dashboard, go to Configuration → Ecommerce tab
2. Enter your GA4 Measurement ID (starts with G-, found in GA4 Admin > Data Streams)
3. Toggle Allow Signals if you want demographics data (age, gender, interests)
4. Click Save GA4 Proxy Settings
5. Copy the generated Theme Snippet

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

If you have an existing GA4 setup (gtag.js script, Google & YouTube channel app, or a GA4 theme snippet), you must disable it to avoid duplicate tracking:

• Theme script: Remove or comment out any gtag.js or googletagmanager.com/gtag/js script tags in your theme
• Google & YouTube app: Go to the app settings and disable the GA4 tracking (CleanClicks replaces it)
• Google Tag Manager: If using GTM with GA4, remove the GA4 tags from your GTM container

Why? CleanClicks loads its own proxied version of gtag.js. Running two copies sends every event twice.

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. Turn off the GA4 Measurement Protocol toggle (the pixel handles purchase events client-side now)

GA4 Signals / Demographics

If you enabled Allow Signals, GA4 demographics data (age, gender, interests) will populate within 24-48 hours. This works by allowing DoubleClick requests to go directly to Google rather than through the proxy.

Step 2: Install the Custom Pixel (Clarity+)

The Custom Pixel v2.1.0 runs in Shopify's sandboxed iframe and tracks the full ecommerce funnel. When GA4 is configured, it also sends a GA4 purchase event via Measurement Protocol 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 Data sale to Does not qualify as data sale and Data collection to Collected from this website or app
7. Paste the pixel code into the code editor
8. Click Save, then click Connect

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

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 (Clarity+)

The webhook captures purchase events directly from Shopify's servers. Even if a customer closes their browser before the confirmation page, the order is still captured.

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

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