Wie integriere ich Produktbewertungs-Widgets auf meiner Website?

Die Integration eines Produktbewertungs-Widgets funktioniert wie für jedes andere Widget. Allerdings gibt es einen großen Unterschied: Sie müssen mindestens eine Produkt-Kennzeichnung einfügen.

Sie möchten wissen, wie Widgets auf Ihrer Webseite aussehen? Finden Sie es hier heraus:
Wie sehen eTrusted Widgets auf meiner Webseite aus?

Was sind Produkt-Kennzeichnungen?

Produkt-Kennzeichnungen sind eine Reihe von numerischen oder alphanumerischen Ziffern, die ein bestimmtes Produkt identifizieren. 

Die eTrusted Produktbewertungs-Widgets unterstützen die am häufigsten verwendeten Produkt-Kennzeichnungen:

  • SKU (Stock Keeping Unit): SKUs sind eindeutige IDs, die vom Händler vergeben werden.

  • GTIN (Global Trading Item Number): GTINs identifizieren Ihre Produkte eindeutig und global, basierend auf internationalen Standards. Beispiele sind ISBN oder EAN.

  • MPN (Manufacturer Part Number): MPNs identifizieren Produkte eindeutig und global. Sie werden vom Hersteller des Produkts vergeben.

Kann ich mehrere Produkt-Kennzeichnungen verwenden?

Ja, das können Sie. Bei Produkten mit verschiedenen Varianten müssen Sie das sogar.

Wenn Sie beispielsweise T-Shirts in verschiedenen Größen verkaufen, müssen Sie für jede Größe (bspw. S, M, L) eine Produkt-Kennzeichnung angeben. Diese geben Sie nacheinander ein und trennen diese mit einem Komma voneinander ab.  

Achten Sie bitte darauf, dass Sie mindestens eine Produkt-Kennzeichnung auswählen. Wenn Sie keine auswählen, wird Ihr Widget nicht angezeigt.

Wie füge ich ein Produktbewertungs-Widget zu meiner Website hinzu?

Eine Frage vorab: Haben Sie Ihre Trusted Shops Produkte mithilfe eines Plugins in Ihre Webseite eingebunden? Mit vielen unserer Plugins können Sie auch die Widgets mit wenigen Klicks und ohne technische Vorkenntnisse einbinden. Überprüfen Sie daher zunächst, ob Ihr Plugin die Einbindung der Widgets unterstützt:
 
  1. Öffnen Sie Ihr Trusted Shops Plugin.
  2. Überprüfen Sie, ob Ihr Plugin über den Reiter „Widgets“ verfügt.
Ist der Reiter „Widgets“ in Ihrem Plugin vorhanden? Dann folgen Sie dieser Anleitung: Gesammelte Shop- und Produktbewertungen in Ihrem Shop anzeigen
Ist der Reiter „Widgets“ in Ihrem Plugin nicht vorhanden? Dann machen Sie mit dieser Anleitung weiter.

Schritt 1: Erzeugung des Widget-Codes

Alle verfügbaren Produktbewertungs-Widgets finden Sie in der Widget-Bibliothek.

  1. Ins eTrusted Kontrollzentrum einloggen.
  2. In der Hauptnavigation auf den Stern („Bewertungen“) (01_16x16.png) klicken. Anschließend auf „Marketing“ (02_16x16.png) klicken.
  3. Den Reiter „Widgets“ (03_16x16.png) öffnen.
    01_DE.png
  4. Ein Produktbewertungs-Widget auswählen. Anschließend auf den zum Widget gehörenden Button „Erstellen“ klicken. Der Konfigurationsmodus des Widgets öffnet sich.
    02_DE.png
  5. Die zu Ihrer Webseite passende Sprache auswählen.
    03_DE.png
  6. Das Farbschema wählen, in dem das Widget angezeigt werden soll:
    - „Hell“ wählen, wenn das Widget immer im Standard-Farbschema angezeigt werden soll.
    - „Dark“ wählen, wenn das Widget immer im Dark Mode angezeigt werden soll.
    - „OS default“ wählen, wenn die Dark-Mode-Einstellungen Ihrer Kundschaft darüber bestimmen sollen, ob das Widget im Dark Mode angezeigt wird.
    04_DE.png
  7. Konfigurieren Sie gerade das Widget „Bewertungsübersicht“? Dann Rich Snippets aktivieren, falls gewünscht.
    05_DE.png
Rich Snippets sind erweiterte Suchergebnisse, die zusätzliche Informationen zum Inhalt einer Webseite bieten. Sie können von Suchmaschinen dazu genutzt werden, das eigentliche Suchergebnis visuell hervorzuheben. Die dazu benötigten Informationen stammen aus strukturierten Daten, die im Quellcode der Seite abgelegt sind. Durch die Aktivierung der Rich Snippets stellt das Widget diese Informationen für Suchmaschinen bereit.
  1. Das Verhalten des Widgets für Produkte festlegen, die noch keine Bewertung erhalten haben:
    - Ein Häkchen bei „Widget ausblenden, wenn keine Bewertungen vorhanden sind setzen, falls das Widget komplett ausgeblendet werden soll.
    - Kein Häkchen bei „Widget ausblenden, wenn keine Bewertungen vorhanden sind“ setzen, falls graue Sterne dargestellt werden sollen.
    06_DE.png
  2. Ein Häkchen bei „Bilder anzeigen” setzen, wenn von Ihrer Kundschaft hochgeladene Produktfotos im Widget angezeigt werden sollen.
