Trusted Shops nutzen mit dem Google Tag Manager

Schritt 1

Gehen Sie in die Verwaltung Ihres Kontos im Google Tag Manager und wählen Sie innerhalb der Hauptnavigation am linken Bildschirmrand den Menüpunkt „Tags“ (01_16x16.png) aus. Klicken Sie in der sich nun öffnenden Übersicht auf den Button „Neu“ (02_16x16.png).

Tags_Neu.png

Vergeben Sie zunächst einen Namen (01_16x16.png) für das neue Tag (z.B. „Trustbadge“). Klicken Sie anschließend auf „Tag-Konfiguration“ (02_16x16.png). Daraufhin öffnet sich ein weiteres Menü. Wählen Sie in diesem die Option „Benutzerdefiniertes HTML“ (03_16x16.png) aus.

NeuesTag_Benutzerdefiniertes-HTML.png

Schritt 2

Für den nächsten Schritt benötigen Sie Ihren persönlichen Trustbadge-Code. Diesen müssen Sie zunächst auf dieser Website generieren. Tragen Sie Ihre Trusted-Shops-ID in das dafür vorgesehene Eingabefeld ein. Anschließend wird der Code generiert.

Ihre Trusted-Shops-ID (beginnend mit X...) finden Sie in Ihrem Dashboard im Backend My Trusted Shops. Loggen Sie sich hierfür zunächst hier in My Trusted Shops ein. Nach dem Login werden Sie direkt ins Dashboard geleitet. In der rechten Spalte des Dashboards sind Ihre bei Trusted Shops angemeldeten Shops mit der jeweiligen Trusted-Shops-ID aufgelistet.

Kopieren Sie den kompletten Trustbadge-Code und kehren Sie zum Google Tag Manager zurück. Fügen Sie den Code in das Eingabefeld „HTML“ ein (01_16x16.png) und setzen Sie ein Häkchen bei „document.write unterstützen“ (02_16x16.png). Klicken Sie anschließend auf das Feld „Trigger“ (03_16x16.png).

NeuesTag_Code-einf_gen.png

Im nächsten Schritt definieren Sie, auf welchen Seiten Ihres Shops das neu erstellte Tag, das das Trustbadge beinhaltet, erscheinen soll. Wählen Sie „All Pages“ aus. Anschließend werden Sie in die Tag-Übersicht zurückgeleitet. Klicken Sie hier auf den Button „Speichern“ in der rechten oberen Ecke.

Trigger_AllPages.png

Das Trustbadge ist damit auf jeder Seite Ihres Shops verfügbar, auch auf der Bestellbestätigungsseite.

Schritt 3

Um über das Trustbadge Bewertungsanfragen an Ihre Kundinnen und Kunden zu verschicken und Ihrer 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 Ihrer Bestellbestätigungsseite (Danke-Seite). Das Trustbadge öffnet dann dort für Ihre Kundschaft automatisch die Trustcard, welche die Absicherung der Bestellung und/oder die Einwilligung zur Bewertungserinnerung beinhaltet.

Damit Ihre 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 Bewertungsaufforderung notwendigen Daten aus ihrem Shoptemplate direkt an das Trustbadge übergeben werden. Der Google Tag Manager kann nur auf alle zum Abschluss des Käuferschutzes notwendigen Daten zugreifen, wenn Sie den Code im Google Tag Manager auf der Bestellbestätigungseite mit einem zusätzlichen Javascript-Objekt, dem DataLayer-Objekt, ergänzen.

Hierfür benötigen Sie 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 Sie ihn im Google Tag Manager verwenden können, müssen Sie 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 Ihnen 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 Ihrer Kundin bzw. Ihres Kunden. Dies ist nötig, um Ihrer 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 Sie nur eine Währung anbieten, können Sie 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, können Sie das Wort OTHER als Wert für diesen Parameter hartkodiert eintragen.

Da über das Element dynamische Bestelldaten übergeben werden sollen, dürfen Sie das obige Codebeispiel nicht unverändert in Ihre Bestellbestätigungsseite kopieren. Ersetzen Sie stattdessen die fett markierten Werte jedes Übergabeparameters durch entsprechende Variablen in der von Ihrem 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 Ihrem Shopsystem. Die genaue Definition der zu verwendenden Variablen entnehmen Sie bitte der Dokumentation Ihres Shopsystems, da diese von System zu System unterschiedlich sind und wir an dieser Stelle keine allgemeingültigen Angaben machen können.

Sobald Sie den obigen Code vorbereitet haben, können Sie ihn kopieren. Fügen Sie ihn anschließend innerhalb Ihres Shops in das Template Ihrer Bestellbestätigungsseite ein.

Damit werden die Daten der konkreten Bestellung an das DataLayer-Objekt übergeben.

