Documentation Tracking & Events

Tout ce dont vous avez besoin pour installer ClearAnalytics sur votre site web et suivre les pages vues, les events personnalisés, les objectifs de clic et les transactions e-commerce.

Aperçu

ClearAnalytics propose deux variantes de script de tracking. Choisissez celle qui correspond à vos besoins : un script minimal pour les analytics de pages vues de base, ou un script complet pour les events personnalisés, les objectifs de clic et le suivi e-commerce.

Light Script (ca.js)

Le script de tracking le plus léger possible. Parfait pour les blogs, pages d'atterrissage et sites nécessitant uniquement les analytics de pages vues.

ca.js < 1 KB

Suivi automatique des pages vues
Durée de session et taux de rebond
Capture des paramètres de campagne UTM
Support des applications mono-page

Full Script (ca-events.js)

Tout ce que contient le light script, plus les events personnalisés, le suivi des objectifs de clic, l'interception du dataLayer GA4 et le support e-commerce complet.

ca-events.js < 2 KB

Tout ce que contient le light script
Suivi d'events personnalisés via window.ca()
Suivi des objectifs de clic via data-ca-goal
Intégration du dataLayer GA4
Suivi complet des events e-commerce

Installation

Ajoutez une seule balise script à votre site web. Pas de paquets npm, pas d'outils de build, pas de fichiers de configuration. Le script se charge de manière asynchrone et n'a aucun impact sur les performances de la page.

HTML — Light Script

Ajoutez ceci dans le <head> ou à la fin du <body> sur chaque page. Suit automatiquement les pages vues, la durée de session et les paramètres UTM.

<script defer src="https://clearanalytics.eu/js/ca.js"></script>

HTML — Full Script

Utilisez cette variante si vous avez besoin d'events personnalisés, d'objectifs de clic ou de suivi e-commerce.

<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>

HTML — Full Script avec DataLayer

Ajoutez l'attribut data-ca-datalayer pour intercepter automatiquement les events du dataLayer GA4, y compris tous les events e-commerce.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

WordPress

Ajoutez la balise script via le fichier functions.php de votre thème ou utilisez un plugin d'injection header/footer.

// functions.php
add_action('wp_head', function () {
    echo '<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>';
});

React / Next.js

Utilisez le composant Script de Next.js pour un chargement optimal. Le script fonctionne avec n'importe quel framework React.

// app/layout.tsx  (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://clearanalytics.eu/js/ca-events.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue / Nuxt

Ajoutez le script via votre configuration Nuxt ou directement dans votre template HTML pour les applications Vue simples.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://clearanalytics.eu/js/ca-events.js',
          defer: true,
        },
      ],
    },
  },
});

Google Tag Manager

Vous pouvez également déployer le script via Google Tag Manager en utilisant une balise HTML personnalisée.

Tag Type:   Custom HTML
Trigger:    All Pages

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Lors de l'utilisation de GTM avec l'attribut data-ca-datalayer, ClearAnalytics capturera automatiquement tous les events dataLayer envoyés par vos balises GTM existantes.

Events Personnalisés

Suivez n'importe quelle interaction utilisateur en envoyant des events personnalisés avec des métadonnées optionnelles. Les events personnalisés apparaissent dans votre tableau de bord et peuvent être utilisés comme déclencheurs d'objectifs.

Nécessite le full script (ca-events.js).

API Signature

window.ca(eventName, properties?);

Paramètre	Type	Description
`eventName`	string	Un nom descriptif pour l'event (ex. 'signup', 'file_download').
`properties`	object	Objet optionnel avec des métadonnées supplémentaires. Sérialisé en JSON.

Exemples

// Suivre une inscription avec les infos du plan

window.ca('signup', { plan: 'pro' });

// Suivre un téléchargement de fichier

window.ca('file_download', {
  file_name: 'whitepaper.pdf',
  file_type: 'pdf',
});

// Suivre la lecture d'une vidéo

window.ca('video_play', {
  video_title: 'Product Demo',
  duration: 120,
});

// Suivre une recherche interne

window.ca('search', { query: 'privacy analytics' });

