Technical DocImplémentation du tracking web Contentsquare

Implémentation du tracking web Contentsquare

Les instructions suivantes décrivent les étapes essentielles à suivre pour adapter l'implémentation de Contentsquare à vos besoins et commencer à utiliser notre solution.

→ Pour plus de références, consultez notre documentation technique complète.

La balise principale

La balise principale de Contentsquare (Tag principal) est le "pixel" ou "extrait de code" principal qui doit être implémenté sur votre domaine afin de collecter des données d'analyse (retrouvez les pas-à-pas ci-dessous).

Avant de commencer l'implémentation, vous devez récupérer les informations suivantes :

  • Un "Tag Id Contentsquare" vous sera donné au début de votre partenariat avec Contentsquare. C'est un identifiant de 13 caractères qui ne peut être utilisé que sur les domaines autorisés -- aucune donnée ne peut être envoyée depuis un autre domaine.
  • Vous pouvez ajouter jusqu'à 20 variables personnalisées (ou Custom Vars) pour enrichir le contexte d'analyse avec des détails sur la page ou sur l'utilisateur. Elles récoltent généralement des informations issues de votre datalayer ou d'objets JavaScript déjà présents sur votre site.

Veuillez sélectionner votre environnement de configuration dans les onglets ci-dessous.

[tab] Google Tag Manager (Template)

Étape 1

Ouvrez l’espace de travail et accédez à la section “Modèles”.

Étape 2

Cliquez sur “Rechercher dans la galerie”.

Étape 3

Recherchez “Contentsquare” et sélectionnez le modèle “Main tag”.

Étape 4

Cliquez sur “Ajouter à l’espace de travail”.

Étape 5

Confirmez le choix en cliquant sur “Ajouter”.

Étape 6

Dans la section “Balises”, cliquez sur “Nouvelle” pour ajouter le tag.

Étape 7

Configurez le tag en cliquant sur le bouton d’édition en haut à droite.

Étape 8

Recherchez “Contentsquare” et sélectionnez la balise Main Tag précédemment ajoutée.

Étape 9

Nommez la balise et insérez le tag ID fourni par Contentsquare dans le champ dédié. Si vous souhaitez configurer des Custom Variables, cela peut être réalisé en sélectionnant : • Le numéro d’emplacement (slot) de la variable, de 1 à 20; • Le nom de la variable; • La valeur de cette variable, qui peut être récupérée de l’une des variables GTM existantes; Sélectionnez ensuite le déclencheur correspondant à vos besoins. Nous vous suggérons de choisir le déclencheur couvrant toutes les pages, à partir du moment où les variables y seront générées.

Étape 10

(Optionnel) Masquez les données personnelles dans l'interface GTM.

Sélectionnez la méthode masquage des données personnelles selon le type d'information :

  • Define CSS Selectors pour les noeuds textuels.

  • CSS Selectors and Data Attributes pour les attributs.

Étape 11

Sauvegardez les modifications et retourner dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

[tab] Google Tag Manager (Custom HTML)

Étape 1

Ajoutez une nouvelle balise sur votre espace de travail.

Étape 2

Cliquez sur "Choisissez un type de tag pour commencer la configuration...".

Étape 3

Dans la liste, choisissez la balise "Custom HTML".

Étape 4

Afin de collecter des variables personnalisées à partir de votre dataLayer, consultez l'exemple de code suivant :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    try {
        window._uxa.push(['setCustomVariable', 1, 'Sample Variable', {{your-GTM-variable-here}}, 3]);
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Si vous n’avez pas de dataLayer ou n’avez pas besoin d’envoyer des variables personnalisées, consultez l’exemple suivant :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Étape 5

Cliquez sur "Choisissez un déclencheur pour cette balise...".

Étape 6

Dans la liste, choisissez le déclencheur "All Pages" qui devra attendre que le dataLayer ait été alimenté avant de déclencher le tag.

Étape 7

Cliquez sur le bouton "Enregistrer" en haut à droite et attribuez un nom au tag.

[tab] Tealium

