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?
- Öffnen Sie Ihr Trusted Shops Plugin.
- Überprüfen Sie, ob Ihr Plugin über den Reiter „Widgets“ verfügt.
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.
- 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 Ihrer Kundschaft darüber bestimmen sollen, ob das Widget im Dark Mode angezeigt wird. - Möchten Sie eine andere Farbe für Ihre 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öchten Sie im Widget die Schriftart nutzen, die auch Ihre Webseite verwendet? Dann ein Häkchen bei „Schriftart Ihrer Website verwenden“ setzen.
- Konfigurieren Sie 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 Ihrer Kundschaft hochgeladene Produktfotos im Widget angezeigt werden sollen.
- Auf „Widget-Code erzeugen“ klicken. Die Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ öffnet sich.
- Über das Dropdown-Menü die von Ihnen verwendete Produkt-Kennzeichnung auswählen.
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 möchten den Widget-Code selbst in das HTML Ihrer Webseite einbinden? Dann folgen Sie diesen Schritten:
- Auf das Dokumentensymbol im oberen Codefeld („Initialisierung“) klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
- Innerhalb Ihres Webseiten-HTMLs den Head-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel in den Head-Abschnitt einfügen.
- 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.
- 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.
- 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.
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.
- 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.
- 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.
- Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Auf „Widget-Konfiguration abschließen“ klicken.
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?