Using Trusted Shops with the Google Tag Manager

Integrate the Trustbadge

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

01_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).

02_EN.png

Step 2

For the next step you will need the Trustbadge® code for your shop. The basis for your personal Trustbadge code is the following integration code:

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

Find the following line of code within the integration code:

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

Replace the bold section YOUR_TSID with your Trusted Shops ID.

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.

02_EN.pngYou have now created your Trustbadge code. If you do not make any further adjustments, the Trustbadge will...

... show your collected reviews and – after successful certification – your Trustmark.

... be placed on the right in desktop view and on the left in mobile view.

... be displayed 54 pixels above the bottom of the screen in the desktop view and 10 pixels above the bottom of the screen in the mobile view.

At this point, you have two options:

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

03_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.

04_EN.png

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

The next steps differ depending on whether you only collect service reviews or both service and product reviews with Trusted Shops. Now click on the link that matches your website to continue:

Collecting service reviews

The following steps describe how you can collect only service reviews with Trusted Shops. Would you like to collect product reviews in addition to service reviews? Then follow the steps described here: Collecting service and product reviews

Step 1

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 a review invite.

To simplify things for your customers, the data necessary for the activation of the Buyer Protection and for the review invite should be transferred directly from your shop template to the Trustbadge so they won't have to enter their order details again. 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 2

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".

05_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).

If you want to use other names for the variables, you have to adjust the code in step 3 accordingly.

Select the menu item "Data Layer Variable" (03_16x16.png) in the menu which now opens.

06_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.

07_EN.png

You have now made the data from the order number parameter accessible. Repeat this step for the other parameters. Use the following list to name the Google Tag Manager variables based on the names of the data layer variables:

Google Tag Manager variable name Data layer variable name
tsCheckoutOrderNr ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency ts_checkout.tsCheckoutOrderCurrency

Step 3

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

08_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).

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

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

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

09_EN.png

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 "+".

10_EN.png

Select "Page View - DOM Ready" (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 DOM Ready Events" (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).

11_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.

Collecting service and product reviews

The following steps describe how you can collect service and product reviews with Trusted Shops. Do you want to collect only service reviews? Then follow the steps described here: Collecting service reviews

Step 1

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 a review invite.

To simplify things for your customers, the data necessary for the activation of the Buyer Protection and for the review invite should be transferred directly from your shop template to the Trustbadge so they won't have to enter their order details again. 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',  
'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>

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.

'tsCheckoutProducts'

This parameter summarises the following parameters required to collect product reviews.

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

This parameter is used to transfer the complete link to the product detail page.

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

This parameter allows you to transfer the URL of a product image. The product image is displayed in the review questionnaire and makes it easier for your customers to remember the product. We recommend sending corresponding URLs because, according to our experience, the conversion is significantly higher.

'tsCheckoutProductName': 'Product Name 1',

This parameter transfers the product name.

'tsCheckoutProductSKU': '0123456789',

This parameter is used to transfer the Stock Keeping Unit (SKU) – the item number assigned by your shop.

'tsCheckoutProductGTIN': '0123456789',

This parameter transfers the Global Trade Item Number (GTIN). Since the GTIN uniquely identifies a product worldwide, the transfer of the GTIN makes it especially easy for Google to assign your collected product reviews to the right product. So if you have booked our Google Integration and are running campaigns in Google Shopping and Google Ads, the use of this parameter is required.

'tsCheckoutProductBrand': 'Mega Corp.',

This parameter transfers the brand of the product. Just like the GTIN, it also helps to clearly identify the products and correctly transfer the collected reviews to Google.

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 2

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".

05_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).

If you want to use other names for the variables, you have to adjust the code in step 3 accordingly.

Select the menu item "Data Layer Variable" (03_16x16.png) in the menu which now opens.

06_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.

07_EN.png

You have now made the data from the order number parameter accessible. Repeat this step for the other parameters. Use the following list to name the Google Tag Manager variables based on the names of the data layer variables:

Google Tag Manager variable name Data layer variable name
tsCheckoutOrderNr ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency ts_checkout.tsCheckoutOrderCurrency
tsCheckoutProducts ts_checkout.tsCheckoutProducts

Step 3

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

08_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).

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

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>

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

09b_EN.png

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 "+".

10_EN.png

Select "Page View - DOM Ready" (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 DOM Ready Events" (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).

11_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?

6 out of 12 found this helpful