Suivi des Objectifs de Clic

Suivez les clics sur les boutons et liens sans écrire de JavaScript. Ajoutez un attribut data-ca-goal à n'importe quel élément HTML et le clic sera enregistré automatiquement.

Nécessite le full script (ca-events.js).

Utilisation

Ajoutez data-ca-goal="goal-name" à n'importe quel élément cliquable. La valeur de l'attribut devient l'identifiant de l'objectif dans votre tableau de bord.

<button data-ca-goal="cta-signup">Sign Up</button>

<a href="/pricing" data-ca-goal="pricing-click">View Pricing</a>

<form data-ca-goal="contact-form-submit">
  <!-- The goal fires when any element inside is clicked -->
  <button type="submit">Send</button>
</form>

Comment ça fonctionne

Le script utilise la délégation d'events sur le document pour détecter les clics efficacement :

Un event de clic se déclenche n'importe où sur la page.
Le script remonte l'arbre DOM depuis l'élément cliqué à la recherche d'un attribut data-ca-goal.
S'il est trouvé, il envoie un event de clic avec le nom de l'objectif comme sélecteur.

Visualiser les Objectifs de Clic

Les events d'objectifs de clic apparaissent sur la page Objectifs de votre tableau de bord. Créez un objectif de type "Clic" et associez-le à la valeur data-ca-goal utilisée dans votre HTML.

Intégration du DataLayer GA4

Si votre site envoie déjà des events au dataLayer Google Analytics, ClearAnalytics peut intercepter ces events automatiquement. C'est le chemin de migration le plus simple depuis GA4.

Nécessite le full script (ca-events.js).

Activer l'interception du DataLayer

Ajoutez l'attribut data-ca-datalayer à la balise script. Cette approche opt-in garantit que la fonctionnalité ne s'active que lorsque vous l'activez explicitement.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Comment ça fonctionne

Lorsqu'il est activé, le script intercepte tous les appels dataLayer.push() :

Les events e-commerce reconnus (purchase, add_to_cart, etc.) sont transmis comme events e-commerce.
Tous les autres events personnalisés sont transmis comme events personnalisés génériques.
Les events internes GTM (gtm.js, gtm.dom, gtm.load, etc.) sont automatiquement filtrés.
Les entrées dataLayer existantes sont traitées au chargement de la page ; les pushes futurs sont interceptés en temps réel.

Exemple

// These dataLayer pushes are automatically captured
dataLayer.push({
  event: 'form_submit',
  form_id: 'contact',
  form_name: 'Contact Form',
});

dataLayer.push({
  event: 'video_start',
  video_title: 'Product Demo',
  video_duration: 120,
});

Events ignorés

Les events internes GTM suivants sont automatiquement ignorés et n'apparaîtront pas dans votre tableau de bord :

// These GTM internal events are automatically filtered out:
gtm.js, gtm.dom, gtm.load, gtm.click, gtm.linkClick, gtm.scrollDepth

Suivi E-Commerce

Suivez le parcours client complet de la navigation produit à l'achat et au remboursement. ClearAnalytics prend en charge les 14 events e-commerce standard en utilisant le même format dataLayer que GA4.

Nécessite le full script (ca-events.js) avec l'attribut data-ca-datalayer.

Tous les events e-commerce utilisent le format dataLayer.push() compatible GA4. Si vous avez déjà implémenté le suivi e-commerce GA4, ClearAnalytics capturera ces events automatiquement sans aucune modification de code.

Event	Description
`view_item_list`	L'utilisateur consulte une liste de produits ou des résultats de recherche.
`select_item`	L'utilisateur clique sur un produit dans une liste.
`view_item`	L'utilisateur consulte une page de détail produit.
`add_to_cart`	L'utilisateur ajoute un produit au panier.
`remove_from_cart`	L'utilisateur retire un produit du panier.
`view_cart`	L'utilisateur consulte le panier.
`add_to_wishlist`	L'utilisateur ajoute un produit à sa liste de souhaits.
`begin_checkout`	L'utilisateur commence le processus de commande.
`add_shipping_info`	L'utilisateur soumet ses informations de livraison.
`add_payment_info`	L'utilisateur soumet ses informations de paiement.
`purchase`	L'utilisateur finalise un achat.
`refund`	Un remboursement total ou partiel est traité.
`view_promotion`	L'utilisateur voit une bannière promotionnelle ou une offre.
`select_promotion`	L'utilisateur clique sur une promotion.

