Utiliser Trusted Shops avec le Google Tag Manager

Étape 1

Rendez-vous dans l'administration de votre compte dans Google Tag Manager et sélectionnez l'élément de menu « Balises » (01_16x16.png) dans la navigation principale sur le côté gauche de l'écran. Dans l'aperçu qui s'ouvre maintenant, cliquez sur le bouton « Nouveau » (02_16x16.png).

Tags_Neu_fr.png

Attribuez d'abord un nom (01_16x16.png) à la nouvelle balise (par exemple « Trustbadge »). Cliquez ensuite sur « Configuration de la balise » (02_16x16.png). Cela ouvre un autre menu, où vous devrez sélectionner l'option « HTML personnalisée » (03_16x16.png).

NeuesTag_Benutzerdefiniertes-HTML_fr.png

Étape 2

Pour l'étape suivante, vous aurez besoin du code Trustbadge® correspondant à votre boutique. Le code peut être généré en utilisant votre identifiant Trusted Shops ou l'URL de votre boutique. Il suffit de saisir l'un ou l’autre dans le champ de saisie de ce site web. Votre code de Trustbadge personnel sera alors généré automatiquement.

Pour retrouver votre Trusted Shops-ID commençant par X, cliquez ici et connectez-vous au backend My Trusted Shops pour accéder à votre dashboard. Une fois connecté(e), vous pouvez retrouver la liste de vos domaines et leur Trusted Shops-ID respectifs à droite de votre écran.

Copiez le code Trustbadge en entier, puis revenez au Google Tag Manager. Collez le code dans le champ de saisie « HTML » (01_16x16.png) et cochez la case « Compatible avec "document.write" » (02_16x16.png). Cliquez ensuite sur le champ « Déclenchement » (03_16x16.png).

NeuesTag_Code-einf_gen_fr.png

Dans l'étape suivante, vous définissez sur quelles pages de votre boutique doit apparaître la nouvelle balise contenant le Trustbadge. Sélectionnez « All Pages ». Vous serez alors redirigé vers l'aperçu des balises. Cliquez sur le bouton « Enregistrer » en haut à droite.

Trigger_AllPages_fr.png

Le Trustbadge est donc disponible sur toutes les pages de votre boutique, même sur la page de confirmation de commande.

Étape 3

Afin d'envoyer des demandes d'avis à vos clients via le Trustbadge et de pouvoir offrir une protection si votre boutique est certifiée, le Trustbadge a besoin d'un petit coup de main. Il est nécessaire de définir un élément DIV lui permettant de reconnaître votre page de confirmation de commande (ou page de remerciement). Le Trustbadge ouvre alors automatiquement la Trustcard pour vos visiteurs, qui contient la sécurisation de la commande et/ou le consentement au rappel d’évaluation.

Pour que les acheteurs en ligne n'aient pas à saisir à nouveau leurs données de commande inutilement, les données nécessaires à l’activation de la protection et à l’envoi d’une demande d'avis devraient être transférées directement de votre modèle de boutique au Trustbadge. Google Tag Manager ne peut accéder à toutes les données nécessaires pour l'activation de la protection Trusted Shops que si vous ajoutez au code Google Tag Manager sur la page de confirmation de commande un objet JavaScript supplémentaire, l'objet DataLayer.

Pour cela, vous avez besoin du code suivant :

<script>
    dataLayer.push({
    ts_checkout: {
        'tsCheckoutOrderNr': '2020-05-21-001',
        'tsCheckoutBuyerEmail': 'mon.client@mail.fr',
        'tsCheckoutOrderAmount': 4005.95,        
  'tsCheckoutOrderCurrency': 'EUR',
        'tsCheckoutOrderPaymentType': 'PAIEMENT ANTICIPÉ',        
    }});
</script>

Toutefois, avant de pouvoir l'utiliser dans le Google Tag Manager, vous devez d'abord remplacer les valeurs d'échantillon dans le code par les variables appropriées afin que les données soient remplies de manière dynamique. À cette fin, nous allons brièvement expliquer leur fonction ici.

