Configure Cloudflare Zaraz for WooCommerce: Replace Google Analytics
Configure Cloudflare Zaraz for WooCommerce
The problem with GA4 on WooCommerce
The standard Google Analytics 4 setup on WooCommerce uses a plugin (Google Listings & Ads, MonsterInsights, or the official GA4 plugin). These plugins load the gtag.js script client-side: ~150-200 KB of JavaScript executed in the visitor’s browser.
The consequences:
- Direct impact on Total Blocking Time (TBT) and Largest Contentful Paint (LCP)
- The script is blocked by adblockers (~30-40% of visitors depending on the niche)
- Every e-commerce event (product view, add to cart, purchase) triggers a network request from the browser
Cloudflare Zaraz solves all three problems by running tracking server-side, at the Cloudflare edge.
What Zaraz changes
Performance
The Zaraz loader is ~4 KB (vs ~150-200 KB for gtag.js). Third-party scripts (GA4, Meta Pixel, etc.) run on Cloudflare servers, not in the browser. Result: your store loads as if it had no tracking at all.
Data
Zaraz sends data to Google Analytics from Cloudflare servers, not from the visitor’s browser. Adblockers don’t block these server-to-server requests. In practice, you recover 30-40% more data compared to a classic installation.
Compliance
Zaraz offers granular control over data sent. You can anonymize IPs, block certain cookies, or condition tracking on consent — all without touching the site’s code.
Prerequisites
- Your domain must be on Cloudflare (DNS proxied, orange icon)
- A Google Analytics 4 account with a Measurement ID (
G-XXXXXXXXXX) - Access to the Cloudflare dashboard with domain permissions
Zaraz is included in all Cloudflare plans, including the free plan.
Step-by-step configuration
1. Enable Zaraz
In the Cloudflare dashboard:
- Select your domain
- Sidebar → Zaraz
- Zaraz is enabled by default if your domain is on Cloudflare
2. Add GA4 as a tool
- Zaraz → Tools → Add new tool
- Select “Google Analytics 4”
- Enter your Measurement ID (
G-XXXXXXXXXX) - Save
At this point, Zaraz is already tracking page views automatically. You can verify in GA4 → Real-time.
3. Disable the GA4 plugin on WordPress
This is the step many forget. If you keep the GA4 plugin active alongside Zaraz, you’ll get double counting.
// Disable the plugin via wp-cli
wp plugin deactivate google-listings-and-ads
Or simply from WordPress admin → Plugins → Deactivate the Analytics plugin.
Then check in DevTools (F12 → Network) that gtag.js is no longer loaded. Also search for google-analytics and googletagmanager in the page source.
4. Configure e-commerce tracking
This is where it gets more involved compared to a plugin setup. WooCommerce GA4 plugins automatically send e-commerce events (view_item, add_to_cart, purchase, etc.). With Zaraz, you need to configure them manually.
Option A: Zaraz Events via dataLayer (recommended)
If your theme or a plugin already pushes events to the dataLayer (which most GA4 plugins do), Zaraz can intercept them:
- Zaraz → Tools → Google Analytics 4 → Events
- Add an event for each e-commerce action:
- purchase: triggered when
dataLayercontains thepurchaseevent - add_to_cart: same for
add_to_cart - view_item: same for
view_item
- purchase: triggered when
Option B: Zaraz Track via JavaScript
If you don’t have a dataLayer, you can send events directly via zaraz.track():
// Example: track a purchase on the confirmation page
zaraz.track( 'purchase', {
transaction_id: '12345',
value: 89.99,
currency: 'EUR',
items: [
{
item_id: 'SKU-001',
item_name: 'Premium T-shirt',
price: 29.99,
quantity: 3
}
]
});
This code needs to be injected on the order confirmation page (order-received). You can do this via a PHP hook:
add_action( 'woocommerce_thankyou', function( $order_id ) {
$order = wc_get_order( $order_id );
if ( ! $order ) return;
$items_js = [];
foreach ( $order->get_items() as $item ) {
$product = $item->get_product();
$items_js[] = [
'item_id' => $product ? $product->get_sku() : '',
'item_name' => $item->get_name(),
'price' => (float) $item->get_subtotal() / $item->get_quantity(),
'quantity' => $item->get_quantity(),
];
}
?>
<script>
zaraz.track( 'purchase', {
transaction_id: '<?php echo esc_js( $order->get_order_number() ); ?>',
value: <?php echo (float) $order->get_total(); ?>,
currency: '<?php echo esc_js( $order->get_currency() ); ?>',
items: <?php echo wp_json_encode( $items_js ); ?>
});
</script>
<?php
});
5. Configure Core Web Vitals (bonus)
While we’re at it, Zaraz can also collect your real Core Web Vitals metrics (RUM — Real User Monitoring):
// Send LCP, FID, CLS via Zaraz
if ( 'PerformanceObserver' in window ) {
new PerformanceObserver( (list) => {
for ( const entry of list.getEntries() ) {
zaraz.track( 'web_vital', {
metric: entry.name,
value: entry.startTime,
page: window.location.pathname
});
}
}).observe({ type: 'largest-contentful-paint', buffered: true });
}
You’ll find this data in GA4 as custom events.
Verification
After configuration:
- GA4 Real-time: open your store in a browser without an adblocker. Check that page views appear in GA4 → Real-time.
- With adblocker: same test with uBlock Origin enabled. Data should still arrive in GA4.
- Test order: complete a full order and verify the
purchaseevent appears in GA4. - DevTools: confirm no
gtag.jsoranalytics.jsscript is loaded client-side.
Real-world results
On a WooCommerce store I migrated to Zaraz:
- gtag.js removed: -150 KB of client-side JS
- TBT reduced by ~200ms on mobile
- 30-40% more sessions visible in GA4 (traffic previously blocked by adblockers)
- Zero impact on Lighthouse score (Zaraz is invisible to performance audits)
The migration takes about 1-2 hours for a standard store. The longest part is configuring e-commerce events and verifying all data flows correctly.
Need help migrating your WooCommerce tracking to Cloudflare Zaraz? Request a free audit.
Need a WooCommerce store audit?
I'll send you a personalized report with the top priorities to improve. Free, no strings attached.