Integrate the Trustbadge
Step 1
Go to the administration of your account in Google Tag Manager and select the menu item "Tags" () within the main navigation on the left side of the screen. In the overview that now opens, click on the "New" button (
).
First enter a name () for the new tag (e.g. "Trustbadge"). Then click on "Tag Configuration" (
). This opens another menu. In this menu, select the option "Custom HTML" (
).
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 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:
- Are you okay with these settings? Then, go straight to the next steps in this guide.
- Would you like to display the Trustbadge differently or integrate it elsewhere in your shop? Then continue the configuration of the Trustbadge code using this article: How do I adapt the Trustbadge® to my requirements? Afterwards, return to this article and continue with the next steps.
Copy the complete Trustbadge code and return to the Google Tag Manager. Paste the code into the input field "HTML" () and check the box "Support document.write" (
). Then click on the field "Triggering" (
).
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.
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
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" () within the main menu of Google Tag Manager and click on the button "New" (
) within the area "User-Defined Variables".
Now first enter a name () for the variable (e.g. “tsCheckoutOrderNr") and then click on "Variable Configuration" (
).
Select the menu item "Data Layer Variable" () in the menu which now opens.
Now enter the name of the data layer variable which you want to be read into the input field "Data Layer Variable Name" (). 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" (
) to create the variable.
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" () in the main menu and click on the button "New" (
).
Next, define a name for the new tag (e.g. "Trustcard") () and then click on "Tag Configuration" (
). Now select the menu item "Custom HTML" (
).
Now copy the following HTML code and paste it into the input field "HTML" ().
<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" () again with a tick mark. 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 - DOM Ready" () 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" (
). You can then define a rule (
). 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" (
).
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
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" () within the main menu of Google Tag Manager and click on the button "New" (
) within the area "User-Defined Variables".
Now first enter a name () for the variable (e.g. “tsCheckoutOrderNr") and then click on "Variable Configuration" (
).
Select the menu item "Data Layer Variable" () in the menu which now opens.
Now enter the name of the data layer variable which you want to be read into the input field "Data Layer Variable Name" (). 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" (
) to create the variable.
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" () in the main menu and click on the button "New" (
).
Next, define a name for the new tag (e.g. "Trustcard") () and then click on "Tag Configuration" (
). Now select the menu item "Custom HTML" (
).
Now copy the following HTML code and paste it into the input field "HTML" ().
<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" () again with a tick mark. 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 - DOM Ready" () 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" (
). You can then define a rule (
). 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" (
).
You will then be taken back to the tag overview. Click "Save" here as well to complete the creation of the Trustcard tag.