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','setLanguage','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.ru/tracker/cdp.js');
cdp.init('cdp_wk_…', { host: 'https://cdp.onetrace.ru' });
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.

Applications monopages (SPA et PWA)

Dans les applications React, Vue, Angular et similaires, la page ne se recharge pas : c'est donc l'application qui envoie les pages vues. Appelez cdp.page() après chaque changement d'écran, mais pas deux fois pour le premier chargement — le code d'installation l'a déjà envoyé. Si le hook du routeur s'exécute aussi au premier chargement (afterEach dans Vue Router, useEffect dans React), retirez plutôt cdp.page() du code d'installation — un exemple figure dans l'onglet Installation.

// après chaque changement d'écran, une fois l'adresse mise à jour par le routeur
cdp.page();

// un écran sans adresse propre, ou l'adresse n'a pas encore changé
cdp.page('Panier', { path: '/cart', title: 'Panier' });

Si un écran n'a pas d'adresse propre (une fenêtre modale, une étape de commande, une PWA sans adresses) ou si le routeur change l'adresse plus tard, transmettez la page explicitement : path ou url (relative possible) et le titre. Cette page est enregistrée dans la page vue et dans le contexte des événements suivants — par exemple, un ajout au panier est rattaché à l'écran du panier — jusqu'au prochain appel de cdp.page(). Le traceur considère l'écran précédent comme référent du deuxième écran et des suivants, et conserve les paramètres UTM de la visite jusqu'à la fermeture de l'onglet.

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: 'anna@example.com' });

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.

Le tableau Identification du client de l'onglet Événements produits indique les identifiants dont chaque canal a besoin et comment ils arrivent dans le profil : email pour les campagnes e-mail, phone au format international pour les SMS, WhatsApp et Viber par numéro, et pour les bots Telegram et Viber, le rattachement du chat via un lien créé par votre serveur. Transmettez tout ce que vous savez du client : plus il y a d'identifiants, plus de canaux sont disponibles.

Langue du client

Le traceur transmet la langue du navigateur, qui est enregistrée dans le profil du client (l'attribut language) tant que la langue n'est pas définie explicitement. Les parcours et les campagnes s'en servent pour choisir la version linguistique d'un modèle. Les langues du projet s'affichent dans le bloc Langue du client de l'onglet Installation.

Si le site propose un sélecteur de langue, transmettez le choix du visiteur : il est mémorisé et enregistré dans le profil :

cdp.setLanguage('de');

Une autre source de langue se définit à l'initialisation : language: 'page' — l'attribut lang de <html>, un code de langue — une langue pour tout le site, false — ne pas transmettre la langue. Une langue connue dans votre système peut être transmise comme attribut : cdp.identify('user-42', { language: 'de' }).

Événements produits

L'onglet Événements produits présente des appels prêts à l'emploi pour cinq actions : Consultation de produit, Ajout au panier, Commande, Favoris 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 }],
});

Favoris est facultatif : les événements add_to_wishlist et remove_from_wishlist servent aux parcours qui annoncent les baisses de prix et le retour en stock des produits favoris. Appelez cdp.addToWishlist('SKU-1') et cdp.removeFromWishlist('SKU-1'), ou passez-vous de code : ajoutez au bouton l’attribut data-cdp-wishlist="SKU-1" (ajouter) ou data-cdp-wishlist-remove="SKU-1" (retirer), et le tracker envoie l’événement au clic.

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.

Liens de parrainage

Si le parrainage est activé dans le programme de fidélité, chaque membre dispose d'un lien vers votre site avec le paramètre ?ref=CODE. Le traceur détecte lui-même ce paramètre : il conserve le code pendant 30 jours dans le cookie cdp_ref et envoie une seule fois l'événement referral_visited. L'ami est comptabilisé lorsqu'il s'inscrit ou se connecte sur le site. Les plugins de boutique transmettent le code du cookie lors de l'inscription ; pour votre propre site, utilisez l'API.

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.ru/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.ru, 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.

Onglet « Agent IA » : skill avec les données du projet pour un agent IA

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

Les robots des moteurs de recherche, les aperçus de liens des messageries, les services de vérification de sites et les navigateurs automatisés ne sont pas comptés : le traceur n'envoie pas leurs événements et ne leur dépose pas de cookies, mais affiche les widgets de recommandations. Pour compter tous les visiteurs, ajoutez l'option au code d'installation : cdp.init('…', { host: '…', ignoreBots: false }).
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.