L'intégration avec Google Tag Manager
Pour placer des éléments supplémentaires sur les pages de votre boutique à l'aide de Google Tag Manager, veuillez intégrer le code Google Tag Manager dans toutes les pages de votre boutique. Google recommande d'intégrer ce code après la balise d'ouverture BODY <body>.
Étape 1
Accédez à votre compte Google Tag Manager et créez une nouvelle balise de type « Balise HTML personnalisée » sous « Balises ».
Étape 2 :
Saisissez l'URL de votre boutique en ligne afin de générer votre code personnel pour le Trustbadge®.
Copiez le code du Trustbadge généré dans le champ « HTML » et cochez la case « support document.write ».
Définissez ensuite sur quelles pages de votre boutique en ligne le Trustbadge doit être affiché. Sélectionnez « Toutes les pages » et puis « Créer une balise ».
Le Trustbadge® est maintenant disponible sur toutes les pages de votre boutique, y compris sur la page de confirmation de commande. C'est presque fini – il ne manque qu'une dernière étape importante.
Étape 3 :
Le Trustbadge® a besoin d'un peu d'aide pour collecter automatiquement les avis clients et permettre à vos clients d’activer la garantie de remboursement. 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® déclenchera alors automatiquement la trustcard permettant aux utilisateurs d’activer la garantie et/ou de donner leur consentement à recevoir un rappel d'avis.
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 garantie 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 garantie 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.
Exemple :
<script> dataLayer = [{
'tsCheckoutOrderNr': '123456',
'tsCheckoutOrderAmount': 12.34,
'tsCheckoutBuyerEmail': 'kunde@provider.de',
'tsCheckoutOrderPaymentType': 'Kreditkarte',
'tsCheckoutOrderCurrency': 'EUR', }];
</script>
Important : Remplacez les valeurs de l'exemple avec les données liées à une commande en remplissant de façon dynamique les valeurs des paramètres dans la langue de programmation utilisée par votre solution e-commerce.
Créez ensuite une autre balise du type « Balise HTML personnalisée » dans Google Tag Manager. Saisissez le code suivant dans le champ HTML :
<script>
strOut = '
<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">' + dataLayer[0]. tsCheckoutOrderNr + '</span>
<span id="tsCheckoutBuyerEmail">' + dataLayer[0]. tsCheckoutBuyerEmail + '</span>
<span id="tsCheckoutOrderAmount">' + dataLayer[0]. tsCheckoutOrderAmount + '</span>
<span id="tsCheckoutOrderCurrency">' + dataLayer[0]. tsCheckoutOrderCurrency + '</span>
<span id="tsCheckoutOrderPaymentType">' + dataLayer[0]. tsCheckoutOrderPaymentType + '</span>';
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->
strOut += '<span class="tsCheckoutProductItem">';
strOut += '<span class="tsCheckoutProductUrl">' + dataLayer[0]. tsCheckoutProductUrl + '</span>';
strOut += '<span class="tsCheckoutProductImageUrl">' + dataLayer[0]. tsCheckoutProductImageUrl + '</span>';
strOut += '<span class="tsCheckoutProductName">' + dataLayer[0]. tsCheckoutProductName + '</span>';
strOut += '<span class="tsCheckoutProductSKU">' + dataLayer[0]. tsCheckoutProductSKU + '</span>';
strOut += '<span class="tsCheckoutProductGTIN">' + dataLayer[0]. tsCheckoutProductGTIN + '</span>';
strOut += '<span class="tsCheckoutProductBrand">' + dataLayer[0]. tsCheckoutProductBrand + '</span>';
strOut += '</span>';
<!-- product reviews end -->
strOut = strOut + '</div>';
document.write(strOut);
</script>
Veuillez cocher la case « 'document.write' support ».
Sélectionnez le moment où la balise doit être déclenchée. Pour ce faire, cliquez sur « Aperçu », puis entrez une nouvelle règle identifiant votre page de confirmation de commande.
Dans l'exemple ci-dessus, la règle peut se lire, par exemple :
« Page URL - ends with - *checkout_success.html »
Sauvegardez vos ajustements.
Assurez-vous que l'ordre des balises déclenchées est correct :
Avant que le Trustbadge ne soit déclenché et affiché, la balise du paiement doit être déclenchée.
Vous pouvez maintenant publier les deux balises créées en cliquant sur le bouton « Publier » dans l’angle supérieur droit de l’écran.
Et voilà ! Vous avez déjà intégré le Trustbadge® ! Vous pouvez maintenant tester le fonctionnement de votre Trustbadge® en déclenchant une commande d'épreuve depuis votre site. Faites attention à ce que la trustcard apparaisse à l'issue de la commande. En cliquant sur le bouton correspondant de la trustcard, vos clients peuvent demander de recevoir une demande d'avis.
Vos clients ont désormais la possibilité, une fois leur achat terminé, d'activer la garantie de remboursement et/ou de demander l’envoi d’un rappel d'avis. Vous pouvez utiliser le collecteur d’avis pour envoyer une demande d'avis à vos clients existants.