ÉTAPE 1

Ajoutez un nouveau tag à vos conteneurs en choisissant "Content Square UX Analytics"

ÉTAPE 2

Ajoutez le "TAG ID" et cliquez deux fois sur "Suivant", en conservant la configuration par défaut.

Si vous n'avez pas de variables personnalisées, cliquez sur "Terminer".

ÉTAPE 3 - VARIABLES PERSONNALISÉES (EN OPTION)
  • Choisissez une variable du datalayer dans la liste et cliquez sur Sélectionner la destination.
  • Cliquez sur Personnaliser.
  • Ajouter un nom de variable.
  • Cliquez sur "Ajouter".
  • Cliquez sur "Fermer".

ÉTAPE 4

Cliquez sur "Terminer" ou répétez l’ÉTAPE 3 pour ajouter des variables.

[tab] Adobe Launch

Installation de l'extension Contentsquare
  • Accédez à l'onglet Extension.
  • Recherchez l'extension Contentsquare.
  • Cliquez sur installer.

À l'intérieur de la configuration de l'extension, entrez le tag ID.

Pour envoyer des variables personnalisées, cliquez sur "Ajouter une variable personnalisée" et remplissez les champs de saisie correspondants. Nous recommandons d'utiliser dataElements dans les champs de valeur, car ils constituent la méthode intégrée d'envoi des informations entre les extensions. Vous pouvez également supprimer des variables personnalisées en appuyant sur l’icône "Moins".

(Optionnel) Sélectionnez Masquez les données personnelles.

(Optionnel) Sélectionnez la méthode de masquage des données personnelles selon le type d'information:

  • Masquez les données personnelles textuelles via des sélecteurs CSS :

    Assurez-vous que les sélecteurs CSS sont valides.

  • S'il s'agit de de données personnelles non-textuelles, utilisez le champ ci-dessous et le template :

Enregistrez vos modifications et passez à l'étape suivante.

Déclenchement de la balise principale

Créez une nouvelle règle.

Configuration d'événement

En fonction de vos besoins, sélectionnez l'événement à utiliser à partir de l'extension principale.

Implémentation par défaut - bas de page et DOM ready

Voici quelques exemples :

Configuration de l'action

Sélectionnez Installation du tag principal dans l'extension Contentsquare.

Si vous n'avez pas besoin de modifier davantage le chemin ou les requêtes envoyées, cliquez sur "Conserver les modifications".

Si vous devez remplacer le chemin et / ou la requête, séléctionnez l'élément et écrivez le chemin à utiliser comme substitut. Vous pouvez également créer des dataElements et les utiliser dans ces champs.

Une fois que vous avez terminé, votre nouvelle règle devrait ressembler à la suivante :

Enregistrez et passez à la règle suivante.

[tab] Tag Commander

Étape 1

Ajoutez une nouvelle balise à vos conteneurs en choisissant "Contentsquare - Tag principal (builder)".

Étape 2

Ajoutez le Tag ID.

Étape 3

Ajoutez les variables personnalisées souhaitées :

  • À l'étape "Ajouter les variables custom" cliquez sur "Oui".
  • Remplissez toutes les variables en ajoutant un nom et en choisissant la variable correspondante dans le datalayer.

Étape 4

Le tag principal Contentsquare est prêt à être déployé.

[tab] HTML personnalisé

Afin de collecter des variables personnalisées à partir de votre datalayer, consultez l'exemple de code suivant :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Si vous n’avez pas de datalayer ou n’avez pas besoin d’envoyer des variables personnalisées, consultez l’exemple suivant :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Le tag doit être déclenché le plus tôt possible après que les variables aient été renseignées. Des informations complémentaires peuvent être trouvées ici.

Les pages vues artificielles

