Trusted Shops integration guide for Google Tag Manager
The Trustbadge® technology enables you to easily collect, manage, and show customer reviews in your shop with Google Tag Manager. Once integrated, the Trustbadge technology updates automatically. You can also integrate the trustmark and offer your customers the money-back guarantee.
If you don’t have an account yet, you can register here.
Integration with Google Tag Manager
To add elements to your shop pages by using Google Tag Manager, please enter the Google Tag Manager code on all your shop pages. Google recommends that you integrate the Tag Manager code immediately after the opening BODY tag <body>.
Step 1
Step 2:
Enter your shop URL to generate your personal Trustbadge® code.
Copy the Trustbadge code into the field “HTML” and activate the checkbox “Support ‘document.write’”.
Define on which pages of your shop you want the Trustbadge to be displayed. Select “All pages” and then click on “Create tag”.
The Trustbadge® is now available on every page of your online shop and, most importantly, on the order confirmation page. You’re almost done. You need to do just one more important thing.
Step 3:
The Trustbadge® needs a little help to automatically collect customer reviews and enable customers to activate a guarantee. You need to set a DIV element to recognize your order confirmation page (thank-you page). The Trustbadge® will then automatically open the trustcard, which contains a button customers can click on to activate the guarantee and/or to provide their consent for a review request.
To make sure online shoppers have it as simple as possible and don’t need to enter their ordering data again, the data necessary for the activation of a guarantee and for a review request should be transferred directly from your shop template to the Trustbadge. Google Tag Manager can access all data needed to activate the Trusted Shops guarantee if you add an additional JavaScript object, the DataLayer object, to the Google Tag Manager code on the order confirmation page.
Example:
<script> dataLayer = [{
'tsCheckoutOrderNr': '123456',
'tsCheckoutOrderAmount': 12.34,
'tsCheckoutBuyerEmail': 'kunde@provider.de',
'tsCheckoutOrderPaymentType': 'Kreditkarte',
'tsCheckoutOrderCurrency': 'EUR',
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->
'tsCheckoutProductUrl': 'http://www.shop.url/product_page.html',
'tsCheckoutProductImageUrl': 'http://www.shop.url/image.png',
'tsCheckoutProductName': 'Product Name',
'tsCheckoutProductSKU': '0123456789',
'tsCheckoutProductGTIN': '0123456789',
'tsCheckoutProductBrand': 'ABCDEFGHIJ',
<!-- product reviews end -->
}];
</script>
Important: Replace the example values above with the order data by dynamically filling-in the values of the parameters in the programming language used by your shop system.
Create another “Custom HTML tag” in Google Tag Manager.
Enter the following code into the HTML field:
<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>
Please activate the checkbox “Support ‘document.write’” again.
Select when the tag should be triggered. To do this, click on the “Page View” button and then enter a new rule identifying your order confirmation page.
In the example above, the rule could be:
“Page URL - ends with - *checkout_success.html”
Save your settings.
Now make sure that the order of the tags is correct:
Before the Trustbadge can be triggered and displayed, the checkout tag must be fired.
You can now publish both the tags created by clicking on “Publish” at the top right.
Done! You’ve successfully integrated the Trustbadge®. You can now test the functioning of your Trustbadge® by triggering a test order in your shop. Make sure that the trustcard appears at the end of the ordering process. The trustcard contains a button your customers can click on if they want to receive a review request.
From now on, your customers will be able to activate a guarantee and/or to be sent a review request directly after checkout. To send your existing customers a review request, you can use the Review Collector.