view_item_list

Déclenchez cet event lorsque les utilisateurs voient une liste de produits, comme une page catégorie ou des résultats de recherche.

dataLayer.push({ ecommerce: null }); // Clear previous data
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 89.99,
        index: 0,
      },
      {
        item_id: 'SKU-002',
        item_name: 'Trail Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 119.99,
        index: 1,
      },
    ],
  },
});

select_item

Déclenchez cet event lorsqu'un utilisateur clique sur un produit spécifique dans une liste pour le consulter.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_item',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      index: 0,
    }],
  },
});

view_item

Déclenchez cet event lorsqu'un utilisateur arrive sur une page de détail produit.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      item_category: 'Footwear',
      item_variant: 'Blue / Size 42',
      price: 89.99,
      quantity: 1,
    }],
  },
});

add_to_cart

Déclenchez cet event lorsqu'un utilisateur ajoute un ou plusieurs produits à son panier.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      quantity: 1,
    }],
  },
});

remove_from_cart

Déclenchez cet event lorsqu'un utilisateur retire un produit de son panier.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      quantity: 1,
    }],
  },
});

view_cart

Déclenchez cet event lorsqu'un utilisateur consulte sa page panier.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_to_wishlist

Déclenchez cet event lorsqu'un utilisateur enregistre un produit dans sa liste de souhaits pour plus tard.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

begin_checkout

Déclenchez cet event lorsqu'un utilisateur commence le processus de commande.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    coupon: 'SUMMER20',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_shipping_info

Déclenchez cet event lorsqu'un utilisateur sélectionne ou soumet ses détails de livraison pendant la commande.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    shipping_tier: 'Express',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_payment_info

Déclenchez cet event lorsqu'un utilisateur sélectionne ou soumet son mode de paiement pendant la commande.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    payment_type: 'Credit Card',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

purchase

Déclenchez cet event lorsqu'un achat est confirmé. Incluez transaction_id, value, currency, tax, shipping et le tableau items complet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    affiliation: 'Online Store',
    value: 209.98,
    tax: 36.49,
    shipping: 5.99,
    currency: 'EUR',
    coupon: 'SUMMER20',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        item_variant: 'Blue / Size 42',
        price: 89.99,
        quantity: 1,
        coupon: '',
      },
      {
        item_id: 'SKU-003',
        item_name: 'Sports Watch',
        item_brand: 'FitTech',
        item_category: 'Electronics',
        item_variant: 'Black',
        price: 119.99,
        quantity: 1,
        coupon: '',
      },
    ],
  },
});

refund

Déclenchez cet event lorsqu'un remboursement est traité. Pour un remboursement total, seul le transaction_id est requis. Pour les remboursements partiels, incluez les articles spécifiques.

// Full refund
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
  },
});

// Partial refund (specific items)
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    items: [{
      item_id: 'SKU-001',
      quantity: 1,
    }],
  },
});

view_promotion

Déclenchez cet event lorsqu'une bannière promotionnelle, un carrousel ou une offre devient visible pour l'utilisateur.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      discount: 15.00,
    }],
  },
});

select_promotion

Déclenchez cet event lorsqu'un utilisateur clique sur une promotion pour en savoir plus ou profiter de l'offre.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

Migration depuis Google Analytics

ClearAnalytics est conçu pour fonctionner en parallèle ou en remplacement de Google Analytics. Vous pouvez utiliser les deux outils simultanément pendant la migration sans conflit.

Exécuter les deux scripts en parallèle

Ajoutez le script ClearAnalytics à côté de votre balise Google Analytics existante. Les deux scripts suivent indépendamment sans interférer l'un avec l'autre.

<!-- Google Analytics (existing) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- ClearAnalytics (add this line) -->
<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Compatibilité des fonctionnalités

