Trustbadge integrieren
Schritt 1
Gehe in die Verwaltung deines Kontos im Google Tag Manager und wähle innerhalb der Hauptnavigation am linken Bildschirmrand den Menüpunkt „Tags" () aus. Klicke in der sich nun öffnenden Übersicht auf den Button „Neu" (
).
Vergib zunächst einen Namen () für das neue Tag (z.B. „Trustbadge"). Klicke anschließend auf „Tag-Konfiguration" (
). Daraufhin öffnet sich ein weiteres Menü. Wähle in diesem die Option „Benutzerdefiniertes HTML" (
) aus.
Schritt 2
Für den nächsten Schritt benötigst du deinen persönlichen Trustbadge-Code. Die Grundlage für deinen persönlichen Trustbadge-Code ist der folgende Integrationscode:
<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>
Finde innerhalb des Integrationscodes die folgende Codezeile:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
Ersetze den fett markierten Bereich YOUR_TSID durch deine Trusted Shops ID.
Damit
hast du deinen Trustbadge-Code erstellt. Sofern du keine weiteren Anpassungen
vornimmst, wird das Trustbadge …
… deine gesammelten Bewertungen und – nach erfolgreicher Zertifizierung – dein Gütesiegel anzeigen.
… in der Desktop-Ansicht auf der rechten Seite und in der mobilen Ansicht auf der linken Seite angezeigt.
… in der Desktop-Ansicht 54 Pixel oberhalb des unteren Bildschirmrands und in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.
An dieser Stelle hast du zwei Möglichkeiten:
- Bist du mit diesen Einstellungen einverstanden? Dann fahre direkt mit den nächsten Schritten dieser Anleitung fort.
- Möchtest du das Trustbadge anders darstellen oder an einer anderen Stelle in deinem Shop integrieren? Dann setze die Konfiguration des Trustbadge-Codes mithilfe dieses Artikels fort: Wie passe ich das Trustbadge® an meine Anforderungen an? Kehre anschließend zu diesem Artikel zurück und fahre mit den nächsten Schritten fort.
Kopiere den kompletten Trustbadge-Code und kehre zum Google Tag Manager zurück. Füge den Code in das Eingabefeld „HTML" ein () und setze ein Häkchen bei „document.write unterstützen" (
). Klicke anschließend auf das Feld „Trigger" (
).
Im nächsten Schritt definierst du, auf welchen Seiten deines Shops das neu erstellte Tag, das das Trustbadge beinhaltet, erscheinen soll. Wähle „All Pages" aus. Anschließend wirst du in die Tag-Übersicht zurückgeleitet. Klicke hier auf den Button „Speichern" in der rechten oberen Ecke.
Das Trustbadge ist damit auf jeder Seite deines Shops verfügbar, auch auf der Bestellbestätigungsseite.
Die weiteren Schritte unterscheiden sich je nachdem, ob du mit Trusted Shops nur Servicebewertungen oder Service- und Produktbewertungen sammelst. Klicke daher nun auf den zu deiner Webseite passenden Link, um fortzufahren:
Servicebewertungen sammeln
Schritt 1
Um über das Trustbadge Bewertungsanfragen an deine Kundinnen und Kunden zu verschicken und deiner Kundschaft im Falle der Zertifizierung den Käuferschutz anzubieten, benötigt das Trustbadge eine kleine Hilfe. Diese erfolgt durch das Setzen eines DIV-Elements zur Erkennung deiner Bestellbestätigungsseite (Danke-Seite). Das Trustbadge öffnet dann dort für deine Kundschaft automatisch die Trustcard, welche die Absicherung der Bestellung und/oder die Einwilligung zur Bewertungseinladung beinhaltet.
Damit deine Kundinnen und Kunden es möglichst einfach haben und die eigenen Bestelldaten nicht unnötigerweise händisch eintragen müssen, sollten die für den Käuferschutz und die Bewertungseinladung notwendigen Daten aus deinem Shoptemplate direkt an das Trustbadge übergeben werden. Der Google Tag Manager kann nur auf alle zum Abschluss des Käuferschutzes notwendigen Daten zugreifen, wenn du den Code im Google Tag Manager auf der Bestellbestätigungseite mit einem zusätzlichen Javascript-Objekt, dem DataLayer-Objekt, ergänzt.
Hierfür benötigst du den folgenden Code.
<script>
dataLayer.push({
ts_checkout: {
'tsCheckoutOrderNr': '2020-05-21-001',
'tsCheckoutBuyerEmail': 'mein.kunde@mail.de',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'VORKASSE',
}});
</script>
Bevor du ihn im Google Tag Manager verwenden kannst, musst du jedoch erst die im Code enthaltenen Beispielwerte durch die entsprechenden Variablen ersetzen, damit die Daten dynamisch befüllt werden. Zu diesem Zweck erläutern wir dir an dieser Stelle kurz deren Funktion.
'tsCheckoutOrderNr': '2020-05-21-001',
Über diesen Parameter wird die Bestellnummer übergeben. Dies ist erforderlich, um einer abgegebenen Bewertung einen tatsächlichen Bestellvorgang zuordnen zu können. Sofern keine Bestellnummer zur Verfügung steht, kann auch ein Zeitstempel der jeweiligen Bestellung übergeben werden, sofern diese Referenz eindeutig ist.
'tsCheckoutBuyerEmail': 'mein.kunde@mail.de',
Dieser Parameter übergibt die E-Mail-Adresse deiner Kundin bzw. deines Kunden. Dies ist nötig, um deiner Kundschaft einige Tage nach der Bestellung eine Bewertungseinladung oder eine Bestätigungsmail über den abgeschlossenen Käuferschutz zusenden zu können.
'tsCheckoutOrderAmount': 4005.95,
Über diesen Parameter wird der Gesamtbetrag der Bestellung übergeben. Wie am Beispiel 4005.95 zu erkennen ist, ist das Dezimaltrennzeichen ein Punkt. Zudem werden zwei Nachkommastellen übergeben.
'tsCheckoutOrderCurrency': 'EUR',
Dieser Parameter übergibt das Währungskürzel der Bestellung gemäß ISO-Standard 4217. Sofern du nur eine Währung anbietest, kannst du diesen Wert hartcodiert eintragen.
'tsCheckoutOrderPaymentType': 'VORKASSE',
Über diesen Parameter wird die verwendete Zahlungsart übergeben. Ein einfacher Text-String reicht hier aus. Sollte bei Bestellabschluss die Zahlungsart nicht (mehr) zur Verfügung stehen, kannst du das Wort OTHER als Wert für diesen Parameter hartkodiert eintragen.
Da über das Element dynamische Bestelldaten übergeben werden sollen, darfst du das obige Codebeispiel nicht unverändert in deine Bestellbestätigungsseite kopieren. Ersetze stattdessen die fett markierten Werte jedes Übergabeparameters durch entsprechende Variablen in der von deinem Shopsystem verwendeten Programmiersprache. In der Programmiersprache PHP könnte die Übergabe der Email-Adresse beispielsweise so aussehen:
'tsCheckoutBuyerEmail': '<?php echo $customer_email; ?>'
$customer_email entspricht dabei der E-Mail-Adresse der Kundin bzw. des Kunden in deinem Shopsystem. Die genaue Definition der zu verwendenden Variablen entnimmst du bitte der Dokumentation deines Shopsystems, da diese von System zu System unterschiedlich sind und wir an dieser Stelle keine allgemeingültigen Angaben machen können.
Sobald du den obigen Code vorbereitet hast, kannst du ihn kopieren. Füge ihn anschließend innerhalb deines Shops in das Template deiner Bestellbestätigungsseite ein.
Damit werden die Daten der konkreten Bestellung an das DataLayer-Objekt übergeben.
Schritt 2
Der Google Tag Manager bietet mit den benutzerdefinierten Variablen eine Möglichkeit, die Daten aus dem Data Layer zugänglich zu machen. Wähle hierfür innerhalb des Hauptmenüs des Google Tag Managers den Menüpunkt „Variablen" () aus und klicke innerhalb des Bereiches „Benutzerdefinierte Variablen" auf den Button „Neu" (
).
Gib nun zunächst einen Namen () für die Variable ein (z.B. „tsCheckoutOrderNr") und klicke dann auf „Variable konfigurieren" (
).
Wähle im sich nun öffnenden Menü den Menüpunkt „Datenschichtvariable" () aus.
Gib nun im Eingabefeld „Name der Datenschichtvariablen" () den Namen der Datenschichtvariablen ein, aus der ausgelesen werden soll. In unserem Beispiel wollen wir den Wert aus dem Bestellnummernparameter auslesen. Daher verwenden wir als Namen „ts_checkout.tsCheckoutOrderNr". Klicke anschließend auf „Speichern" (
), um die Variable anzulegen.
Damit hast du die Daten aus dem Bestellnummernparameter zugänglich gemacht. Wiederhole diesen Schritt nun auch für die anderen Parameter. Verwende die folgende Liste, um die Google-Tag-Manager-Variablen auf der Grundlage der Namen der Datenschichtvariablen zu benennen:
| Name der Google-Tag-Manager-Variable | Name der Datenschichtvariable |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
Schritt 3
Es ist nun möglich die Variablen, die im vorherigen Schritt definiert wurden, in den Tags zu nutzen und das Checkout-DIV zu rendern. Wähle hierfür zunächst den Menüpunkt „Tags" () im Hauptmenü aus und klicke auf den Button „Neu" (
).
Bestimme für das neue Tag zunächst einen Namen (z.B. „Trustcard") () und klicke anschließend auf „Tag-Konfiguration" (
). Wähle nun den Menüpunkt „Benutzerdefiniertes HTML" (
) aus.
Kopiere nun den folgenden HTML-Code und füge ihn in das Eingabefeld „HTML" () ein.
<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>
Aktiviere zudem wieder „document.write unterstützen" () durch ein Häkchen. Klicke anschließend auf den Bereich „Trigger" (
).
Damit das gerade zu erstellende Trustcard-Tag auch wirklich nur auf der Bestellbestätigungsseite erscheint, musst du einen neuen Trigger konfigurieren. Klicke hierfür auf das „+".
Wähle als Triggertyp „Seitenaufruf – DOM ist bereit" () aus. Allerdings soll das Trustcard-Tag nicht auf allen Seiten ausgespielt werden. Entscheide dich daher für die Auswahlmöglichkeit „Einige Ereignisse, die bei bereitem DOM-Objekt ausgelöst werden" (
). Anschließend kannst du eine Regel definieren (
). Bestimme über die beiden Dropdown-Menüs zunächst „Page URL" und „enthält" als erste Bestandteile deiner Regel. Gib nun in das Eingabefeld einen Bestandteil der URL deiner Bestellbestätigungsseite ein, anhand dessen der Google Tag Manager die Bestellbestätigungsseite zweifelsfrei erkennen kann und das Trustcard-Tag auf ihr auslöst. Klicke abschließend auf „Speichern" (
).
Anschließend wirst du zurück in die Übersicht des Tags geleitet. Klicke auch hier auf „Speichern", um die Erstellung des Trustcard-Tags abzuschließen.