GuidesEcommerce: Shopify

Guide: Complete Shopify Ecommerce Tracking

Set up end-to-end Shopify ecommerce tracking with CleanClicks using the custom pixel, server-side webhooks, and ad platform relay.

This guide walks through setting up end-to-end ecommerce tracking for a Shopify store with CleanClicks. By the end, every product view, cart action, and purchase will be captured first-party and relayed to your ad platforms.

What You'll Set Up

  1. Client-side pixel — captures browsing events and GA4 purchase via Measurement Protocol
  2. GA4 first-party proxy — routes all GA4 tracking through your domain (Signal+)
  3. Server-side webhook — captures purchase events directly from Shopify servers
  4. Ad platform connections — routes conversion data to your platforms

Prerequisites

  • CleanClicks account on Clarity plan or higher (ecommerce requires Clarity+)
  • Domain added and DNS verified in CleanClicks
  • Shopify store with admin access

Step 1: Install the Custom Pixel

  1. In Shopify Admin, go to Settings > Customer events
  2. Click Add custom pixel
  3. Name it CleanClicks
  4. Paste the pixel code from your CleanClicks Configuration > Ecommerce tab
  5. Click Save, then Connect

The pixel immediately starts capturing:

EventWhen It Fires
page_viewEvery page load
view_itemProduct page view
view_item_listCollection page view
add_to_cartItem added to cart
begin_checkoutCheckout page load
purchaseOrder confirmation
searchSearch performed

Step 2: Set Up the Server-Side Webhook

The webhook provides a server-to-server backup for purchase events. If a customer closes their browser before the confirmation page loads, the webhook still captures the order.

  1. In CleanClicks, go to Configuration > Ecommerce tab
  2. Copy the Webhook URL and Webhook Secret
  3. In Shopify Admin, go to Settings > Notifications > Webhooks
  4. Click Create Webhook
  5. Event: Order payment
  6. Format: JSON
  7. URL: paste the webhook URL
  8. Click Save

Step 3: Connect Ad Platforms

Go to Connections and connect the ad platforms you want to receive conversion data:

  • Google Ads — OAuth connection + Customer ID + Conversion Action ID
  • Meta — System User Token + Pixel ID
  • TikTok — Access Token + Pixel Code
  • Microsoft Ads — OAuth connection + Customer ID + Account ID

See the individual connection guides for step-by-step instructions per platform.

Step 4: Configure Vendors

Go to Configuration > Vendors and enable each connected platform. Enter the required credentials.

For ecommerce, the key conversion event is purchase. Most ad platforms automatically recognize this event name and match it to their purchase/conversion goals.

Step 5: Test the Flow

  1. Open your Shopify store in an Incognito browser window
  2. Browse to a product page
  3. Add to cart
  4. Complete a test checkout (use Shopify's test payment gateway or a small real order)
  5. Check CleanClicks dashboard for events within a few minutes
  6. Check each ad platform for the conversion (allow 15-30 minutes)

GA4 First-Party Analytics

CleanClicks v2.1.0 introduces first-party GA4 tracking for Shopify. Instead of relying solely on server-side Measurement Protocol (which creates "Unassigned" attribution in GA4), the new approach uses:

  • Theme snippet — loads proxied gtag.js and fires storefront events (view_item, add_to_cart, begin_checkout, search) through your first-party domain. These events get proper traffic source attribution.
  • Custom Pixel v2.1.0 — sends GA4 purchase events via client-side Measurement Protocol through the /__cc/g/mp proxy endpoint, using the visitor's real _ga cookie for session stitching.

If you were previously using server-side GA4 MP: Turn it off in the GA4 vendor tab. The pixel now handles purchase events client-side with proper attribution. Keeping server-side MP on will create duplicate events.

See Shopify Setup for full installation instructions.

Attribution Flow

Here's what happens when someone clicks your ad and buys:

  1. Visitor clicks ad → lands on your store with click ID in the URL (gclid, fbclid, etc.)
  2. CleanClicks tag captures the click ID and UTM parameters, stores them in a first-party cookie
  3. Visitor browses (CleanClicks tracks product views, cart adds)
  4. GA4 theme snippet fires view_item, add_to_cart, begin_checkout to GA4 through your first-party domain (proper attribution)
  5. Visitor purchases → Pixel sends purchase to CleanClicks AND to GA4 via Measurement Protocol (with session stitching)
  6. CleanClicks relays the purchase server-side to each connected platform with full attribution
  7. Shopify webhook also fires as backup, and CleanClicks matches it to the same visitor session

Result: Your ad platforms see the conversion attributed to the correct ad click, even if the visitor had an ad blocker.

Avoiding Duplicate Tracking

  • Only use the CleanClicks Custom Pixel for Shopify. Don't also paste the cc.js script tag into your theme.
  • If you have existing platform pixels (Meta Pixel, TikTok Pixel, etc.) installed in your Shopify theme, consider removing them. CleanClicks replaces them with more reliable server-side delivery.
  • Disable existing GA4 scripts if you're using the GA4 theme snippet. Running two gtag.js copies sends every event twice.
  • Turn off GA4 server-side Measurement Protocol if the pixel is sending GA4 purchase events. Check the GA4 vendor tab.

Related: Shopify Setup | Ecommerce Configuration