Wie kann ich Produktbewertungen in meinem Shop anzeigen?

Produktbewertungen, die Sie über die eTrusted-Bewertungsplattform sammeln, können Sie natürlich auch in Ihrem Shop oder auf Ihrer Webseite anzeigen. Für Ihre Kundschaft entfalten Produktbewertungen erst ihren wahren Mehrwert, wenn sie gelesen werden können. Um Produktbewertungen und Bewertungssterne darzustellen, haben Sie verschiedene Möglichkeiten, die wir in diesem Artikel erläutern.

Produktbewertungen sind bald verfügbar
Es ist bald soweit. Derzeit läuft noch die Beta-Phase unserer neuen Produktbewertungen für die eTrusted Bewertungsplattform. Wir sammeln das Feedback unserer Testpersonen ein und arbeiten mit Hochdruck daran, Produktbewertungen für alle verfügbar zu machen. Wir bedanken uns für Ihre Geduld.

Produktbewertungssticker

Mit dem Produktbewertungssticker können Sie die einzelnen Produktbewertungen, die Ihre Kundschaft abgegeben hat, auf allen Produktdetailseiten anzeigen. Auf diese Weise können sich Ihre Kundinnen und Kunden noch intensiver mit Ihren Produkten auseinandersetzen und die für sich richtige Kaufentscheidung treffen.

So sieht der Produktbewertungssticker mit den Standardeinstellungen aus:

20160502_product-reviews_shop_de.png

Die Grundlage für den Produktbewertungssticker ist der folgende Code, den Sie an der Stelle auf Ihrer Produktdetailseite einbinden, wo Ihre Kundschaft Bewertungen lesen können soll:

