Configurer Cloudflare Zaraz pour WooCommerce : remplacer Google Analytics

woocommerce cloudflare zaraz analytics performance

Configurer Cloudflare Zaraz pour WooCommerce

Le problème avec GA4 sur WooCommerce

L’installation classique de Google Analytics 4 sur WooCommerce passe par un plugin (Google Listings & Ads, MonsterInsights, ou le plugin GA4 officiel). Ces plugins chargent le script gtag.js côté client : ~150-200 Ko de JavaScript exécuté dans le navigateur du visiteur.

Les conséquences :

  • Impact direct sur le Total Blocking Time (TBT) et le Largest Contentful Paint (LCP)
  • Le script est bloqué par les adblockers (~30-40% des visiteurs selon les niches)
  • Chaque événement e-commerce (vue produit, ajout panier, achat) déclenche une requête réseau depuis le navigateur

Cloudflare Zaraz résout ces trois problèmes en exécutant le tracking côté serveur, au niveau du edge Cloudflare.

Ce que Zaraz change

Côté performance

Le loader Zaraz fait ~4 Ko (vs ~150-200 Ko pour gtag.js). Les scripts tiers (GA4, Meta Pixel, etc.) sont exécutés sur les serveurs Cloudflare, pas dans le navigateur. Résultat : votre boutique charge comme si elle n’avait aucun tracking.

Côté données

Zaraz envoie les données à Google Analytics depuis les serveurs Cloudflare, pas depuis le navigateur du visiteur. Les adblockers ne bloquent pas ces requêtes serveur-à-serveur. En pratique, vous récupérez 30-40% de données en plus par rapport à une installation classique.

Côté conformité

Zaraz offre un contrôle granulaire sur les données envoyées. Vous pouvez anonymiser les IP, bloquer certains cookies, ou conditionner le tracking au consentement — le tout sans toucher au code du site.

Prérequis

  • Votre domaine doit être sur Cloudflare (DNS proxied, icône orange)
  • Un compte Google Analytics 4 avec un Measurement ID (G-XXXXXXXXXX)
  • Un accès au dashboard Cloudflare avec les droits sur le domaine

Zaraz est inclus dans tous les plans Cloudflare, y compris le plan gratuit.

Configuration étape par étape

1. Activer Zaraz

Dans le dashboard Cloudflare :

  1. Sélectionnez votre domaine
  2. Menu latéral → Zaraz
  3. Zaraz est activé par défaut si votre domaine est sur Cloudflare

2. Ajouter GA4 comme outil

  1. Zaraz → Tools → Add new tool
  2. Sélectionnez “Google Analytics 4”
  3. Entrez votre Measurement ID (G-XXXXXXXXXX)
  4. Enregistrez

À ce stade, Zaraz track déjà les pages vues automatiquement. Vous pouvez vérifier dans GA4 → Temps réel.

3. Désactiver le plugin GA4 côté WordPress

C’est l’étape que beaucoup oublient. Si vous gardez le plugin GA4 actif en plus de Zaraz, vous aurez un double comptage.

// Désactiver le plugin via wp-cli
wp plugin deactivate google-listings-and-ads
// ou
wp plugin deactivate flavor flavor flavor flavor

Ou simplement depuis l’admin WordPress → Extensions → Désactiver le plugin Analytics en question.

Vérifiez ensuite dans les DevTools (F12 → Network) que gtag.js n’est plus chargé. Cherchez aussi google-analytics et googletagmanager dans le code source.

4. Configurer le tracking e-commerce

C’est là que ça se complique par rapport à une installation plugin. Les plugins WooCommerce GA4 envoient automatiquement les événements e-commerce (view_item, add_to_cart, purchase, etc.). Avec Zaraz, il faut les configurer manuellement.

Option A : Zaraz Events via dataLayer (recommandé)

Si votre thème ou un plugin push déjà des événements dans le dataLayer (ce que font la plupart des plugins GA4), Zaraz peut les intercepter :

  1. Zaraz → Tools → Google Analytics 4 → Events
  2. Ajoutez un événement pour chaque action e-commerce :
    • purchase : déclenché quand dataLayer contient l’événement purchase
    • add_to_cart : idem pour add_to_cart
    • view_item : idem pour view_item

Option B : Zaraz Track via JavaScript

Si vous n’avez pas de dataLayer, vous pouvez envoyer les événements directement via zaraz.track() :

// Exemple : tracker un achat sur la page de confirmation
zaraz.track( 'purchase', {
    transaction_id: '12345',
    value: 89.99,
    currency: 'EUR',
    items: [
        {
            item_id: 'SKU-001',
            item_name: 'T-shirt Premium',
            price: 29.99,
            quantity: 3
        }
    ]
});

Ce code doit être injecté sur la page de confirmation de commande (order-received). Vous pouvez le faire via un hook PHP :

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. Configurer les Core Web Vitals (bonus)

Tant qu’on y est, Zaraz peut aussi collecter vos métriques Core Web Vitals réelles (RUM — Real User Monitoring) :

// Envoyer 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 });
}

Vous retrouverez ces données dans GA4 comme événements personnalisés.

Vérification

Après configuration :

  1. Temps réel GA4 : ouvrez votre boutique dans un navigateur sans adblocker. Vérifiez que les pages vues apparaissent dans GA4 → Temps réel.
  2. Avec adblocker : même test avec uBlock Origin activé. Les données doivent toujours arriver dans GA4.
  3. Commande test : passez une commande complète et vérifiez que l’événement purchase apparaît dans GA4.
  4. DevTools : vérifiez qu’aucun script gtag.js ou analytics.js n’est chargé côté client.

Ce que ça donne en production

Sur une boutique WooCommerce que j’ai migrée vers Zaraz :

  • gtag.js supprimé : -150 Ko de JS côté client
  • TBT réduit de ~200ms sur mobile
  • 30-40% de sessions en plus visibles dans GA4 (trafic précédemment bloqué par les adblockers)
  • Zéro impact sur le score Lighthouse (Zaraz est invisible pour les audits performance)

La migration prend environ 1-2 heures pour une boutique standard. Le plus long, c’est la configuration des événements e-commerce et la vérification que toutes les données remontent correctement.

Besoin d’aide pour migrer votre tracking WooCommerce vers Cloudflare Zaraz ? Demandez un audit gratuit.

Besoin d'un audit de votre boutique WooCommerce ?

Je vous envoie un diagnostic personnalisé avec les points à améliorer en priorité. Gratuit, sans engagement.

Demander un audit gratuit