Les pages artificielles de Contentsquare doivent être déclenchées lorsque :

  • Une action modifie complètement le contenu affiché sur la page sans l'actualiser ni en modifier l'URL (demandes Ajax).
  • L'utilisateur est redirigé vers une autre étape d'un tunnel sans actualiser la page.
  • Votre site réachemine toutes les modifications d'URL sans actualiser la page.
  • Votre site est construit avec une application de page unique (SPA) et tous les cadres associés (par exemple, React, Angular).
  • Votre site est conçu en tant qu'application web progressive (PWA).
  • Les fenêtres modales (popin) / (popup) sont affichées.

Lorsque l'une de ces situations se produit, vous devez en assurer le suivi avec une page vue artificielle.

La documentation technique complète sur le déclenchement des pages vues artificielles est disponible ici.

Single Page Application (SPA) et changement d'historique

Au cas où l'URL serait modifiée sans recharger la fenêtre, vous pouvez traquer ces changements en déclenchant une nouvelle fois le tag principal.

[tab] Google Tag Manager (Custom HTML)

Étape 1

Modifier la configuration de la balise principale en ajoutant un nouveau déclencheur.

Étape 2

Créer un nouveau déclencheur.

Étape 3

Cliquez sur "Choisissez un type de déclencheur pour commencer la configuration...".

Étape 4

Dans la liste, sélectionnez le déclencheur "History Change".

Étape 5

Enregistrez votre déclencheur.

Étape 6

Cliquez sur le bouton "Enregistrer" en haut à droite.

[tab] Tealium

Attribuez l'événement que vous avez peut-être déjà en place à l'extension Contentsquare, afin qu'elle soit déclenchée à nouveau à chaque changement d'historique ou réacheminement de la vue.

[tab] Adobe Launch

Dans le cas d'une implémentation de SPA, si votre chemin d'url est automatiquement modifié à chaque réacheminement, il vous suffira d'utiliser l'événement de changement d'historique intégré afin de déclencher notre balise sur chacune de ces occurrences.

[tab] HTML personnalisé

Avec des variables personnalisées
<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>
Sans variables personnalisées
<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Suivi des fenêtres modales et des pages vues artificielles

