1. eTrusted
  2. Integration
  3. Manuelle Integration

Wie kann ich das Trustbadge® ohne Plugin in meine Webseite integrieren?

Für viele Shopsoftwaresysteme existieren Plugins. Diese Plugins unterstützen dich bei der Integration der von dir gebuchten Produkte in deine Webseite. Dadurch ist die Integration sehr einfach und komfortabel.
Prüfe in dieser Übersicht, ob für dein Shopsystem ein Plugin verfügbar ist: Integriere Trusted Shops in deinen Shop

  • Ist ein Plugin verfügbar? Dann folge bitte den Integrationshinweisen, die du mithilfe der oben verlinkten Übersicht gefunden hast.
  • Ist kein Plugin verfügbar? Dann kehre zu dieser Anleitung zurück und führe die im Folgenden beschriebenen Schritte durch.

Du kannst das Trustbadge® schon am ersten Tag deiner Mitgliedschaft bei Trusted Shops integrieren. Hierfür sind nur fünf Schritte notwendig:

  1. Deine Trusted Shops ID finden
  2. Trustbadge-Code konfigurieren
  3. Trustbadge-Code in deine Webseite integrieren
  4. Datenübergabe für die Trustcard definieren
  5. Trustbadge-Integration prüfen

Schritt 1: Deine Trusted Shops ID finden