In den folgenden Widgets können Produktfotos angezeigt werden: Bewertungs-Karussell, Customer Voice, Bewertungsübersicht.

Images-in-Widgets_DE.png

  1. Auf „Widget-Code erzeugen“ klicken. Die Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ öffnet sich.
    07_DE.png
  2. Über das Dropdown-Menü die von Ihnen verwendete Produkt-Kennzeichnung auswählen.
    04_DE.png

Damit haben Sie den Widget-Code erfolgreich erzeugt. Nun muss der Widget-Code in Ihre Webseite integriert werden.

Schritt 2: Einbindung des Widget-Codes in Ihre Webseite

Um Produktbewertungs-Widgets auf Ihrer Webseite anzuzeigen, ist die Einbindung von HTML- und JavaScript-Code im Head und im Body Ihres Webseiten-HTMLs erforderlich. Die hierfür notwendigen Code-Schnipsel finden Sie in der Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“, die sich nach der Erzeugung des Widget-Codes öffnet.

Sie verfügen nicht über die nötigen Kenntnisse, um den Widget-Code in Ihr Webseiten-HTML einzufügen? Dann klicken Sie auf „Alle Anweisungen kopieren“. Öffnen Sie anschließend ein Textdokument Ihrer Wahl und fügen Sie den kopierten Widget-Code in das Textdokument ein. Senden Sie das Textdokument anschließend an die Admins Ihrer Webseite.
05_DE.png

Sie möchten den Widget-Code selbst in das HTML Ihrer Webseite einbinden? Dann folgen Sie diesen Schritten:

  1. Auf das Dokumentensymbol im oberen Codefeld („Initialisierung“) klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
    06_DE.png
  2. Innerhalb Ihres Webseiten-HTMLs den Head-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel in den Head-Abschnitt einfügen.
Der JavaScript-Code für den Head wird nur einmal benötigt, auch wenn Sie mehrere Widgets auf Ihrer Webseite implementieren.
  1. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Auf das Dokumentensymbol im mittleren Codefeld („Widget einbinden“) klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
    07_DE.png
  2. Innerhalb des HTMLs Ihrer Webseite den Body-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt einfügen, an der Sie das Widget platzieren möchten.
  3. Innerhalb des eingefügten Code-Schnipsels den Wert YOUR-DATA-SKU bzw. YOUR-DATA-GTIN bzw. YOUR-DATA-MPN durch die Produkt-Kennzeichnung des Produkts, dessen Bewertungen im Widget dargestellt werden sollen, ersetzen.
Sollen die Bewertungen mehrerer Produktvarianten (z.B. verschiedene Konfektionsgrößen des gleichen Kleidungsstücks) im gleichen Widget dargestellt werden? Dann fügen Sie an der in Schritt 5 genannten Stelle mehrere Produkt-Kennzeichnungen ein. Trennen Sie die einzelnen Produkt-Kennzeichnungen durch ein Komma.
Unten sehen Sie ein Beispiel dafür, wie der Code des Widgets "Bewertungsübersicht" aussehen könnte.
Das Beispiel zeigt ein Produkt mit drei verschiedenen Produktvarianten, die die beispielhaften SKUs 0055573.001, 0055573.002 und 0055573.005 besitzen. Sie können diese einfach hinzufügen und durch ein Komma trennen. SKUs sind die Produkt-Kennzeichnungen.
<!-- Begin eTrusted-Widget-Tag -->

<etrusted-widget data-etrusted-widget-id="wdg-f6e1e50c-b07c-4a92-85fb-14b6feab9ea6" data-sku="0055573.001,0055573.002,0055573.005"></etrusted-widget>

<!-- Ende eTrusted-Widget-Tag -->

Die nun folgenden Schritte 6 und 7 sind optionale Schritte für das Widget „Bewertungsübersicht“. Springen Sie direkt zu Schritt 8, falls Sie ein anderes Widget einbinden.

  1. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Mit dem Widget „Bewertungsübersicht“ haben Sie die Möglichkeit, eine kleine Sterne-Vorschau an beliebiger Stelle auf der Produktseite einzubinden, die auf das Haupt-Widget verlinkt. Möchten Sie diese Möglichkeit nutzen? Dann auf das Dokumentensymbol im unteren Codefeld („Widget-Erweiterungen“) klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
    08_DE.png
  2. Innerhalb des HTMLs Ihrer Webseite den Body-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt einfügen, an der Sie die Sterne-Vorschau platzieren möchten.
  3. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Auf „Widget-Konfiguration abschließen“ klicken.
    09_DE.png

Damit haben Sie das Widget erfolgreich in Ihre Webseite eingebunden.

Zeigen Sie Ihre Sterne auch schon auf Google & Co.? Hier erfahren Sie mehr:
- Was ist die Google Integration?
- Warum ist es sinnvoll, die Note auf anderen Bewertungsplattformen zu optimieren?


War der Artikel hilfreich?

4 von 9 fanden dies hilfreich