Selon la procédure de suivi des fenêtres modales ou des événements qui ne changent pas la structure de l’URL, vous devez utiliser la fonctionnalité Contentsquare Trackpageview en suivant ces méthodes et en les liant à la bonne action (clic sur le bouton ou déclencheur d'événement) :

[tab] Google Tag Manager (Custom HTML)

ÉTAPE 1

Cliquez sur "Choisissez un type de tag pour commencer la configuration ...".

ÉTAPE 2

Dans la liste, choisissez la balise "Custom HTML".

ÉTAPE 3

Écrivez l'extrait à envoyer dans le champ HTML. Cela devrait ressembler à ceci :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

ÉTAPE 4

Cliquez sur "Choisissez un déclencheur pour que cette balise se déclenche ...".

ÉTAPE 5

Créer un nouveau déclencheur pour que cette balise se déclenche.

ÉTAPE 6

Cliquez sur "Choisissez un type de déclencheur pour commencer la configuration ...".

ÉTAPE 7

Dans la liste, sélectionnez le déclencheur "Tous les éléments".

ÉTAPE 8

Cochez "Quelques clics"

ÉTAPE 9

Sélectionnez "Elément de clic", "correspond au sélecteur CSS" et entrez un filtre valide CSS correspondant à l'élément que vous souhaitez suivre.

Par exemple le CSS valide pour :

<button class="btn btn primary"> Submit </button> 

sera :

.btn.btn.primary

[tab] Tealium

Attribuez l'événement que vous avez peut-être déjà en place à un extrait de code HTML personnalisé et définissez-le comme déclencheur. Cela devrait ressembler à ceci :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

[tab] Adobe Launch

Pages vues artificielles

Lors de la configuration de la règle, assurez-vous de cibler l'événement ou la condition nécessaire. Par exemple, pour une action d'ajout au panier, vous pouvez suivre l'itinéraire par clic :

Ou l'itinéraire d'événement personnalisé :

Une fois que vous avez choisi l'événement souhaité, vous pouvez sélectionner l'action de suivi de vue de page artificielle à partir de l'extension Contentsquare.

En fonction de la page consultée, vous pouvez spécifier la requête à transmettre aux serveurs Contentsquare ou laisser le champ de saisie vide, ce qui permettra à notre script de capturer automatiquement l’URL actuelle.

Vous pouvez également utiliser dataElements.

[tab] Tag Commander

ÉTAPE 1

Pour ajouter un nouvel événement, allez à l'étape “MODIFIER” et cliquez sur “AJOUTER UN ÉVÉNEMENT” (1) :

Une fenêtre de configuration apparaîtra, avec plusieurs champs :

(1) “Nom“ : Nom de l'événement que vous souhaitez ajouter (2) “Id“ : l’identifiant de l’événement (à compléter uniquement si vous le connaissez et souhaitez déclencher l’événement en fonction de son identifiant; sinon, laissez le champ vide et il sera généré automatiquement par TagCommander) (3) Code JavaScript : zone dans laquelle le code JavaScript de l’événement est saisi. (4) «Utiliser le nettoyeur de balises» : fonctionnalité permettant de «corriger» l’événement (le réécrit afin d’éviter les erreurs JavaScript et le rendre compatible avec le code du conteneur).

Cliquez sur «Ajouter» pour ajouter votre événement au conteneur.

ÉTAPE 2

Aller à la bibliothèque de balises. Une fois là :

(1) Écrivez «Event Injection» dans le moteur de recherche. (2) Sélectionnez le tag. (3) Ajouter le tag.

En cas de suivi des pages vues artificielles avec Contentsquare, le code à déployer doit suivre ces instructions :

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', *path_to_send* ]);

(4) allez sur votre site web; Placez le curseur sur l'élément sur lequel vous souhaitez placer un événement et faites un clic droit. Dans le menu qui s’ouvre, sélectionnez «Inspecter l’élément». (5) Dans la console, une fois l'élément mis en surbrillance, cliquez à nouveau avec le bouton droit de la souris. (6) Choisissez «copier» dans le menu. (7)> «Sélecteur de copie».

Remarque : ces actions sur les CSS du site ne s’appliquent qu’au navigateur Google Chrome.

(8) Si vous connaissez l’ID de l’élément (en commençant par un #, copiez-le et collez-le dans le champ # CSS_PATH #).

(9) Si vous ne connaissez pas ou ne trouvez pas l’ID, copiez et collez les informations sur l’élément en commençant par “#” et remplacez “>“ (espace> espace) par un seul espace dans la ligne de code.

(10) Copiez et collez la ligne dans le champ # CSS_Path # de l’interface.

Entrez maintenant l'ID de l'événement que vous souhaitez appeler dans le champ correspondant.

Passez à l'étape de déploiement comme vous le faites avec d'autres balises.

[tab] HTML personnalisé

<script type="text/javascript">
   window._uxa = window._uxa || [];
   window._uxa.push(['trackPageview', *path_to_send* ]);
</script>

Par exemple, si vous souhaitez garder la trace de la fenêtre contextuelle apparaissant lors de l'ajout d'un article au panier :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

Le Tag E-commerce

Le tag e-commerce permet de suivre les transactions sur votre site et collecter des statistiques relatives aux revenus générés.

Déclenchez le tag uniquement sur la page de confirmation, lorsque la transaction est finalisée, et renseignez les paramètres obligatoires suivants :

  • ID (identifiant unique pour chaque transaction)
  • Revenue (montant total de la transaction)

Vous pouvez également inclure les paramètres facultatifs suivants :

  • Shipping (montant de la livraison)
  • Tax (montant des taxes)
  • Currency

À noter :

  • Les valeurs de livraison et de taxes ne sont pas automatiquement déduites du revenu total.

La documentation technique complète sur le déclenchement du tag e-commerce est disponible ici.

[tab] Google Tag Manager (Template)

Étape 1

Ouvrez l’espace de travail et accédez à la section “Modèles”.

Étape 2

Cliquez sur “Rechercher dans la galerie”.

Étape 3

Recherchez “contentsquare” et sélectionnez le modèle “E-commerce data”.

Étape 4

Cliquez sur « Ajouter à l’espace de travail ».

Étape 5

Confirmez le choix en cliquant sur « Ajouter ».

Étape 6

Dans la section “Balises”, cliquez sur « Nouvelle » pour ajouter le tag.

Étape 7

Configurez le tag en cliquant sur le bouton d’édition en haut à droite.

Étape 8

Recherchez “Contentsquare” et sélectionnez la balise « E-commerce » précédemment ajoutée.

Étape 9-A

Nommez la balise et ajoutez les variables GTM au champ de transaction et de montant. Attention à choisir un mode de déclenchement uniquement sur la page de confirmation d’achat, ou bien sur l’ensemble des pages pour lesquelles une donnée de transaction doit être collectée.

Étape 9-B

Les valeurs de frais de livraison, taxes et devise peuvent également être transmises dans les paramètres optionnels.

Étape 10

Sauvegardez les modifications et retourner dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

[tab] Google Tag Manager (Custom HTML)

Étape 1

Créez une nouvelle balise et collez le code suivant dans le champ HTML :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}',
        'revenue': '{{YOUR REVENUE HERE}}',
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}',
        'currency':'{{CURRENCY ISO CODE HERE}}'
    }]);
    window._uxa.push(['ec:transaction:send']);