'tsCheckoutOrderNr': '2020-05-21-001',

Le numéro de commande est transféré via ce paramètre. Cela est nécessaire pour pouvoir attribuer une commande effective à un avis client. Si aucun numéro de commande n'est disponible, il est également possible de transférer un timbre horodateur de la commande concernée, à condition que cette référence soit unique.

'tsCheckoutBuyerEmail': 'mon.client@mail.fr',

Ce paramètre transmet l'adresse électronique de votre client. Cela est nécessaire pour pouvoir envoyer à vos clients une invitation à l'évaluation ou un e-mail de confirmation de protection quelques jours après la commande.

'tsCheckoutOrderAmount': 4005.95,

Ce paramètre est utilisé pour transférer le montant total de la commande. Comme vous pouvez le voir dans l'exemple 4005.95, le séparateur décimal est un point. Deux décimales sont également transférées.

'tsCheckoutOrderCurrency': 'EUR',

Ce paramètre permet de transférer le code de devise de la commande selon la norme ISO 4217. Si vous n'offrez qu'une seule devise, vous pouvez coder cette valeur en dur.

'tsCheckoutOrderPaymentType': 'PAIEMENT ANTICIPÉ',

Ce paramètre est utilisé pour transférer le mode de paiement utilisé. Une simple chaîne de texte suffit ici. Si le mode de paiement n'est pas (plus) disponible au moment de l'exécution de la commande, vous pouvez utiliser le mot OTHER codé en dur comme valeur pour ce paramètre.

Étant donné que les données dynamiques de la commande doivent être transférées via l'élément, vous ne devez pas copier l'exemple de code ci-dessus sans le modifier dans votre page de confirmation de commande. Remplacez plutôt les valeurs en gras de chaque paramètre de transfert par les variables correspondantes dans le langage de programmation utilisé par votre système de boutique. Dans le langage de programmation PHP, le transfert de l'adresse électronique pourrait p. ex. ressembler à ceci :

'tsCheckoutBuyerEmail': '?php echo $customer_email; ?'

Dans cet exemple, $customer_email correspond à l'adresse e-mail du client dans votre système de boutique. Pour la définition exacte des variables à utiliser, veuillez vous référer à la documentation de votre système de boutique, car celles-ci varient d'un système à l'autre et nous ne pouvons fournir aucune information générale à ce stade.

Une fois que vous avez préparé le code ci-dessus, vous pouvez le copier. Ensuite, insérez-le dans le modèle de votre page de confirmation de commande au sein de votre boutique.

Cela permet de transférer les données de la commande concrète à l'objet DataLayer.

Étape 4

Avec les variables définies par l'utilisateur, le Google Tag Manager permet de rendre accessibles les données de la couche de données. Pour ce faire, sélectionnez l'élément de menu « Variables » (01_16x16.png) dans le menu principal du Google Tag Manager et cliquez sur le bouton « Nouvelle » (02_16x16.png) dans la zone « Variables définies par l'utilisateur ».

Variablen_fr.png

Entrez d'abord un nom (01_16x16.png) pour la variable (par exemple "tsCheckoutOrderNr »), puis cliquez sur « Configuration de la variable » (02_16x16.png). Sélectionnez l'élément de menu « Variable de couche de données » (03_16x16.png) dans le menu qui s'ouvre maintenant,

NeueVariable_Variablekonfigurieren_fr.png

Puis entrez le nom de la variable de la couche de données à lire dans le champ de saisie « Nom de la variable de couche de données » (01_16x16.png). Dans notre exemple, nous voulons lire la valeur du paramètre du numéro de commande. C'est pourquoi nous utilisons le nom « ts_Checkout.tsCheckoutOrderNr ». Cliquez ensuite sur « Enregistrer » (02_16x16.png) pour créer la variable.

Datenschichtvariable_Konfiguration_fr.png

