Trusted Shops Integrationsanleitung für Google Tagmanager

 googletagmanager-loves-trustedshops.png

Mit der einzigartigen Trustbadge® Technologie sammeln, managen und zeigen Sie Ihre Kundenbewertungen völlig mühelos mit dem Google Tag Manager in Ihren Shop an. Einmal integriert, aktualisiert die Technologie sich automatisch. Außerdem können Sie Ihr Gütesiegel einbinden und den Käuferschutz anbieten.

Wenn Sie noch keinen Account haben, können Sie sich hier anmelden.

 


Integration mit dem Google Tagmanager

Um über den Google Tagmanager zusätzliche Elemente auf Ihren Shopseiten zu platzieren, fügen Sie bitte den Google Tagmanager Code auf allen Shopseiten ein. Google empfiehlt die Einbindung unmittelbar nach dem öffnenden BODY-Tag <body>.


Schritt 1

Gehen Sie in die Verwaltung Ihres Google Tagmanager Kontos und erstellen Sie unter „Tags“ ein neues Tag vom Typ „Benutzerdefiniertes HTML-Tag“.

GTM-new-001

 

GTM-new-02


Schritt 2:

Tragen Sie unten Ihre Shop URL ein, um Ihren persönlichen Trustbadge® Code zu generieren.


 

Kopieren Sie in das Feld ‚HTML‘ den zuvor oben generierten Trustbadge Code und aktivieren Sie die Checkbox „‘document.write‘ unterstützen“ darunter. 

GTM-new-03

 

Danach definieren Sie, auf welchen Seiten Ihres Shops das Trustbadge angezeigt werden soll. Wählen Sie die Schaltfläche „Alle Seiten“ und anschließend „Tag erstellen“.

GTM-new-04

 

Das Trustbadge® ist damit auf jeder Seite Ihres Shops verfügbar, vor allem auch auf der Bestellbestätigungsseite. Sie sind fast fertig, aber etwas Wichtiges fehlt noch.

 

Schritt 3:

Für das automatische Einsammeln von Kundenbewertungen und den Abschluss des Käuferschutz 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 Besucher automatisch die Trustcard, welche die Anmeldung zum Käuferschutz und/oder die Einwilligung zur Bewertungserinnerung beinhaltet.

Damit die Online-Shopper es möglichst einfach haben und nicht unnötig ihre Bestelldaten nochmal eintippen müssen, sollten die zum Käuferschutz und Bewertungsaufforderung notwendigen Daten aus ihrem Shoptemplate direkt an das Trustbadge übergeben werden. Der Google Tagmanager kann auf alle zum Abschluss des Trusted Shops Käuferschutzes notwendigen Daten zugreifen, wenn Sie den Google Tagmanager Code auf der Bestellbestätigungseite mit einem zusätzlichen Javascript Objekt, dem DataLayer Objekt, ergänzen.


Beispiel:

<script> dataLayer = [{
'tsCheckoutOrderNr': '123456',
'tsCheckoutOrderAmount': 12.34,
'tsCheckoutBuyerEmail': 'kunde@provider.de',
'tsCheckoutOrderPaymentType': 'Kreditkarte',
'tsCheckoutOrderCurrency': 'EUR',
};
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->

'tsCheckoutProductUrl': 'http://www.shop.url/product_page.html',
'tsCheckoutProductImageUrl': 'http://www.shop.url/image.png',
'tsCheckoutProductName': 'Product Name',
'tsCheckoutProductSKU': '0123456789',
'tsCheckoutProductGTIN': '0123456789',
'tsCheckoutProductBrand': 'ABCDEFGHIJ',

<!-- product reviews end -->
}]
</script>

Wichtig hierbei ist: Ersetzen Sie die oben gezeigten beispielhaften Werte durch die jeweiligen Daten einer Bestellung, indem Sie die Werte der Parameter mittels der von Ihrem Shopsystem verwendeten Programmiersprache dynamisch befüllen.

Erstellen Sie dann bitte einen weiteren Tag vom Typ „Benutzerdefiniertes HTML-Tag“ innerhalb des
Google Tagmanager. Geben Sie im Feld HTML folgenden Code ein:

strOut = '
<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">' + dataLayer[0]. tsCheckoutOrderNr + '</span>
<span id="tsCheckoutBuyerEmail">' + dataLayer[0]. tsCheckoutBuyerEmail + '</span>
<span id="tsCheckoutOrderAmount">' + dataLayer[0]. tsCheckoutOrderAmount + '</span>
<span id="tsCheckoutOrderCurrency">' + dataLayer[0]. tsCheckoutOrderCurrency + '</span>
<span id="tsCheckoutOrderPaymentType">' + dataLayer[0]. tsCheckoutOrderPaymentType + '</span>';
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->

strOut += '<span class="tsCheckoutProductItem">';
strOut += '<span class="tsCheckoutProductUrl">' + dataLayer[0]. tsCheckoutProductUrl + '</span>';
strOut += '<span class="tsCheckoutProductImageUrl">' + dataLayer[0]. tsCheckoutProductImageUrl + '</span>';
strOut += '<span class="tsCheckoutProductName">' + dataLayer[0]. tsCheckoutProductName + '</span>';
strOut += '<span class="tsCheckoutProductSKU">' + dataLayer[0]. tsCheckoutProductSKU + '</span>';
strOut += '<span class="tsCheckoutProductGTIN">' + dataLayer[0]. tsCheckoutProductGTIN + '</span>';
strOut += '<span class="tsCheckoutProductBrand">' + dataLayer[0]. tsCheckoutProductBrand + '</span>';
strOut += '</span>';

<!-- product reviews end -->
strOut = strOut + '</div>';
document.write(strOut);
 

GTM-new-05

Bitte aktivieren Sie wieder die Checkbox „‘document.write‘ unterstützen“. 

Wählen Sie aus, wann das Tag ausgelöst werden soll. Dazu klicken Sie die Schaltfläche „Page View“ und geben dann eine neue Regel an, die Ihre Bestellbestätigungsseite identifiziert.

GTM-new-07

Im oben gezeigten Anwendungsbeispiel kann die Regel zum Beispiel lauten:
"Page URL - ends with - *checkout_success.html"

Speichern Sie Ihre Einstellungen.

Achten Sie dann bitte darauf, dass die Reihenfolge der ausgespielten Tags richtig ist:
Bevor das Trustbadge ausgelöst und angezeigt wird, muss das Checkout-Tag gefeuert werden.

 GTM-new-08

Nun können Sie beide erstellte Tags mit einem Klick auf den Button „Veröffentlichen“ rechts oben veröffentlichen.

Und damit haben Sie das Trustbadge
® erfolgreich eingebunden! Sie können die Funktion Ihres Trustbadge® nun testen, indem Sie probehalber eine Bestellung in Ihrem Shop auslösen. Achten Sie darauf, dass ganz am Ende der Bestellung die Trustcard erscheint, in der Ihre Käufer sich mit Klick auf den Button zu einer Bewertungseinladung anmelden können.

Von jetzt an haben Ihre Kunden direkt nach Abschluss des Einkaufs die Möglichkeit, den Käuferschutz zu buchen und/oder sich an die Abgabe einer Bewertung erinnern zu lassen. Um Ihren Bestandskunden eine Bewertungsaufforderung zuzuschicken, können Sie den Review Collector nutzen.