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 :

• Currency (devise utilisée pour la transaction et dans notre plateforme, où elle peut être convertie)

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

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

2. Cliquez sur “Rechercher dans la galerie”.

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

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

5. Confirmez le choix en cliquant sur « Ajouter ».

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

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

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

   

9. 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.

   

   La valeur de devise peut également être transmise dans les paramètres optionnels.

   

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

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}}',
           'currency':'{{CURRENCY ISO CODE HERE}}'
       }]);
       window._uxa.push(['ec:transaction:send']);
   </script>

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.

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

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

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.

Dans les Règles, ouvrez une règle existante ou créez en une nouvelle.

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 évenement + condition, votre configuration devrait ressembler à ceci :

Sélectionnez l’extension Contentsquare puis Ecommerce Transactions comme type d’action.

Vous serez ensuite invité à renseigner les informations requises à l’aide de chaînes ou de Data Elements.

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

1. Ajoutez un nouveau tag à votre conteneur en sélectionnant Contentsquare (Builder).

2. Définissez le template Contentsquare en sélectionnant Ecommerce.

3. Saisissez tous les champs pour vos variables Commanders Act.

4. (Optionnel) Si vos transactions sont effectuées dans des devises différentes, envoyez à Contentsquare la valeur pour la devise.

5. (Optionnel) Si vous être client CS Merchandising, ajoutez des items.

6. Sélectionnez un déclencheur ou périmètre uniquement pour la page de confirmation, et cliquez sur Save.

Votre Tag est prêt à être déployé.

1. Cliquez sur Settings.

   

2. Depuis la fenêtre modale, sélectionnez Checkout and accounts.

   

3. Scrollez jusqu’à la section Order status page.

4. Dans le champ Additional scripts, insérez le même code que vous avez ajouté au fichier theme.liquid :

   

   Voici un exemple du code avec des Liquid Objects pre-définis. Éditez ces valeurs selon vos besoins :

   window._uxa = window._uxa || [];
   window._uxa.push(['ec:transaction:create', {
       'id': '{{checkout.order_id}}',
       'revenue': {{checkout.subtotal_price}},
       'currency':'{{currency.iso_code}}'
   }]);
   window._uxa.push(['ec:transaction:send']);

   Il est possible que le code du tracking tag Contentsquare et d’autre code soit présent dans le champ ci-dessus : ajoutez ce nouveau code à la section Contentsquare.

5. Cliquez sur Save.

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}}',
        'currency':'{{CURRENCY ISO CODE 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}}',
    }]);
    window._uxa.push(['ec:transaction:send']);
</script>