Trusted Shops integration guide for Google Tag Manager

 googletagmanager-loves-trustedshops.png

 


 

In order to place additional elements on your shop pages using the Google Tag Manager, please integrate the Google Tag Manager into all of the pages of your online shop. Google recommends integrating it immediately behind the opening body tag (<body>).


Step 1

Go to the Admin section of your Google Tag Manager account and create a new “Custom HTML Tag” under the “Tags” tab.

gtm_01_en.jpg

 

gtm_02_en.jpg


Step 2:

Enter the URL of your shop below to generate your personal Trustbadge® code.


 

Copy the Trustbadge® code generated above into the “HTML” field and tick the “Support document.write” box below it. Click “Continue”.

gtm_03_en.jpg

 

Now specify on which pages of your shop the Trustbadge® is to be shown. Select the “All Pages” button and then click “Create Tag”.

gtm_04_en.jpg

 

The Trustbadge® is then available on every page of your shop, including on the order confirmation page. You’re almost done, but something important is still missing.

 

Step 3:

To allow the automatic collection of customer reviews and to enable you to take out the guarantee, the Trustbadge® needs a little help. You can do this by setting a <div>element to identify your order confirmation page (thank-you page). On this page, the Trustbadge® will then automatically open up the trustcard for your shop’s visitors. The trustcard contains the link to register for the money-back guarantee and/or the consent to be reminded to submit a review.

To make things as easy as possible for online buyers and to prevent them from having to re-enter their order details, the data necessary for the money-back guarantee and the review request should be transmitted directly from your shop template to the Trustbadge®. The Google Tag Manager can access all data necessary for taking out the Trusted Shops guarantee if you add an extra Javascript object, the dataLayer, 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', }]; </script>  

Important: Replace the values of the parameters dynamically with the details of the relevant order.

Create another “Custom HTML Tag” within the Google Tag Manager. Enter the following code in the HTML field:

 

strOut = '<div id="trustedShopsCheckout"><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>'; document.write(strOut);

 gtm_05_en.jpg

Please tick the box “Support document.write” again. 

Click on “Continue” and select when the tag is to be fired. To do so, click on the button “Some Pages” and create a new rule that identifies your order confirmation page.

gtm_06_en.jpg

In the example shown below, the rule can be, for instance:

gtm_07_en.jpg

Save your settings.

Please make sure that the order of the tags is correct. Before the Trustbadge is being triggered and displayed, the checkout tag must be fired.

 

gtm_08_en.jpg

You can now publish your settings for both configured tags with a click on the “Publish Now” button (top right), and then you can immediately check their integration into your shop:

The Trustbadge
® appears on all shop pages; after checkout has been successfully completed the trustcard opens automatically in order to offer the Trusted Shops guarantee, or to send a reminder to submit a review.