Schritt 4

Der Google Tag Manager bietet mit den benutzerdefinierten Variablen eine Möglichkeit, die Daten aus dem Data Layer zugänglich zu machen. Wählen Sie hierfür innerhalb des Hauptmenüs des Google Tag Managers den Menüpunkt „Variablen“ (01_16x16.png) aus und klicken Sie innerhalb des Bereiches „Benutzerdefinierte Variablen“ auf den Button „Neu“ (02_16x16.png).

Variablen_Neu.png

Geben Sie nun zunächst einen Namen (01_16x16.png) für die Variable ein (z.B. „tsCheckoutOrderNr“) und klicken Sie dann auf „Variable konfigurieren“ (02_16x16.png). Wählen Sie im sich nun öffnenden Menü den Menüpunkt „Datenschichtvariable“ (03_16x16.png) aus.

NeueVariable_Variablekonfigurieren.png

Geben Sie nun im Eingabefeld „Name der Datenschichtvariablen“ (01_16x16.png) 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“. Klicken Sie anschließend auf „Speichern“ (02_16x16.png), um die Variable anzulegen.

Datenschichtvariable_Konfiguration.png

Damit haben Sie die Daten aus dem Bestellnummernparameter zugänglich gemacht. Wiederholen Sie diesen Schritt nun auch für die anderen Parameter. Setzen Sie hierbei die folgenden Textbausteine als Namen der Datenschichtvariablen ein:

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

Schritt 5

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ählen Sie hierfür zunächst den Menüpunkt „Tags“ (01_16x16.png) im Hauptmenü aus und klicken Sie auf den Button „Neu“ (02_16x16.png). 

Tags_Neu2.png

Bestimmen Sie für das neue Tag zunächst einen Namen (z.B. „Trustcard“) (01_16x16.png) und klicken Sie anschließend auf „Tag-Konfiguration“ (02_16x16.png). Wählen Sie nun wie schon in Schritt 1 den Menüpunkt „Benutzerdefiniertes HTML“ (03_16x16.png) aus.

NeuesTag2_Benutzerdefiniertes-HTML.png

Kopieren Sie nun den folgenden HTML-Code und fügen Sie ihn in das Eingabefeld „HTML“ (01_16x16.png) 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);
</script>

Aktivieren Sie zudem wieder „document.write unterstützen“ (02_16x16.png) durch ein Häkchen. Klicken Sie anschließend auf „Erweiterte Einstellungen“ (03_16x16.png).

Trustcard_Konfiguration.png

Für einen reibungslosen Ablauf ist es wichtig, dass der Tag, der gerade erstellt wird, auf der Bestellbestätigungsseite vor dem Trustbadge-Tag ausgespielt wird. Dies können Sie nun über die erweiterten Einstellungen konfigurieren. Klicken Sie hierzu zunächst auf „Tag-Reihenfolge“ (01_16x16.png), um weitere Auswahlmöglichkeiten zu öffnen. Aktivieren Sie anschließend die Auswahl „Ein Tag auslösen, nachdem das Tag (Trustcard) ausgelöst wurde“ (02_16x16.png) und wählen Sie als „Cleanup-Tag“ (03_16x16.png) das in Schritt 1 erstellte Tag „Trustbadge“ aus.

Tag-Reihenfolge.png

Klicken Sie anschließend auf den Bereich „Trigger“. Damit das gerade zu erstellende Trustcard-Tag auch wirklich nur auf der Bestellbestätigungsseite erscheint, müssen Sie einen neuen Trigger konfigurieren. Klicken Sie hierfür auf das „+“. Wählen Sie als Triggertyp „Seitenaufruf“ (01_16x16.png) aus. Allerdings soll das Trustcard-Tag nicht auf allen Seiten ausgespielt werden. Entscheiden Sie sich daher für die Auswahlmöglichkeit „Einige Seitenaufrufe“ (02_16x16.png). Anschließend können Sie eine Regel definieren (03_16x16.png). Bestimmen Sie über die beiden Dropdown-Menüs zunächst „Page URL“ und „enthält“ als erste Bestandteile Ihrer Regel. Geben Sie nun in das Eingabefeld einen Bestandteil der URL Ihrer Bestellbestätigungsseite ein, anhand dessen der Google Tag Manager die Bestellbestätigungsseite zweifelsfrei erkennen kann und das Trustcard-Tag auf ihr auslöst. Klicken Sie abschließend auf „Speichern“ (04_16x16.png).

NeuerTrigger_Konfiguration.png

Anschließend werden Sie zurück in die Übersicht des Tags geleitet. Klicken Sie auch hier auf „Speichern“, um die Erstellung des Trustcard-Tags abzuschließen.


War der Artikel hilfreich?

1 von 1 fanden dies hilfreich