</script>
Étape 2

Dans le script, remplacez toutes les variables d'espace réservé par vos valeurs GTM (en utilisant la notation à double accolade : {{transaction id}}, {{transaction revenue}}).

Ces variables doivent être disponibles dans la section "Variables" de Google Tag Manager.

Étape 3

Dans la liste des déclencheurs, sélectionnez la "page de confirmation" ou créez-la si elle n’existe pas.

Faire cela :

  • Cliquez sur le "+" en haut à droite,
  • Cliquez sur "Choisissez un type de déclencheur pour commencer la configuration ..."
  • Choisissez "Fenêtre chargée"
  • Vous ne voulez pas que cela se déclenche sur toutes les pages, alors choisissez "Certains événements chargés par la fenêtre"
  • Ajoutez une condition pour correspondre uniquement à la page de confirmation — par exemple, URL de la page "contient" checkout / confirmation
  • Enregistrez et nommez votre déclencheur "page de confirmation"

[tab] Tealium

L'extension Tealium déclenchera automatiquement le code de transaction Contentsquare dès que les valeurs de transaction définies auront été renseignées dans votre datalayer utag.

[tab] Adobe Launch

Rendez-vous sur l'onglet des règles et créez-en un nouveau

Configuration d'événement

La balise e-commerce doit être activée uniquement sur la page de confirmation et chaque fois qu'une transaction doit être suivie. Pour ce faire, vous devez spécifier le chemin ou l'événement à utiliser comme déclencheur. Par exemple, si vous souhaitez cibler la page de confirmation, vous pouvez utiliser une condition similaire :

Si vous avez choisi l'itinéraire + condition, votre configuration devrait ressembler à ceci :

Configuration de l'action

Sélectionnez l'action d'installation de balises e-commerce à partir de l'extension Contentsquare.

Vous serez ensuite invité à renseigner les informations requises à l'aide de chaînes ou de dataElements.

Compte tenu de la nature dynamique des détails de la transaction, il est nécessaire d’avoir préalablement configuré dataElements avec les informations demandées.

[tab] Tag Commander

Étape 1

Ajoutez le e-commerce à vos conteneurs en choisissant "Contentsquare - Tag Ecommerce (constructeur)".

Étape 2

Ajoutez des variables de commanders act pour chaque entrée de la balise e-commerce Contentsquare. (obligatoire marqué par * )

Étape 3

Le tag e-commerce Contentsquare est prêt à être déployé sur la page de confirmation, où les informations de transaction sont définies dans le datalayer.

[tab] HTML personnalisé

Tout d'abord, affectez une variable aux champs obligatoires :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}',
        'revenue': '{{YOUR REVENUE HERE}}',
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}'
    }]);