<div id="productreviewsticker"></div>
<script type="text/javascript">
  _tsProductReviewsConfig = {
        tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        sku: ['ART-123'],
        variant: 'productreviews',
        /* optional */
        borderColor: '#0DBEDC',
        backgroundColor: '#ffffff',
        locale: 'de_DE',
        starColor: '#FFDC0F',
        commentBorderColor: '#dad9d5',
        commentHideArrow: 'false',
        starSize: '15px',
        ratingSummary: 'false',
        maxHeight: '1200px',
        hideEmptySticker: 'false',
        filter: 'true',
        element: '#productreviewsticker',
        introtext: 'Was unsere Kunden sagen:'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

Innerhalb des Codes können Sie einige Konfigurationen vornehmen, um den Produktbewertungssticker an die Gegebenheiten und das Corporate Design Ihres Shops anzupassen. Zu diesem Zweck erläutern wir Ihnen nun die einzelnen Parameter und deren Konfigurationsmöglichkeiten.

  • tsid: Geben Sie hier als Parameter die Trusted-Shops-ID Ihres Online-Shops ein.
  • sku: An dieser Stelle wird die Variable für die Stock Keeping Unit (SKU) des Produkts eingetragen. Nutzen Sie die in Ihrem Shopsystem verwendete Variable, wenn Sie den Code in das Template Ihrer Produktdetailseite einbinden. Dies sorgt dafür, dass die SKU dynamisch befüllt und somit auf jeder Produktdetailseite der passende Produktbewertungssticker ausgespielt wird. Es ist zudem möglich, Bewertungen für ein Produkt, das in verschiedenen Varianten wie z.B. Farbe oder Größe erhältlich ist, gesammelt anzuzeigen. Öffnen Sie hierfür die entsprechende Produktdetailseite und geben Sie dort die verschiedenen SKUs für den jeweiligen Artikel folgendermaßen im Code ein: ['produkt1sku','produkt2sku','produkt3sku']
  • variant: Der Wert 'productreviews' des variant-Parameters ist fix und darf nicht verändert werden.

Das Eintragen der Trusted Shops ID und der SKU-Variablen ist zwingend erforderlich, damit der Produktbewertungssticker seinen Zweck erfüllen kann. Die folgenden Parameter dienen hingegen dazu, das Design des Stickers nahtlos an Ihren Shop anzupassen. Das Ausfüllen dieser Felder ist daher empfehlenswert, aber für die Funktionalität optional.

  • borderColor: Der Produktbewertungssticker besitzt als Ganzes eine Umrandung. Diese ist standardmäßig auf Türkis eingestellt. Falls Sie eine andere Farbe wünschen, ersetzen Sie bitte den im Code vorhandenen Wert durch den Hexadezimalwert der von Ihnen gewünschten Farbe.
  • backgroundColor: Über diesen Parameter können Sie die Hintergrundfarbe des Stickers, die zwischen den einzelnen Kommentaren hindurch scheint, definieren. Sie ist standardmäßig auf Weiß eingestellt. Wenn Sie eine andere Farbe wünschen, tragen Sie den Hexadezimalwert der gewünschten Farbe ein.
  • locale: Durch diesen Parameter passen Sie die Sprache der funktionellen Inhalte an und legen das Datumsformat fest. Voreingestellt sind die deutsche Sprache und das in Deutschland übliche Format (z.B. 22.01.2021). Der Wert für locale muss folgendes Format haben: 'sprache_LAND'. Ein Beispiel: Der passende Wert für britisches Englisch wäre demnach 'en-GB' .
  • starColor: Dieser Parameter bestimmt, welche Farbe die Sterne in den Kommentaren haben. Standardmäßig sind sie gelb, doch auch an dieser Stelle können Sie die Farbe durch die Eingabe eines anderen Hexadezimalwerts verändern.
  • commentBorderColor: Jeder Kommentar besitzt eine Umrandung. Durch Anpassung dieses Parameters passen Sie die Farbe der Umrandung an. Standardmäßig sind die Kommentarumrandungen grau.
  • commentHideArrow: Standardmäßig wird jeder Kommentar innerhalb des Stickers wie eine Sprechblase dargestellt. Wenn Sie die Kommentare stattdessen lieber innerhalb eines einfachen Kastens darstellen möchten, stellen Sie als Wert für diesen Parameter true ein.
  • starSize: Über diesen Parameter wird die Größe der angezeigten Bewertungssterne definiert. Standardmäßig sind 15 px eingestellt. Bei Bedarf können Sie diesen Wert anpassen.
  • ratingSummary: Bei Anpassung dieses Parameters werden die Gesamtnote und die Sterne für das Produkt noch einmal unterhalb der Produktbezeichnung innerhalb des Stickers dargestellt. Diese Funktion ist standardmäßig deaktiviert. Tragen Sie als Wert für diesen Parameter true ein, um die Darstellung zu aktivieren.
  • maxHeight: Dieser Parameter ermöglicht es Ihnen, die Höhe des Produktbewertungsstickers flexibel einzustellen durch Eingabe einer beliebigen Höhe in Pixeln. Voreingestellt sind 1.200 px. Die Anzahl der dargestellten Bewertungen ändert sich durch eine Anpassung jedoch nicht. Sollte die Anzahl der Bewertungen mit der angegebenen Höhe des Stickers nicht kompatibel sein, erscheint eine Scrollbar.
  • hideEmptySticker: Dieser Parameter gibt Ihnen die Möglichkeit, den Produktbewertungssticker auszublenden, solange noch keine Bewertung für das jeweilige Produkt vorliegt. Stellen Sie dazu als Parameter den Wert true ein.
  • filter: Über diesen Parameter wird eine Möglichkeit in den Sticker eingebaut, angezeigte Bewertungen nach der Anzahl der vergebenen Sterne filtern zu können. Auf diese Weise kann sich Ihre Kundschaft beispielsweise ausschließlich Fünf-Sterne-Bewertungen anzeigen lassen. Diese Filtermöglichkeit ist standardmäßig aktiviert. Wenn Sie sie deaktivieren möchten, tragen Sie bitte false als Wert für diesen Parameter ein.
  • element: Dieser Parameter verbindet den JavaScript-Code mit dem in der ersten Codezeile definierten DIV-Element. Wenn Sie möchten, können Sie die Bezeichnung auch ändern. Denken Sie dabei aber daran, Ihre Bezeichnung sowohl im Parameter 'element' als auch im DIV-Container anzugeben. Im Parameter muss zudem das # vor dem Wert beibehalten werden.
  • introtext: Mithilfe dieses Parameters können Sie unterhalb der Produktbezeichnung innerhalb des Produktbewertungsstickers einen kurzen einleitenden Text einbinden. Voreingestellt ist „Was unsere Kunden sagen:“. Wenn Sie einen anderen oder keinen Text an dieser Stelle wünschen, ändern Sie den Text einfach ab oder löschen Sie ihn.

Nachdem Sie alle Anpassungen vorgenommen haben, kopieren Sie sowohl das DIV-Element als auch den vorbereiteten JavaScript-Code und fügen Sie beides direkt an der Stelle in der Template-Datei Ihrer Produktdetailseiten ein, an der der Produktbewertungssticker dargestellt werden soll, damit dieser auf jeder einzelnen Produktdetailseite angezeigt wird.

Produktbewertungssterne

Zusätzlich zum Produktbewertungssticker können Sie auch die Sterne der Gesamtbewertung auf der Produktdetailseite anzeigen. An prominenter Stelle platziert verschaffen die Bewertungssterne Ihren Kundinnen und Kunden auf den ersten Blick einen Eindruck über die Gesamtnote des angeklickten Produkts.

product-reviews_stars_de-DE_v2.png

Die Integration funktioniert ähnlich wie die des Produktbewertungsstickers. Wenn Sie die Produktbewertungssterne in Ihren Shop einbinden möchten, ist der folgende Code der Ausgangspunkt, den sie an der passenden Stelle auf der Produktdetailseite einbinden können:

<div id="reviewstars"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script>
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'sku': ['9990004'],
'element': '#reviewstars',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false'
}
);
</script>

