Using Trusted Shops with the Google Tag Manager

Step 1

Go to the administration of your account in Google Tag Manager and select the menu item "Tags" (01_16x16.png) within the main navigation on the left side of the screen. In the overview that now opens, click on the "New" button (02_16x16.png).Tags_Neu_en.png

First enter a name (01_16x16.png) for the new tag (e.g. "Trustbadge"). Then click on "Tag Configuration" (02_16x16.png). This opens another menu. In this menu, select the option "Custom HTML" (03_16x16.png).

NeuesTag_Benutzerdefiniertes-HTML_en.png

Step 2

For the next step you will need the Trustbadge® code for your shop. You first have to generate this code on this website. Enter your Trusted Shops ID in the input field provided. The code will then be generated.

You can find your Trusted Shops ID (starting with X...) in your dashboard in the My Trusted Shops backend. To do this, first log in to My Trusted Shops here. After logging in, you will be taken directly to the dashboard. In the right column of the dashboard, your shops which are registered with Trusted Shops are listed, with their respective Trusted Shops ID.

Copy the complete Trustbadge code and return to the Google Tag Manager. Paste the code into the input field "HTML" (01_16x16.png) and check the box "Support document.write" (02_16x16.png). Then click on the field "Triggering" (03_16x16.png).

NeuesTag_Code-einf_gen_en.png

In the next step you will define which pages of your shop you want the newly created tag containing the Trustbadge to appear on. Select "All Pages". You will then be returned to the tag overview. Here, click on the "Save" button in the upper right corner.

Trigger_AllPages_en.png

The Trustbadge is then available on every page of your shop, including the order confirmation page.

Step 3

The Trustbadge needs a little help to send your customers review requests via the Trustbadge and be able to offer the Buyer Protection once certification has been completed. You need to set a DIV element to recognise your order confirmation page (thank-you page). The Trustbadge then automatically opens the Trustcard for your customers on this page, including a Buyer Protection for the order and/or the consent for sending of a review reminder.

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 Buyer Protection 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 Buyer Protection if you add an additional JavaScript object, the DataLayer object, to the Google Tag Manager code on the order confirmation page.

For this you will need the following code.

<script>
    dataLayer.push({
    ts_checkout: {
        'tsCheckoutOrderNr': '2020-05-21-001',
        'tsCheckoutBuyerEmail': 'my.customer@mail.co.uk', 
        'tsCheckoutOrderAmount': 4005.95        
  'tsCheckoutOrderCurrency': 'GBP',
        'tsCheckoutOrderPaymentType': 'ADVANCED PAYMENT',        
    }});
</script>

However, before you can use it in Google Tag Manager, you must first replace the example values contained in the code with the appropriate variables so that the data is filled dynamically. To help with this, we will briefly explain their function here.

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

This parameter transfers the order number. This is required for the assignment of a submitted review to a specific ordering process. If no order number is available, a time stamp for the corresponding order can also be transferred as long as this reference is unambiguous.

'tsCheckoutBuyerEmail': 'my.customer@mail.co.uk',

This parameter transfers the e-mail address of your customer. This is required to send your customer a review invite a few days after their order or to send a confirmation e-mail regarding a concluded Buyer Protection.

'tsCheckoutOrderAmount': 4005.95,

This parameter transfers the total amount of the order. As can be seen in the example 4005.95, the decimal separator is a period and the amount is stated to two decimal places.

'tsCheckoutOrderCurrency': 'GBP',

This parameter transfers the currency code of the order in accordance with ISO standard 4217. If you only offer one currency, this value can be hard-coded.

'tsCheckoutOrderPaymentType': 'ADVANCED PAYMENT',

This parameter transfers the payment method used. A simple text string is sufficient here. If the payment method is no longer available when the order is completed, the word OTHER can be hard-coded as the value for this parameter.

Because the element should transfer dynamic order details, the code example shown above should not be copied into your order confirmation page without making changes. Instead, replace the bold values of each transfer parameter with corresponding variables in the programming language used by your shop system. In the programming language PHP, for example, transfer of the e-mail address could look like this:

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

$customer_email corresponds with the e-mail address of the customer in your shop system. The exact definition of the variables to be used can be found in the documentation of your shop system, as these vary from system to system and we cannot provide any general information on this point.

Once you have prepared the above code, you will need to copy it. Then, insert it into the template of your order confirmation page within your shop.

This transfers the data from the specific order to the DataLayer object.

Step 4

With the user-defined variables, Google Tag Manager offers an option to make the data from the data layer accessible. To do this, select the menu item "Variables" (01_16x16.png) within the main menu of Google Tag Manager and click on the button "New" (02_16x16.png) within the area "User-Defined Variables".

Variablen_neu_en.png

Now first enter a name (01_16x16.png) for the variable (e.g. “tsCheckoutOrderNr") and then click on "Variable Configuration" (02_16x16.png). Select the menu item "Data Layer Variable" (03_16x16.png) in the menu which now opens.

NeueVariable_Variablekonfigurieren_en.png

Now enter the name of the data layer variable which you want to be read into the input field "Data Layer Variable Name" (01_16x16.png). In our example we want to read the value from the order number parameter. Therefore we will use "ts_Checkout.tsCheckoutOrderNr" as the name. Then click on "Save" (02_16x16.png) to create the variable.

Datenschichtvariable_Konfiguration_en.png

You have now made the data from the order number parameter accessible. Repeat this step for the other parameters. Use the following text blocks as names of the data layer variables:

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

Step 5

It is now possible to use the variables defined in the previous step in the tags and render the Checkout-DIV. First select the menu item "Tags" (01_16x16.png) in the main menu and click on the button "New" (02_16x16.png). 

Tags_Neu2_en.png

Next, define a name for the new tag (e.g. "Trustcard") (01_16x16.png) and then click on "Tag Configuration" (02_16x16.png). Now select the menu item "Custom HTML" (03_16x16.png) as in step 1.

NeuesTag2_Benutzerdefiniertes-HTML_en.png

Now copy the following HTML code and paste it into the input field "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>

Also activate "Support document.write" (02_16x16.png) again with a tick mark. Then click on "Advanced Settings" (03_16x16.png).

Trustcard_Konfiguration_en.png

For this process to go smoothly, it is important that the tag being created is displayed on the order confirmation page before the Trustbadge tag. You can now configure this using the advanced settings. First click on "Tag Sequencing" (01_16x16.png) to open further selection options. Then activate the selection "Fire a tag after Trustcard fires" (02_16x16.png) and select the "Trustbadge" tag, created in step 1, as the "Cleanup Tag" (03_16x16.png).

Tag-Reihenfolge_en.png

Then click on the "Triggering" area. To ensure that the Trustcard tag you are about to create really only appears on the order confirmation page, you must configure a new trigger. To do this, click on the "+". Select "Page View" (01_16x16.png) as the Trigger Type. However, the Trustcard tag should not be displayed on all pages. You therefore need to choose the option "Some Page Views" (02_16x16.png). You can then define a rule (03_16x16.png). Use the two drop-down menus to specify "Page URL" and "contains" as the first components of your rule. Now enter in the input field a part of the URL of your order confirmation page, by which Google Tag Manager can identify the order confirmation page beyond any doubt and trigger the Trustcard tag on it. Finally, click on "Save" (04_16x16.png).

NeuerTrigger_Konfiguration_en.png

You will then be taken back to the tag overview. Click "Save" here as well to complete the creation of the Trustcard tag.

 


Was this article helpful?

0 out of 0 found this helpful