</script>

Exécutez ensuite la fonction suivante pour envoyer les informations ci-dessus à Contentsquare :

<script type="text/javascript">
    window._uxa.push(['ec:transaction:send']);
</script>

Vous pouvez également tout rassembler dans un seul extrait :

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}',
        'revenue': '{{YOUR REVENUE HERE}}',
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}'
    }]);
    window._uxa.push(['ec:transaction:send']);
</script>

Test de votre implémentation

Assurez-vous que les données sont correctement envoyées à notre serveur en procédant comme suit :

Étape 1

Téléchargez notre extension Chrome "Contentsquare Tracking Setup Assistant".

Étape 2

Parcourez votre site web et, en regardant l'extension, assurez-vous que :

  • Une page vue est envoyée sur chaque page ou étape parcourue par l'utilisateur.
  • Les variables personnalisées sont envoyées.
  • E-commerce : une transaction est envoyée avec les paramétres obligatoires.

Sinon, consultez notre Section de dépannage.

Pour finir

Les données sont collectées !

Une fois que toutes les balises ci-dessus ont été implémentées, le site transmet intégralement les données nécessaires à l'analyse.

Les données collectées dans Contentsquare sont visibles 3 heures après leur réception.

Aller plus loin

Pour enrichir vos analyses, consultez notre documentation technique ici.

Contactez votre Implémentation Manager et votre Customer Success Manager pour toute demande d’implémentation avancée (suivi des événements personnalisés, masquage des données personnelles pour le Session Replay…)

Connexion avec des outils tiers

Vous pouvez facilement connecter la solution Contentsquare à des outils d'analyse tiers et à des plateformes d'AB test.

  • ABTasty
  • Adobe Analytics
  • Adobe Test & Target
  • Google Analytics 360
  • Google Optimize
  • Dynamic Yield
  • Kameleoon
  • Maxymiser
  • Monetate
  • Optimizely
  • Qubit
  • Usabilla
  • VWO

→ Lire la documentation dédiée ...

Questions fréquemment posées

"Mes données ne sont pas envoyées"

À l'aide de notre extension Chrome Contentsquare Tracking Setup Assistant, vérifiez les points ci-dessous :

  • La balise principale est-elle chargée ? (Marqueur "1" ci-dessus). Si non :
    • Assurez-vous que l'appel est effectué par votre TMS ou dans votre page.
    • Assurez-vous qu'aucune Cross-origin Resource Sharing (CORS) n'empêche d'appeler la balise.
  • Le tag est-il actif ? (Marqueur "2" ci-dessus, le "Statut" doit être "actif". — Sinon, contactez-nous.)
  • Le domaine est-il autorisé ? (Le domaine actuel doit être répertorié sur le marqueur "2" ci-dessus — Sinon, contactez-nous.)
  • La session en cours est-elle traquée ? (Marqueur "3" — Sinon, mettez à jour ce menu déroulant.)

"Ma métrique CS est différente des autres outils d'analyse"

La technologie d’analyse web actuelle est dépendante des différents navigateurs, des systèmes d’exploitation et de la résolution d’écran. Ces différents composants peuvent affecter la qualité de la donnée de tous les outils analytiques.

Lorsque vous comparez les données de Contentsquare à d’autres outils analytiques, il est possible d’observer des différences entre les métriques majeures. Plusieurs facteurs sont à prendre en compte en fonction de l'outil et des indicateurs que vous comparez.

Autres définitions d'analyse. — Les définitions de mesures suivantes ont été extraites des documentations officielles Adobe Analytics et Google Analytics. Pour obtenir une assistance supplémentaire en matière de dépannage, reportez-vous aux onglets correspondants.

 

Statistiques de Sessions vs Visits

Définitions
[tab] Contentsquare

Le nombre de visiteurs uniques sur le site ou le nombre de visiteurs uniques qui ont vu une page au moins une fois au cours de leur visite.

[tab] Google Analytics

Nombre total de sessions (non unique) pour une période séléctionnée.