Wie schon beim Produktbewertungssticker sind zwei der Parameter obligatorisch und müssen ausgefüllt werden.

  • tsId: Tragen Sie als Wert für diesen Parameter bitte die Trusted-Shops-ID Ihres Shops ein.
  • sku: An dieser Stelle wird die Variable für die Stock Keeping Unit (SKU) des Produkts eingetragen. Nutzen Sie die in Ihrem Shopsystem verwendete Variable, wenn Sie den Code in das Template Ihrer Produktdetailseite einbinden. Dies sorgt dafür, dass die SKU dynamisch befüllt und somit auf jeder Produktdetailseite die passenden Bewertungssterne ausgespielt werden. Es ist zudem möglich, Bewertungen für ein Produkt, das in verschiedenen Varianten wie z.B. Farbe oder Größe erhältlich ist, gesammelt anzuzeigen. Öffnen Sie hierfür die entsprechende Produktdetailseite und geben Sie dort die verschiedenen SKUs für den jeweiligen Artikel folgendermaßen im Code ein: ['produkt1sku','produkt2sku','produkt3sku']

Es gibt auch wieder einen Parameter „element“, der dem DIV-Element sagt, welcher JavaScript-Code der richtige ist:

  • element: Dieser Parameter verbindet den JavaScript-Code mit dem in der ersten Codezeile definierten DIV-Element. Wenn Sie möchten, können Sie die Bezeichnung auch ändern. Denken Sie dabei aber daran, Ihre Bezeichnung sowohl im Parameter 'element' als auch im DIV-Container anzugeben. Im Parameter muss zudem das # vor dem Wert beibehalten werden.

Neben den obligatorischen Parametern bietet der JavaScript-Code einige weitere optionale Konfigurationsmöglichkeiten, um die Produktbewertungssterne an Ihren Shop anzupassen.

  • starColor: Über diesen Parameter können Sie die Farbe der Bewertungssterne definieren. Standardmäßig ist gelb eingestellt. Wenn Sie diese Farbe verändern möchten, ersetzen Sie den im Code vorhandenen Hexadezimalwert durch denjenigen der von Ihnen gewünschten Farbe.
  • starSize: Dieser Parameter bestimmt die Größe der Bewertungssterne. Voreingestellt sind 14 px. Diesen Wert können Sie flexibel anpassen.
  • fontSize: Dieser Parameter bestimmt die Schriftgröße der nummerischen Angaben hinter den Bewertungssternen, die über die Anzahl der abgegebenen Bewertungen und die Gesamtnote Auskunft geben. Standardmäßig ist die Schriftgröße auf 12 px eingestellt.
  • showRating: Über diesen Parameter können Sie die standardmäßige Anzeige der Gesamtnote hinter den Bewertungssternen deaktivieren. Tragen Sie als Wert für diesen Parameter false ein, wenn Sie die Gesamtnote nicht anzeigen möchten.
  • scrollToReviews: Dieser Parameter ermöglicht es Ihnen, einen Anker-Link zum Produktbewertungssticker zu setzen. Kundinnen und Kunden, die die Sterne bei aktiviertem Parameter anklicken, werden dadurch automatisch zum Produktbewertungssticker auf der gleichen Seite geleitet. Diese Funktion ist standardmäßig deaktiviert. Wenn Sie sie aktivieren möchten, ändern Sie den Wert des Parameters zu true.
  • enablePlaceholder: Mithilfe dieses Parameters können Sie in Ihrem Shop ausgegraute Sterne als Platzhalter anzeigen lassen, falls noch keine Bewertungen für das Produkt eingegangen sind. Diese Funktion ist standardmäßig ausgeschaltet und kann durch Änderung des Werts auf true aktiviert werden.

Sobald Sie den JavaScript-Code entsprechend Ihrer Wünsche vorbereitet haben, können Sie die Produktbewertungssterne auf Ihren Produktdetailseiten platzieren. Kopieren Sie hierfür den vorbereiteten Code einschließlich des DIV-Elements und gehen Sie in die Template-Datei Ihrer Produktdetailseiten. Fügen Sie den Code dort an jener Stelle ein, an der die Produktbewertungssterne erscheinen sollen. Wir empfehlen Ihnen, die Bewertungssterne unterhalb des Produkttitels einzubauen, wie oben in der Illustration zu sehen.

Damit haben Sie Produktbewertungssticker und die Produktbewertungssterne erfolgreich in Ihre Produktdetailseite eingebunden.


War der Artikel hilfreich?

0 von 0 fanden dies hilfreich