Utiliser Trusted Shops avec le Google Tag Manager

Intégrer le Trustbadge

Étape 1

Rendez-vous dans l'administration de votre compte dans Google Tag Manager et sélectionnez l'élément de menu « Balises » () 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 » ().

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

Étape 2

Pour l'étape suivante, vous aurez besoin du code Trustbadge® correspondant à votre boutique. La base de votre code Trustbadge personnel est le code d’intégration suivant :

<script async 
data-desktop-y-offset="0" 
data-mobile-y-offset="0" 
data-desktop-disable-reviews="false" 
data-desktop-enable-custom="false" 
data-desktop-position="right" 
data-desktop-custom-width="156" 
data-desktop-enable-fadeout="false" 
data-disable-mobile="false" 
data-disable-trustbadge="false" 
data-mobile-custom-width="156" 
data-mobile-disable-reviews="false" 
data-mobile-enable-custom="false" 
data-mobile-position="left" 
data-mobile-enable-topbar="false" 
data-mobile-enable-fadeout="true" 
data-color-scheme="light" 
charset="UTF-8" 
src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
</script>

Trouvez la ligne de code suivante dans le code Trustbadge :

src="//widgets.trustedshops.com/js/YOUR_TSID.js">

Remplacez la section en gras YOUR_TSID par votre identifiant Trusted Shops.

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.

Vous avez ainsi créé votre code Trustbadge®. Si vous ne procédez à aucune autre modification, le Trustbadge...

... affichera vos avis collectés et, une fois la validation obtenue, votre Marque de confiance.

... s’affichera à droite dans l’affichage de bureau et à gauche dans l’affichage mobile.

... s’affichera 54 pixels au-dessus du bas de l’écran dans l’affichage de bureau et 10 pixels au-dessus du bas de l’écran dans l’affichage mobile.

À ce stade, vous avez deux possibilités :

Êtes-vous d’accord avec ces paramètres ? Passez ensuite directement aux étapes suivantes de ce guide.
Vous souhaitez afficher le Trustbadge différemment ou l’intégrer à un autre endroit de votre boutique ? Dans ce cas, poursuivez la configuration du code du Trustbadge® à l’aide de cet article : Comment adapter le Trustbadge® à mes besoins ? Ensuite, revenez à cet article et passez aux étapes suivantes.

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

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.

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

Les étapes suivantes diffèrent si vous ne recueilliez que des avis service ou des avis produit et service avec Trusted Shops. Cliquez maintenant sur le lien correspondant à votre site Web pour continuer :

Collecte des avis service

Les étapes suivantes décrivent la manière dont vous pouvez recueillir uniquement des avis service avec Trusted Shops. Souhaitez-vous recueillir des avis produit en plus des avis service ? Procédez de la manière suivante : Collecter les avis site et les avis produit

Étape 1

Afin d'envoyer des demandes d'avis à vos clients via le Trustbadge et de pouvoir offrir une protection si votre boutique est validé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 clients sur cette page, y compris une protection de la commande et/ou le consentement à l’envoi d’une invitation d’avis.

Pour faciliter la tâche de vos clients, les données nécessaires à l’activation de la protection acheteur et à l’invitation d’avis doivent être transmises directement du gabarit de votre boutique au Trustbadge afin qu’ils n’aient pas à saisir à nouveau les détails de leur commande. 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 2

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 » () dans le menu principal du Google Tag Manager et cliquez sur le bouton « Nouvelle » () dans la zone « Variables définies par l'utilisateur ».

Entrez d'abord un nom () pour la variable (par exemple "tsCheckoutOrderNr »), puis cliquez sur « Configuration de la variable » ().

Si vous souhaitez utiliser d’autres noms pour les variables, vous devez ajuster le code à l’étape 3 en conséquence.

Sélectionnez l'élément de menu « Variable de couche de données » () dans le menu qui s'ouvre maintenant,

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 » (). 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 » () pour créer la variable.

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 la liste suivante pour nommer les variables du Google Tag Manager en fonction des noms des variables de la couche de données :

Nom de la variable Google Tag Manager	Nom de la variable de couche de données
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency

Étape 3

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 » () dans le menu principal, puis cliquez sur le bouton « Nouveau » ().

Définissez d'abord un nom pour la nouvelle balise (par exemple « Trustcard ») (), puis cliquez sur « Configuration de la balise » (). Sélectionnez maintenant l'élément de menu « HTML personnalisée » ().

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

<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);

if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>

En outre, activez à nouveau « Compatible avec "document.write" » () en cochant la case correspondante. 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 - DOM prêt » () 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 « Certains événements déclenchés lorsqu'un objet DOM est prêt » (). Vous pouvez ensuite définir une règle (). 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 » ().

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.

Collecter les avis site et les avis produit

Les étapes suivantes décrivent la manière dont vous pouvez recueillir des avis produit et service avec Trusted Shops. Voulez-vous recueillir uniquement des avis service ? Procédez de la manière suivante : Collecte des avis service