Voici comment les fonctionnalités ClearAnalytics correspondent à leurs équivalents Google Analytics :

Fonctionnalité	Google Analytics	ClearAnalytics
Pages vues	`gtag('event', 'page_view')`	Automatique
Events Personnalisés	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	Compatible dataLayer
Campagnes UTM	Automatique	Automatique
Sessions	Basé sur les cookies	Sans cookies

Étapes de migration

Ajoutez le script ClearAnalytics à votre site à côté de Google Analytics.
Activez l'interception du dataLayer avec data-ca-datalayer pour capturer les events e-commerce existants.
Comparez les données dans les deux tableaux de bord pendant 2 à 4 semaines pour vérifier la précision.
Une fois satisfait, supprimez le script Google Analytics et profitez d'une configuration plus rapide et respectueuse de la vie privée.

Support SPA

ClearAnalytics détecte automatiquement la navigation côté client dans les applications mono-page. Aucune configuration supplémentaire ou intégration de routeur n'est nécessaire.

Comment ça fonctionne

Le script intercepte les appels à l'API History du navigateur pour détecter la navigation :

history.pushState() les appels sont interceptés et déclenchent une nouvelle page vue.
history.replaceState() les appels sont interceptés et déclenchent une nouvelle page vue.
popstate les events (navigateur retour/avancer) déclenchent une nouvelle page vue.

Frameworks compatibles

Fonctionne immédiatement avec tout framework utilisant l'API History pour le routage :

React Next.js Vue.js Nuxt Svelte SvelteKit Angular Remix Astro Inertia.js

Aucun plugin de routeur, hook de cycle de vie ou appel de tracking manuel n'est nécessaire. Ajoutez simplement la balise script une fois et chaque navigation de page est suivie automatiquement.

Confidentialité & Conformité

ClearAnalytics est conçu avec la confidentialité au cœur. Le script de tracking ne collecte que des données anonymes et agrégées. Aucune information personnelle n'est jamais stockée ou transmise.

Pas de cookies

Le script ne définit, ne lit et ne dépend d'aucun cookie de navigateur. Aucune bannière de consentement aux cookies n'est nécessaire.

Pas de fingerprinting

Nous ne créons jamais d'empreintes de navigateur. Aucune technique de fingerprinting canvas, WebGL, police ou audio n'est utilisée.

Pas de stockage IP

Les adresses IP des visiteurs sont utilisées uniquement pour le hachage anonymisé pendant la requête. Elles ne sont jamais stockées dans la base de données.

Conforme au RGPD

Puisqu'aucune donnée personnelle n'est collectée, ClearAnalytics n'entre pas dans le champ des exigences de consentement du RGPD. Toutes les données restent dans l'UE.

Comment nous anonymisons les visiteurs

Pour compter les visiteurs uniques sans stocker de données personnelles, nous utilisons un hash anonyme à rotation quotidienne :

L'adresse IP et le User-Agent du visiteur sont combinés avec un sel à rotation quotidienne.
Cette combinaison est hachée à l'aide d'un algorithme SHA-256 unidirectionnel.
Le sel change toutes les 24 heures, rendant impossible le suivi des visiteurs d'un jour à l'autre.
L'adresse IP originale n'est jamais stockée ni enregistrée.

Données collectées par le script

Les champs de données non personnelles suivants sont envoyés avec chaque event de page vue :

Champ	Objectif
`pathname`	Le chemin URL de la page visitée.
`referrer`	L'URL de la page référente, le cas échéant.
`language`	Le paramètre de langue du navigateur.
`screen_width / screen_height`	Les dimensions de l'écran pour la classification du type d'appareil.
`utm_*`	Les paramètres de suivi de campagne de l'URL.
`duration`	Le temps passé sur la page en secondes.

Puisque ClearAnalytics ne collecte jamais de données personnelles, vous n'avez pas besoin de bannière de consentement aux cookies, de popup de confidentialité ou de mécanisme d'opt-in pour utiliser notre script de tracking. Il est conforme au RGPD, ePrivacy, PECR et CCPA dès l'installation.