Une session est la période pendant laquelle un utilisateur est actif sur votre site web, votre application, etc.

Toutes les données d'utilisation (vues d'écran, événements, e-commerce, etc.) sont associées à une session.

[tab] Adobe Analytics

Une séquence de pages vues. La métrique des visites est couramment utilisée dans les rapports qui affichent le nombre de sessions utilisateur au cours de la période sélectionnée.

La métrique de visite est toujours associée à une période. Vous savez donc s'il faut compter une nouvelle visite si le même visiteur revient sur votre site. Une session commence lorsque l'utilisateur arrive sur votre site pour la première fois et se termine dans l'un des scénarios suivants :

  • 30 minutes d'inactivité : presque toutes les sessions se terminent de cette manière. Si plus de 30 minutes se sont écoulées entre les requêtes, une nouvelle visite commence.
  • 12 heures d'activité constante : si un utilisateur envoie des requêtes sans intervalle de plus de 30 minutes pendant 12 heures, une nouvelle visite commence automatiquement.
  • 2 500 hits : Si un utilisateur génère un grand nombre de hits sans démarrer une nouvelle session, une nouvelle visite est comptabilisée après 2 500 requêtes.
  • 100 hits en 100 secondes : si une visite comporte plus de 100 hits en moins de 100 secondes, la visite se termine automatiquement. Ce comportement indique généralement une activité de bot et cette limitation est appliquée pour éviter que ces visites à forte intensité de traitement n'augmentent le temps de latence et le temps nécessaire à la génération de rapports.

Remarque : La définition d'une visite peut être abrégée pour une suite de rapports si elle est spécifiquement demandée, mais elle ne peut pas être allongée. Demandez à l'un des administrateurs de votre entreprise de contacter le service clientèle pour demander cette modification.

Une visite ne coïncide pas nécessairement avec une session de navigateur.

Suggestions de dépannage

Une divergence majeure dans les visites / sessions peut être due à plusieurs facteurs :

  • Le tag se déclenche tardivement et empêche la collecte des données.
  • Le déclencheur choisi n'est pas le même que celui utilisé pour votre autre outil d'analyse.

 

Taux de rebond et rebond

Définitions
[tab] Contentsquare

Le rapport entre les visiteurs qui sont entrés dans le site et qui l'ont quitté sans avoir vu une deuxième page et tous les visiteurs, quel que soit le nombre d'actions effectuées sur cette seule page.

[tab] Google Analytics

Un rebond est une session d'une seule page sur votre site. Le taux de rebond correspond aux sessions d'une page divisées par toutes les sessions, ou le pourcentage de toutes les sessions de votre site dans lesquelles les utilisateurs ne visualisent qu'une seule page et ne déclenchent qu'une seule requête auprès du serveur Analytics. Ces sessions d'une seule page ont une durée de session de 0 seconde, car il n'y a aucun autre résultat après le premier qui laisserait Analytics calculer la durée de la session.

[tab] Adobe Analytics

####### Rebond Une visite qui consiste en un seul appel de serveur.

Par exemple, une visite d'une seule page est un rebond si un visiteur n'interagit pas avec la page de manière à envoyer des données à Adobe (en cliquant sur un lien, en lançant une vidéo…).

Si plus d'un hit est reçu lors d'une visite, un rebond n'est pas compté

####### Taux de rebond Affiche le pourcentage de visites contenant un seul hit.

Le taux de rebond utilise la métrique de rebonds et est calculé comme suit :

Rebonds divisés par les entrées

Le taux de rebond n'inclut pas les visites pour lesquelles plusieurs actions ont eu lieu sur une seule page.

Remarque : Les implémentations existantes peuvent parfois contenir une mesure calculée qui diffère de la mesure par défaut d'Analytics.

Vérifiez la définition de la métrique calculée pour vous assurer qu'il n'y a pas de différences.

Suggestion de dépannage

Lorsque vous faites face à un écart important entre le taux de rebond et le rebond, veuillez noter que la définition du taux de rebond par Contentsquare prend en compte les visiteurs qui n'ont visionné qu'une seule page, quel que soit le nombre d'événements / actions qu'ils ont effectués.

 

