1. eTrusted Hilfe-Center
  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 Sie bei der Integration der von Ihnen gebuchten Produkte in Ihre Webseite. Dadurch ist die Integration sehr einfach und komfortabel.
Prüfen Sie in dieser Übersicht, ob für Ihr Shopsystem ein Plugin verfügbar ist: Integrieren Sie Trusted Shops in Ihren Shop
 
  • Ist ein Plugin verfügbar? Dann folgen Sie bitte den Integrationshinweisen, die Sie mithilfe der oben verlinkten Übersicht gefunden haben.
  • Ist kein Plugin verfügbar? Dann kehren Sie zu dieser Anleitung zurück und führen Sie die im Folgenden beschriebenen Schritte durch.

Sie können das Trustbadge® schon am ersten Tag Ihrer Mitgliedschaft bei Trusted Shops integrieren. Hierfür sind nur fünf Schritte notwendig:

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

Schritt 1: Ihre Trusted Shops ID finden

Für die Trustbadge-Integration benötigen Sie Ihre individuelle Trusted Shops ID. Sie finden Ihre Trusted Shops ID in My Trusted Shops.

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

01_DE.png

Schritt 2: Trustbadge-Code konfigurieren

Die Grundlage für Ihre 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 Ihre Trusted Shops ID ersetzen.

02_DE.pngDamit haben Sie Ihren Trustbadge-Code erstellt. Sofern Sie keine weiteren Anpassungen vornehmen, wird das Trustbadge …

… Ihre gesammelten Bewertungen und – nach erfolgreicher Zertifizierung – Ihr 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 haben Sie zwei Möglichkeiten:

  • Sind Sie mit diesen Einstellungen einverstanden? Dann fahren Sie direkt mit Schritt 3 fort.
  • Möchten Sie das Trustbadge anders darstellen oder an einer anderen Stelle Ihrer Webseite integrieren? Dann setzen Sie die Konfiguration des Trustbadge-Codes mithilfe dieses Artikels fort: Wie passe ich das Trustbadge® an meine Anforderungen an? Kehren Sie anschließend zu diesem Artikel zurück und fahren Sie mit Schritt 3 fort.

Schritt 3: Trustbadge-Code in Ihre Webseite integrieren

Haben Sie den Trustbadge-Code nach Ihren Wünschen konfiguriert? Dann integrieren Sie ihn nun in Ihre Webseite.

  1. Innerhalb Ihres Shopsoftwaresystems Ihre Footer-Datei öffnen.
Die Footer-Datei wird vermutlich footer.php oder ähnlich heißen.
  1. Den gesamten vorbereiteten Trustbadge-Code in Ihren 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 Ihrer 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 Ihrer Webseite. Über die Trustcard kann Ihre 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 müssen Sie 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 Ihrer Webseite an das Trustbadge übergeben.

Die nächsten Schritte unterscheiden sich je nachdem, ob Sie mit Trusted Shops nur Servicebewertungen oder Service- und Produktbewertungen sammeln. Klicken Sie daher nun auf den zu Ihrer Webseite passenden Link, um fortzufahren:

Datenübergabe für Servicebewertungen definieren

Die folgenden Schritte beschreiben, wie Sie die Datenübergabe ausschließlich für Servicebewertungen definieren. Möchten Sie neben Service- auch Produktbewertungen sammeln? Dann folgen Sie 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. Kopieren Sie das obige Codebeispiel daher nicht unverändert in Ihre Bestellbestätigungsseite.

  1. Die beispielhaften und fett markierten Werte der Parameter ersetzen. Hierbei entsprechende Variablen in der von Ihrem Shopsystem verwendeten Programmiersprache nutzen. Die folgende Tabelle erläutert Ihnen 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 Ihrer 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 Sie nur eine Währung anbieten, können Sie 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 Sie Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschicken möchten. 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 Ihrem Shopsystem. Die genaue Definition der zu verwendenden Variablen entnehmen Sie bitte der Dokumentation Ihres 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 Ihrer 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 Ihren Zwischenspeicher kopieren.
  2. Den Code in die Template-Datei Ihrer 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 Ihre Webseite integriert.

Sie möchten nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann können Sie ihr eine feste Position auf Ihrer Bestellbestätigungsseite zuweisen. Folgen Sie 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 Sie die Datenübergabe für Service- und Produktbewertungen definieren. Möchten Sie ausschließlich Servicebewertungen sammeln? Dann folgen Sie 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. Kopieren Sie das obige Codebeispiel daher nicht unverändert in Ihre Bestellbestätigungsseite.

  1. Die beispielhaften und fett markierten Werte der Parameter ersetzen. Hierbei entsprechende Variablen in der von Ihrem Shopsystem verwendeten Programmiersprache nutzen. Die folgende Tabelle erläutert Ihnen 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 Ihrer 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 Sie nur eine Währung anbieten, können Sie 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 Sie Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschicken möchten. 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 Ihnen 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 Ihrer 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, Ihre 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 Ihrem Shopsystem. Die genaue Definition der zu verwendenden Variablen entnehmen Sie bitte der Dokumentation Ihres 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 Ihrer 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 Ihren Zwischenspeicher kopieren.
  2. Den Code in die Template-Datei Ihrer 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 Ihre Webseite integriert.

Sie möchten nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann können Sie ihr eine feste Position auf Ihrer Bestellbestätigungsseite zuweisen. Folgen Sie hierfür den Hinweisen in diesem Artikel: Wie kann ich die Trustcard an einer anderen Stelle platzieren?

Schritt 5: Trustbadge-Integration prüfen

Testen Sie nun die Funktion Ihres Trustbadge, indem Sie eine Testbestellung auf Ihrer Webseite auslösen. Sofern das Trustbadge korrekt integriert wurde, erscheint am Ende des Checkout-Prozesses die Trustcard.

Language_DE_1.png

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

Wenden Sie sich bei Fragen oder Problemen mit Ihrer Integration gerne unter members@trustedshops.com an unser Customer-Success-Team.
Haben Sie für Ihre Webseite eine Content Security Policy etabliert? Dann überprüfen Sie, ob Sie Ihre Policy nach der Trustbadge-Integration anpassen müssen. Dieser Artikel hilft Ihnen dabei: Wie passe ich meine Content Security Policy nach der Trustbadge®-Integration an?

War der Artikel hilfreich?

22 von 36 fanden dies hilfreich

Verwandte Beiträge

Inhaltsverzeichnis