Connexion du site

Le traceur est un petit script placé sur les pages de votre site. Il compte les consultations de pages, transmet les actions des clients (consultation de produit, panier, commande, connexion), affiche les widgets de recommandations et abonne les visiteurs au Web Push. Tout ce qu'il faut pour la connexion est réuni dans la section Engagement → Site web.

La section est accessible à tous les membres du projet. Le « Propriétaire », l'« Administrateur » et le « Gestionnaire » peuvent modifier les domaines du site et les widgets. Le « Propriétaire » et l'« Administrateur » peuvent créer une clé pour le site.

Installer le traceur

L'onglet Installation comporte trois étapes.

1. Code pour chaque page

Dans le champ Clé d'écriture, choisissez une clé. S'il n'y a aucune clé, cliquez sur Créer une clé de site web.
Copiez le code avec le bouton de copie.
Collez-le dans la balise <head> de toutes les pages du site, généralement dans le modèle d'en-tête commun.

Le code se présente ainsi (l'adresse et la clé sont déjà renseignées dans la section) :

<script>
!function(w,d,u){var c=w.cdp=w.cdp||[];if(c.version)return;['init','page','track','identify','alias','reset','widgets','renderRecommendations'].forEach(function(m){c[m]=c[m]||function(){c.push([m].concat([].slice.call(arguments)))}});var s=d.createElement('script');s.async=1;s.src=u;d.head.appendChild(s)}(window,document,'https://cdp.onetrace.pro/tracker/cdp.js');
cdp.init('cdp_wk_…', { host: 'https://cdp.onetrace.pro' });
cdp.page();
</script>

Le script se charge de façon asynchrone et ne ralentit pas le site. Les appels cdp.track() peuvent être faits juste après le code : ils attendront le chargement du traceur. Le traceur attribue à chaque navigateur un identifiant de visiteur permanent (cookie cdp_aid valable un an) et enregistre les paramètres UTM de la visite.

La clé d'écriture est visible dans le code des pages, c'est normal : elle ne permet que d'envoyer des événements. Si des clés de la liste ne sont pas disponibles, c'est qu'elles ont été créées avant l'apparition de la section et ne peuvent pas être affichées en entier. Créez une nouvelle clé pour le site ou reprenez la clé du code déjà installé sur le site.

2. Vérification

Après l'installation, ouvrez n'importe quelle page du site. Au bout de quelques secondes, un tableau apparaît dans le bloc Vérification : Domaine, Événements sur 7 jours et heure du dernier événement. Tant qu'il n'y a pas d'événement, la section affiche « En attente des premiers événements ». La vérification s'actualise automatiquement toutes les 10 secondes tant que la section est ouverte.

3. Domaines du site web

Pour qu'un site tiers ne puisse pas envoyer d'événements au nom de votre projet ni récupérer vos recommandations, indiquez les domaines de votre site :

Saisissez un domaine, par exemple shop.example.com, et cliquez sur +. Un domaine du tableau de vérification s'ajoute avec le bouton Ajouter aux domaines.
Cliquez sur Enregistrer.

Un domaine autorise aussi ses sous-domaines : shop.ru accepte www.shop.ru. Tant que la liste est vide, la clé fonctionne sur n'importe quel site (« Aucune restriction »). Les requêtes de votre serveur ne sont pas concernées par cette restriction. Vous pouvez indiquer jusqu'à 20 domaines.

Connexion et déconnexion du client

Après la connexion ou l'inscription, appelez cdp.identify() avec l'id de l'utilisateur dans votre système : l'historique des visites est alors relié au profil du client.

cdp.identify('user-42', { email: '[email protected]' });

Ne transmettez le User ID que pour les utilisateurs connectés et n'utilisez pas de valeurs génériques comme 0 ou guest : les profils ayant le même User ID seraient fusionnés. À la déconnexion, appelez cdp.reset() pour que la personne suivante sur cet ordinateur reçoive un nouvel identifiant.

Événements produits

L'onglet Événements produits présente des appels prêts à l'emploi pour quatre actions : Consultation de produit, Ajout au panier, Commande et Connexion et inscription. Les noms des événements et la propriété de l'id du produit (product_id par défaut) proviennent des paramètres de la section Recommandations. Si aucun événement n'y est choisi, un avertissement s'affiche et les exemples utilisent les noms par défaut : product_viewed, add_to_cart, order_completed.

Exemple de commande : tous les produits sont transmis dans le tableau products :

cdp.track('order_completed', {
  order_id: 'A-1001',
  amount: 9980,
  products: [{ product_id: 'SKU-1', quantity: 2, price: 4990 }],
});

Chaque étape porte une indication : le nombre d'événements reçus sur 7 jours et l'heure du dernier, ou « Aucun événement sur 7 jours ». Vous voyez ainsi quels appels ne fonctionnent pas encore. L'id du produit doit correspondre à l'id du catalogue de produits.

Il est plus fiable d'envoyer les commandes et les inscriptions depuis votre serveur : voir Intégration côté serveur.

Web Push

L'onglet Web Push indique si le canal est connecté et combien d'abonnements il compte. Si le canal n'existe pas, créez-le via le lien Ouvrir les intégrations : les clés sont générées automatiquement (voir Intégrations et canaux). Ensuite :

Fichier du service worker. Créez à la racine du site un fichier cdp-sw.js contenant une seule ligne :
```
importScripts('https://cdp.onetrace.pro/tracker/cdp-sw.js');
```
Bouton d'abonnement. Ajoutez au site un bouton qui appelle cdp.push.subscribe() au clic. Le navigateur ne demande l'autorisation d'afficher des notifications qu'à la suite d'une action du visiteur.

Les notifications ne fonctionnent que sur un site en HTTPS. L'abonnement est rattaché au profil du visiteur.

CMS et Google Tag Manager

L'onglet CMS et GTM propose des instructions pas à pas pour un site sur mesure, Google Tag Manager, 1C-Bitrix, Tilda, WordPress et WooCommerce, InSales : où insérer le code d'installation, les événements et les widgets.

Par exemple, dans Google Tag Manager, créez une balise « HTML personnalisé » avec le code d'installation et le déclencheur « Toutes les pages ». Les événements produits nécessitent des balises distinctes appelant cdp.track, avec des déclencheurs sur les événements dataLayer (view_item, add_to_cart, purchase). Après la publication du conteneur, vérifiez dans l'onglet Installation que les événements arrivent.

Intégration avec un agent IA

Si un développeur réalise votre site avec un agent IA (Claude Code, Codex, Cursor et autres), donnez à l'agent un skill prêt à l'emploi. Dans l'onglet Agent IA, cliquez sur Télécharger SKILL.md. Le fichier contient des instructions pour l'agent en anglais avec les données de votre projet : l'adresse de OneTrace.pro, la clé d'écriture sélectionnée, les noms des événements produits, les widgets et l'état de Web Push. Grâce à elles, l'agent ajoute lui-même le code d'installation, les événements produits, la connexion et la déconnexion, les widgets et l'abonnement aux notifications.

S'il existe plusieurs clés d'écriture, sélectionnez celle qu'il vous faut.
Téléchargez le fichier et placez-le dans le projet du site : pour Claude Code, dans .claude/skills/<nom du skill>/SKILL.md ; pour les autres agents compatibles avec Agent Skills, dans leur dossier de skills, par exemple .agents/skills/<nom du skill>/SKILL.md. Le chemin exact est indiqué dans l'onglet. Vous pouvez aussi simplement joindre le fichier à votre message à l'agent.
Donnez la tâche à l'agent : un exemple de texte figure dans l'onglet.

Les clés secrètes ne figurent jamais dans le skill. Si vous modifiez les événements dans les paramètres des recommandations ou ajoutez des widgets, téléchargez à nouveau le skill.

À savoir

Le traceur accumule les événements et les envoie par lots. En cas de coupure réseau, les événements sont conservés dans le navigateur et envoyés plus tard.
Tous les événements du site sont visibles en temps réel dans la section Événements.
Les widgets de recommandations se configurent dans l'onglet Widgets : voir Widgets de recommandations sur le site.