Pages vues

Définitions
[tab] Contentsquare

Nombre total de pages vues.

Une vue de page prend en compte toutes les pages vues artificielles déclenchées par la fonction trackpageview.

[tab] Google Analytics

Nombre total de pages vues.

Les vues répétées d'une seule page sont comptées.

[tab] Adobe Analytics

Une page vue est comptée pour chaque appel envoyé au serveur.

Cette métrique représente le nombre total d'instances de la page vue.

Les appels TrackLink ne sont pas comptés en tant que page vue et n'incrémentent pas la métrique page vue.

Suggestions de dépannage

Une divergence majeure dans le nombre de pages vues peut être due à plusieurs facteurs, tels que :

  • Les événements que vous suivez actuellement avec votre autre outil d'analyse ne sont pas comptabilisés comme une page vue.
  • Si la majeure partie de votre site fonctionne sur une structure SPA, chaque réacheminement est suivi sous la forme d'une nouvelle page vue par Contentsquare.

 

Transactions vs Conversions

Définitions
[tab] Contentsquare

Nombre de sessions au cours desquelles les visiteurs ont effectué une transaction e-commerce.

Une transaction e-commerce est collectée à chaque déclenchement du tag e-commerce.

[tab] Google Analytics

Nombre total de transactions réalisées sur votre site.

[tab] Adobe Analytics

####### Conversions Veuillez noter que la conversion et le taux de conversion sont définis comme des rapports personnalisés. Par conséquent, la comparaison de la configuration est essentielle lors de la vérification de l'inexactitude des données.

Les rapports de conversion personnalisés sont basés sur les eVars (variables de conversion).

Pour plus d'informations : https://experienceleague.adobe.com/docs/analytics/technotes/ga-to-aa/reports/conversions-reports.html?lang=fr

####### Transactions Le nombre de commandes effectuées sur votre site web au cours de la période sélectionnée.

Suggestions de dépannage

Lorsque vous rencontrez des divergences importantes dans le nombre de transactions, si vous avez différentes pages de confirmation, veuillez vous assurer que le tag e-commerce est activé sur vos différentes pages de confirmation.

 

Taux de conversion

Définitions
[tab] Contentsquare

Le nombre de sessions avec des transactions e-commerce divisé par le nombre total de sessions au cours de la période sélectionnée.

[tab] Google Analytics

Pourcentage de sessions ayant abouti à une transaction e-commerce.

[tab] Adobe Analytics

Voir le point de conversion ci-dessus.

Suggestions de dépannage

Lorsque vous comparez le taux de conversion entre différents outils, veuillez noter que le taux de conversion de Contentsquare est basé sur le rapport entre le nombre de visites avec une transaction et le nombre total de visites.

 

Revenus

Définitions
[tab] Contentsquare

Montant total des transactions.

Cela n'inclut pas les taxes et les frais d'expédition, à moins que le montant total ait été utilisé dans le tag e-commerce.

La devise est également prédéfinie sur la plate-forme Contentsquare. Par conséquent, la valeur transmise doit être sans devise.

[tab] Google Analytics

Total des revenus provenant du e-commerce ou des transactions in-app.

Selon votre implémentation, cela peut inclure les taxes et les frais d’expédition.

[tab] Adobe Analytics

Les revenus sont saisis lors de l'événement d'achat et sont définis comme le montant total de la somme des commandes de chaque produit.

Cette valeur provient de l'événement d'achat.

Suggestions de dépannage

Un écart important dans les revenus peut être dû à plusieurs facteurs :

  • Contentsquare ne prend en compte que le montant défini comme "Revenue" dans la balise e-commerce lors du calcul du revenu total affiché.
  • Si vous devez exclure les frais d'expédition et les taxes du total des revenus, vous devez le faire avant d'envoyer la transaction.
  • Si vous avez une politique de retour, Contentsquare ne prend pas en compte les valeurs négatives dans les transactions.