Die Integration eines Produktbewertungs-Widgets funktioniert wie für jedes andere Widget. Allerdings gibt es einen großen Unterschied: Du musst mindestens eine Produkt-Kennzeichnung einfügen.
Du möchtest wissen, wie Widgets auf deiner Webseite aussehen? Finde 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 deine 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 kannst du. Bei Produkten mit verschiedenen Varianten musst du das sogar.
Wenn du beispielsweise T-Shirts in verschiedenen Größen verkaufst, musst du für jede Größe (bspw. S, M, L) eine Produkt-Kennzeichnung angeben. Diese gibst du nacheinander ein und trennst diese mit einem Komma voneinander ab.
Achte bitte darauf, dass du mindestens eine Produkt-Kennzeichnung auswählst. Wenn du keine auswählst, wird dein Widget nicht angezeigt.
Wie füge ich ein Produktbewertungs-Widget zu meiner Website hinzu?
Eine Frage vorab: Hast du deine Trusted Shops Produkte mithilfe eines Plugins in deine Webseite eingebunden? Mit vielen unserer Plugins kannst du auch die Widgets mit wenigen Klicks und ohne technische Vorkenntnisse einbinden. Überprüfe daher zunächst, ob dein Plugin die Einbindung der Widgets unterstützt:
- Öffne dein Trusted Shops Plugin.
- Überprüfe, ob dein Plugin über den Reiter „Widgets" verfügt.
Ist der Reiter „Widgets" in deinem Plugin vorhanden? Dann folge dieser Anleitung: Gesammelte Shop- und Produktbewertungen in deinem Shop anzeigen
Ist der Reiter „Widgets" in deinem Plugin nicht vorhanden? Dann mache mit dieser Anleitung weiter.
Schritt 1: Erzeugung des Widget-Codes
Alle verfügbaren Produktbewertungs-Widgets findest du in der Widget-Bibliothek.
- Ins eTrusted Kontrollzentrum einloggen.
- In der Hauptnavigation auf den Stern („Bewertungen") (
) klicken. Anschließend auf „Marketing" (
) klicken.
- Den Reiter „Widgets" (
) öffnen.
- Ein Produktbewertungs-Widget auswählen. Anschließend auf den zum Widget gehörenden Button „Erstellen" klicken. Der Konfigurationsmodus des Widgets öffnet sich.
- 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 deiner Kundschaft darüber bestimmen sollen, ob das Widget im Dark Mode angezeigt wird. - Möchtest du eine andere Farbe für deine Bewertungssterne und die Balken in der Bewertungsübersicht verwenden? Dann auf das Farbfeld „Akzentfarbe" klicken.
Ein Dropdown-Menü öffnet sich. Eine der vorgeschlagenen Farben auswählen ( - Möchtest du im Widget die Schriftart nutzen, die auch deine Webseite verwendet? Dann ein Häkchen bei „Schriftart Ihrer Website verwenden" setzen.
- Konfigurierst du gerade das Widget „Bewertungsübersicht"? Dann Rich Snippets aktivieren, falls gewünscht.
- 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. - Ein Häkchen bei „Bilder anzeigen" setzen, wenn von deiner Kundschaft hochgeladene Produktfotos im Widget angezeigt werden sollen.
- Auf „Widget-Code erzeugen" klicken. Die Übersicht „Wie du das Widget in deiner Webseite integrierst" öffnet sich.
- Über das Dropdown-Menü die von dir verwendete Produkt-Kennzeichnung auswählen.
Damit hast du den Widget-Code erfolgreich erzeugt. Nun muss der Widget-Code in deine Webseite integriert werden.
Schritt 2: Einbindung des Widget-Codes in deine Webseite
Um Produktbewertungs-Widgets auf deiner Webseite anzuzeigen, ist die Einbindung von HTML- und JavaScript-Code im Head und im Body deines Webseiten-HTMLs erforderlich. Die hierfür notwendigen Code-Schnipsel findest du in der Übersicht „Wie du das Widget in deiner Webseite integrierst", die sich nach der Erzeugung des Widget-Codes öffnet.
Du möchtest den Widget-Code selbst in das HTML deiner Webseite einbinden? Dann folge diesen Schritten:
- Auf das Dokumentensymbol im oberen Codefeld („Initialisierung") klicken, um den Code-Schnipsel in deinen Zwischenspeicher zu kopieren.
- Innerhalb deines Webseiten-HTMLs den Head-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel in den Head-Abschnitt einfügen.
- Zur Übersicht „Wie du das Widget in deiner Webseite integrierst" zurückkehren. Auf das Dokumentensymbol im mittleren Codefeld („Widget einbinden") klicken, um den Code-Schnipsel in deinen Zwischenspeicher zu kopieren.
- Innerhalb des HTMLs deiner Webseite den Body-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt einfügen, an der du das Widget platzieren möchtest.
- 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üge an der in Schritt 5 genannten Stelle mehrere Produkt-Kennzeichnungen ein. Trenne die einzelnen Produkt-Kennzeichnungen durch ein Komma.
Unten siehst du 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. Du kannst 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". Springe direkt zu Schritt 8, falls du ein anderes Widget einbindest.
- Zur Übersicht „Wie du das Widget in deiner Webseite integrierst" zurückkehren. Mit dem Widget „Bewertungsübersicht" hast du die Möglichkeit, eine kleine Sterne-Vorschau an beliebiger Stelle auf der Produktseite einzubinden, die auf das Haupt-Widget verlinkt. Möchtest du diese Möglichkeit nutzen? Dann klicke auf das Dokumentensymbol im unteren Codefeld („Widget-Erweiterungen"), um den Code-Schnipsel in deinen Zwischenspeicher zu kopieren.
- Innerhalb des HTMLs deiner Webseite den Body-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt einfügen, an der du die Sterne-Vorschau platzieren möchtest.
- Zur Übersicht „Wie du das Widget in deiner Webseite integrierst" zurückkehren. Auf „Widget-Konfiguration abschließen" klicken.
Damit hast du das Widget erfolgreich in deine Webseite eingebunden.
Zeigst du deine Sterne auch schon auf Google & Co.? Hier erfährst du mehr:
- Was ist die Google Integration?
- Warum ist es sinnvoll, die Note auf anderen Bewertungsplattformen zu optimieren?