Vous avez ainsi rendu accessibles les données du paramètre de numéro de commande. Répétez maintenant cette étape pour les autres paramètres. Utilisez les modules de texte suivants comme noms de la variable de la couche de données :

  • ts_Checkout.tsCheckoutOrderAmount
  • ts_Checkout.tsCheckoutBuyerEmail
  • ts_Checkout.tsCheckoutOrderPaymentType
  • ts_Checkout.tsCheckoutOrderCurrency

Étape 5 

Il est maintenant possible d'utiliser les variables définies à l'étape précédente dans les balises et de restituer le Checkout-DIV. Sélectionnez d'abord l'élément « Balises » (01_16x16.png) dans le menu principal, puis cliquez sur le bouton « Nouveau » (02_16x16.png). 

Tags_Neu2_fr.png

Définissez d'abord un nom pour la nouvelle balise (par exemple « Trustcard ») (01_16x16.png), puis cliquez sur « Configuration de la balise » (02_16x16.png). Sélectionnez maintenant l'élément de menu « HTML personnalisée » (03_16x16.png) comme à l'étape 1.

NeuesTag2_Benutzerdefiniertes-HTML_fr.png

Copiez ensuite le code HTML suivant et collez-le dans le champ de saisie « HTML » (01_16x16.png).

<script>
var strOut = '';
strOut += '<div id="trustedShopsCheckout" style="display: none;">';
strOut += '<span id="tsCheckoutOrderNr">' + {{tsCheckoutOrderNr}} + '</span>';
strOut += '<span id="tsCheckoutBuyerEmail">' + {{tsCheckoutBuyerEmail}} + '</span>';
strOut += '<span id="tsCheckoutOrderAmount">' + {{tsCheckoutOrderAmount}} + '</span>';
strOut += '<span id="tsCheckoutOrderCurrency">' + {{tsCheckoutOrderCurrency}} + '</span>';
strOut += '<span id="tsCheckoutOrderPaymentType">' + {{tsCheckoutOrderPaymentType}} + '</span>';
strOut += '</div>';
document.write(strOut);
</script>

En outre, activez à nouveau « Compatible avec "document.write" » (02_16x16.png) en cochant la case correspondante. Cliquez ensuite sur « Paramètres avancés » (03_16x16.png).

Trustcard_Konfiguration_fr.png

Pour un processus sans heurts, il est important que la balise en cours de création soit placée sur la page de confirmation de commande avant la balise Trustbadge, ce que vous pouvez désormais configurer via les paramètres avancés. Cliquez d'abord sur « Séquençage des balises » (01_16x16.png) pour ouvrir d'autres options de sélection. Activez ensuite la sélection « Déclencher une balise après le déchlenchement de Trustcard » (02_16x16.png) et sélectionnez la balise « Trustbadge » créée à l'étape 1 comme « Balise cleanup » (03_16x16.png).

Tag-Reihenfolge_fr.png

Cliquez ensuite sur la zone « Déclenchement ». Pour vous assurer que la balise Trustcard que vous allez créer n'apparaît réellement que sur la page de confirmation de commande, vous devez configurer un nouveau déclencheur. Pour ce faire, cliquez sur le symbole « ». Sélectionnez « Page vue » (01_16x16.png) comme type de déclenchement. Toutefois, la balise Trustcard ne doit pas être affichée sur toutes les pages. Vous devez donc choisir l'option « Certaines pages vues » (02_16x16.png). Vous pouvez ensuite définir une règle (03_16x16.png). Utilisez les deux menus déroulants pour spécifier « Page URL » et « contient » comme premiers éléments de votre règle. Entrez maintenant dans le champ de saisie une partie de l'URL de votre page de confirmation de commande qui permet au Google Tag Manager de reconnaître la page de confirmation de commande de manière univoque et d’y déclencher la balise Trustcard. Pour finir, cliquez sur « Enregistrer » (04_16x16.png).

NeuerTrigger_Konfiguration_fr.png

Vous serez ensuite redirigé vers l'aperçu des balises. Ici, cliquez également sur « Enregistrer » ici pour terminer la création de la balise Trustcard.


Cet article a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 1 sur 1