Étape 1

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É', 
    'tsCheckoutProducts': [{
      'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
       'tsCheckoutProductName': 'Product Name 1',
       'tsCheckoutProductSKU': '0123456789',
       'tsCheckoutProductGTIN': '0123456789',
       'tsCheckoutProductBrand': 'Mega Corp.',
     },
     {
       'tsCheckoutProductUrl': 'http://www.shop.url/product2_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image2.png',
       'tsCheckoutProductName': 'Product Name 2',
       'tsCheckoutProductSKU': '987654321',
       'tsCheckoutProductGTIN': '987654321',
       'tsCheckoutProductBrand': 'Mega Corp.',
     }
   ]
  }});
</script>

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

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

'tsCheckoutOrderAmount': 4005.95,

'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É',

'tsCheckoutProducts'

Il reprend les éléments suivants nécessaires à la collecte des avis produit.

'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',

Ce paramètre permet de transférer le lien complet vers la page produit.

'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',

Ce paramètre permet de transférer l’URL d’une image produit. L’image produit figure dans le questionnaire d’avis et permet à vos clients de se souvenir plus facilement du produit. Nous vous recommandons d’envoyer les URL correspondantes car, d’après notre expérience, la conversion est nettement plus élevée.

'tsCheckoutProductName': 'Product Name 1',

Ce paramètre transfère le nom du produit.

'tsCheckoutProductSKU': '0123456789',

Ce paramètre est utilisé pour transférer l’unité de gestion des stocks (SKU) - le numéro d’article attribué par votre boutique.

'tsCheckoutProductGTIN': '0123456789',

Ce paramètre transfère le Global Trade Item Number (GTIN). Étant donné que le GTIN identifie de manière unique un produit à l’échelle mondiale, le transfert du GTIN permet à Google d’affecter facilement les avis produit que vous avez recueillis au bon produit. Par conséquent, si vous avez réservé notre intégration Google et que vous effectuez des actions dans Google Shopping et Google Ads, vous devez utiliser ce paramétrage.

'tsCheckoutProductBrand': 'Mega Corp.',

Ce paramètre permet de transférer la marque du produit. Tout comme le GTIN, il permet de reconnaître clairement les produits et de transmettre correctement les avis recueillis à Google.

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

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 2

Entrez d'abord un nom () pour la variable (par exemple "tsCheckoutOrderNr »), puis cliquez sur « Configuration de la variable » ().

Si vous souhaitez utiliser d’autres noms pour les variables, vous devez ajuster le code à l’étape 3 en conséquence.

Sélectionnez l'élément de menu « Variable de couche de données » () dans le menu qui s'ouvre maintenant,

Nom de la variable Google Tag Manager	Nom de la variable de couche de données
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency
tsCheckoutProducts	ts_checkout.tsCheckoutProducts

Étape 3

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

<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>';

var list = {{tsCheckoutProducts}}
list.forEach(function perProduct(product) {
  strOut += '<span class="tsCheckoutProductItem">';
  strOut += '<span class="tsCheckoutProductUrl">' + product.tsCheckoutProductUrl + '</span>';
  strOut += '<span class="tsCheckoutProductImageUrl">' + product.tsCheckoutProductImageUrl + '</span>';
  strOut += '<span class="tsCheckoutProductName">' + product.tsCheckoutProductName + '</span>';
  strOut += '<span class="tsCheckoutProductSKU">' + product.tsCheckoutProductSKU + '</span>';
  strOut += '<span class="tsCheckoutProductGTIN">' + product.tsCheckoutProductGTIN + '</span>';
  strOut += '<span class="tsCheckoutProductBrand">' + product.tsCheckoutProductBrand + '</span>';
  strOut += '</span>';
});

strOut += '</div>';

document.write(strOut);

if ("undefined" !== typeof trustbadge) {
  trustbadge.remove();
  trustbadge.reInitialize();
}
</script>

En outre, activez à nouveau « Compatible avec "document.write" » () en cochant la case correspondante. Cliquez ensuite sur la zone « Déclenchement » ().

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.

Utiliser Trusted Shops avec le Google Tag Manager

Intégrer le Trustbadge

Étape 1

Étape 2

Collecte des avis service

Étape 1

Étape 2

Étape 3

Collecter les avis site et les avis produit

Étape 1

Étape 2

Étape 3

Sur cette page

Besoin d’aide ? Envie de nous suggérer une fonctionnalité ?

Contactez-nous !

Intégrer le Trustbadge

Étape 1

Étape 2

Collecte des avis service

Étape 1

Étape 2

Étape 3

Collecter les avis site et les avis produit

Étape 1

Étape 2

Étape 3

Articles associés

Sur cette page

Besoin d’aide ? Envie de nous suggérer une fonctionnalité ?

Contactez-nous !