Für die Trustbadge-Integration benötigst du deine individuelle Trusted Shops ID. Du findest deine Trusted Shops ID in My Trusted Shops.

  1. In My Trusted Shops einloggen. Das Dashboard öffnet sich.
  2. Innerhalb der rechten Spalte des Dashboards deine Trusted Shops ID („TS-ID") finden.

01_DE.png

Schritt 2: Trustbadge-Code konfigurieren

Die Grundlage für deine Trustbadge-Integration 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>
  1. Innerhalb des Integrationscodes die folgende Codezeile finden: 
    src="//widgets.trustedshops.com/js/YOUR_TSID.js">
  2. Den fett markierten Bereich YOUR_TSID durch deine Trusted Shops ID ersetzen.

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 Schritt 3 fort.
  • Möchtest du das Trustbadge anders darstellen oder an einer anderen Stelle deiner Webseite 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 Schritt 3 fort.

Schritt 3: Trustbadge-Code in deine Webseite integrieren

Hast du den Trustbadge-Code nach deinen Wünschen konfiguriert? Dann integriere ihn nun in deine Webseite.

  1. Innerhalb deines Shopsoftwaresystems deine Footer-Datei öffnen.
Die Footer-Datei wird vermutlich footer.php oder ähnlich heißen.
  1. Den gesamten vorbereiteten Trustbadge-Code in deinen Zwischenspeicher kopieren.
  2. Den Trustbadge-Code unmittelbar vor dem schließenden </body>-Tag in die Footer-Datei einfügen.

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

Schritt 4: Datenübergabe für die Trustcard definieren

Eine wichtige Funktionalität des Trustbadge ist die Trustcard. Die Trustcard öffnet sich nach dem Checkout auf deiner Webseite. Über die Trustcard kann deine Kundschaft ihre Einwilligung zum Empfang einer Bewertungseinladung geben und/oder ihre Bestellung mithilfe des Käuferschutzes absichern.

Language_DE_1.png

Damit sich die Trustcard zum richtigen Zeitpunkt öffnet, muss das Trustbadge die Bestellbestätigungsseite erkennen können. Hierfür musst du in das Template der Bestellbestätigungsseite ein DIV-Element integrieren.

Über dieses DIV-Element werden zugleich die für den Käuferschutz und den Versand einer Bewertungseinladung notwendigen Daten von deiner Webseite an das Trustbadge übergeben.

Die nächsten 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:

Datenübergabe für Servicebewertungen definieren

Die folgenden Schritte beschreiben, wie du die Datenübergabe ausschließlich für Servicebewertungen definierst. Möchtest du neben Service- auch Produktbewertungen sammeln? Dann folge den hier beschriebenen Schritten: Datenübergabe für Service- und Produktbewertungen definieren

Die Grundlage für das DIV-Element ist der folgende Code:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span> 
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> 
<span id="tsCheckoutOrderAmount">1.01</span> 
<span id="tsCheckoutOrderCurrency">EUR</span> 
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> 
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> 
</div>

Über das DIV-Element sollen die Bestelldaten dynamisch ausgefüllt und übergeben werden. Kopiere das obige Codebeispiel daher nicht unverändert in deine Bestellbestätigungsseite.

  1. Ersetze die beispielhaften und fett markierten Werte der Parameter. Nutze hierbei entsprechende Variablen in der von deinem Shopsystem verwendeten Programmiersprache. Die folgende Tabelle erläutert dir die einzelnen Parameter:
Parameter Funktion Bemerkungen
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Übergabe der Bestellnummer  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Übergabe der E-Mail-Adresse deiner Kundschaft  
<span id="tsCheckoutOrderAmount">1.01</span> Übergabe des Bestellwerts Wie am Beispiel 1.01 zu erkennen ist, ist das Dezimaltrennzeichen ein Punkt. Zudem werden zwei Nachkommastellen übergeben.
<span id="tsCheckoutOrderCurrency">EUR</span> Übergabe des Währungskürzels der Bestellung Für die Währungskürzel wird der ISO-Standard 4217 unterstützt. Sofern du nur eine Währung anbietest, kannst du diesen Wert hartcodiert eintragen.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Übergabe der verwendeten Zahlungsart  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Übergabe des voraussichtlichen Lieferdatums Erforderlich, wenn du Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschicken möchtest. Das übergebene Datum darf maximal ein Jahr in der Zukunft liegen. Das Datumsformat YYYY-MM-DD wird unterstützt.

In der Programmiersprache PHP könnte die Übergabe der Email-Adresse beispielsweise so aussehen:
 

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>


$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. Daher können wir an dieser Stelle leider keine allgemeingültigen Angaben machen.

  1. Öffne die Template-Datei deiner Bestellbestätigungsseite.
Die Template-Datei wird vermutlich finish.tpl, thankyou.php, success.phtml oder ähnlich heißen.
  1. Kopiere den gesamten vorbereiteten Trustbadge-Code des DIV-Elements in deinen Zwischenspeicher.
  2. Füge den Code in die Template-Datei deiner Bestellbestätigungsseite ein.

Damit öffnet sich nach dem Checkout die Trustcard auf der Bestellbestätigungsseite. Das Trustbadge ist damit mit all seinen Funktionalitäten in deine Webseite integriert.

Du möchtest nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann kannst du ihr eine feste Position auf deiner Bestellbestätigungsseite zuweisen. Folge hierfür den Hinweisen in diesem Artikel: Wie kann ich die Trustcard an einer anderen Stelle platzieren?

Datenübergabe für Service- und Produktbewertungen definieren

Die folgenden Schritte beschreiben, wie du die Datenübergabe für Service- und Produktbewertungen definierst. Möchtest du ausschließlich Servicebewertungen sammeln? Dann folge den hier beschriebenen Schritten: Datenübergabe für Servicebewertungen definieren

Die Grundlage für das DIV-Element ist der folgende Code:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span> 
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> 
<span id="tsCheckoutOrderAmount">1.01</span> 
<span id="tsCheckoutOrderCurrency">EUR</span> 
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> 
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

<!-- product reviews start -->
 <!-- for each product in the basket full set of data is required -->
 <span class="tsCheckoutProductItem">
 <span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span>
 <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span>
 <span class="tsCheckoutProductName">Product Name</span>
 <span class="tsCheckoutProductSKU">0123456789</span>
 <span class="tsCheckoutProductGTIN">0123456789</span>
 <span class="tsCheckoutProductMPN">0123456789</span>
 <span class="tsCheckoutProductBrand">My Great Brand</span>
 </span>
 <!-- product reviews end --> 
</div>

Über das DIV-Element sollen die Bestelldaten dynamisch ausgefüllt und übergeben werden. Kopiere das obige Codebeispiel daher nicht unverändert in deine Bestellbestätigungsseite.

  1. Die beispielhaften und fett markierten Werte der Parameter ersetzen. Hierbei entsprechende Variablen in der von deinem Shopsystem verwendeten Programmiersprache nutzen. Die folgende Tabelle erläutert dir die einzelnen Parameter:
Parameter Funktion Bemerkungen
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Übergabe der Bestellnummer  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Übergabe der E-Mail-Adresse deiner Kundschaft  
<span id="tsCheckoutOrderAmount">1.01</span> Übergabe des Bestellwerts Wie am Beispiel 1.01 zu erkennen ist, ist das Dezimaltrennzeichen ein Punkt. Zudem werden zwei Nachkommastellen übergeben.
<span id="tsCheckoutOrderCurrency">EUR</span> Übergabe des Währungskürzels der Bestellung Für die Währungskürzel wird der ISO-Standard 4217 unterstützt. Sofern du nur eine Währung anbietest, kannst du diesen Wert hartcodiert eintragen.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Übergabe der verwendeten Zahlungsart  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Übergabe des voraussichtlichen Lieferdatums Erforderlich, wenn du Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschicken möchtest. Das übergebene Datum darf maximal ein Jahr in der Zukunft liegen. Das Datumsformat YYYY-MM-DD wird unterstützt.
<span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span> Übergabe der vollständigen URL der Produktdetailseite  
<span class="tsCheckoutProductName">Product Name</span> Übergabe des Produktnamens  
<span class="tsCheckoutProductSKU">0123456789</span> Übergabe der Stock Keeping Unit (SKU) – also der von dir vergebenen Artikelnummer  
<span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span> Übergabe der URL eines Produktbilds Optional, aber empfehlenswert. Das Produktbild wird im Bewertungsfragebogen angezeigt und erleichtert es deiner Kundschaft, sich an das Produkt zu erinnern. Dies erhöht die Conversion.
<span class="tsCheckoutProductGTIN">0123456789</span> Übergabe der Global Trade Item Number (GTIN) Optional, aber erforderlich bei Nutzung der Google Integration. Da die GTIN ein Produkt weltweit eindeutig identifiziert, erleichtert die Übergabe der GTIN es insbesondere Google, deine gesammelten Produktbewertungen dem richtigen Produkt zuzuordnen.
<span class="tsCheckoutProductMPN">0123456789</span> Übergabe der Manufacturer Part Number (MPN) Optional. Der Parameter dient ebenfalls der eindeutigen Identifikation des Produkts.
<span class="tsCheckoutProductBrand">My Great Brand</span> Übergabe der Produktmarke Optional. Ebenso wie die GTIN und die MPN hilft auch die Produktmarke dabei, das Produkt eindeutig zu identifizieren und die gesammelten Bewertungen korrekt an Google zu übergeben.
In der Programmiersprache PHP könnte die Übergabe der Email-Adresse beispielsweise so aussehen:
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$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. Daher können wir an dieser Stelle leider keine allgemeingültigen Angaben machen.
  1. Die Template-Datei deiner Bestellbestätigungsseite öffnen.
Die Template-Datei wird vermutlich finish.tpl, thankyou.php, success.phtml oder ähnlich heißen.
  1. Den gesamten vorbereiteten Trustbadge-Code des DIV-Elements in deinen Zwischenspeicher kopieren.
  2. Den Code in die Template-Datei deiner Bestellbestätigungsseite einfügen.

Damit öffnet sich nach dem Checkout die Trustcard auf der Bestellbestätigungsseite. Das Trustbadge ist damit mit all seinen Funktionalitäten in deine Webseite integriert.

Du möchtest nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann kannst du ihr eine feste Position auf deiner Bestellbestätigungsseite zuweisen. Folge hierfür den Hinweisen in diesem Artikel: Wie kann ich die Trustcard an einer anderen Stelle platzieren?

Schritt 5: Trustbadge-Integration prüfen

Teste nun die Funktion deines Trustbadge, indem du eine Testbestellung auf deiner Webseite auslöst. Sofern das Trustbadge korrekt integriert wurde, erscheint am Ende des Checkout-Prozesses die Trustcard.

9895527896989

Dieser Artikel hilft dir bei der Prüfung deiner Trustbadge-Integration: Wie prüfe ich meine Trustbadge-Integration?

Wende dich bei Fragen oder Problemen mit deiner Integration gerne unter members@trustedshops.com an unser Customer-Success-Team.
Hast du für deine Webseite eine Content Security Policy etabliert? Dann überprüfe, ob du deine Policy nach der Trustbadge-Integration anpassen musst. Dieser Artikel hilft dir dabei: Wie passe ich meine Content Security Policy nach der Trustbadge®-Integration an?

0 von 0 fanden dies hilfreich

Verwandte Beiträge