Damit Ihre Webseite mit der Bazaarvoice-Anwendung kommunizieren und benutzergenerierte Inhalte (UGC) für die Anzeige abrufen kann, müssen Sie den Bazaarvoice-Code zu Ihrer Webseite hinzufügen.

Dieses Thema beschreibt die Schritte, die Ihr technisches Team durchführen sollte:

  • Integrieren Sie Bazaarvoice UGC in Ihre Produktdetailseiten
  • Integrieren Sie schema.org-Markup (SEO) in Ihre Produktdetailseiten
DetaillierterSchnellstartFertige Aufgaben überprüfen

Code zu Produktdetailseiten hinzufügen

Zum Anzeigen von Inhalten aus Ratings & Reviews oder Questions & Answers auf Produktdetailseiten müssen Sie den Bazaarvoice-Code in den HTML-Code der Seite einbinden. Die Inhalte, die Bazaarvoice Ihrer Seite zuführt, nutzen die JavaScript-Indexierungsfähigkeiten von Google.

Achtung: Die nachfolgenden Anweisungen treffen nicht auf den BV-Lader (bv.js) zu. Befolgen Sie diese Anweisungen, wenn Ihre Implementierung die Scout-Datei verwendet (bvapi.js). Wenn Ihre Implementierung bv.js verwendet, lesen Sie bitte die Dokumentation zur Anzeigenintegration.

Mit folgenden Schritten integrieren Sie den erforderlichen Bazaarvoice-Code.

Schritt 1: Fügen Sie die JavaScript API hinzu

Zur Integration der JavaScript-API führen Sie folgende Schritte auf jeder Seite durch, die Bazaarvoice-Inhalte anzeigt:

  1. Fügen Sie den entsprechenden JavaScript-Code im <head>-Tag hinzu.

    • Benutzen Sie den folgenden Code für die Staging-Umgebung (Die Staging-Umgebung dient zum Testen und Entwickeln und ist normalerweise nur intern sichtbar. Stellen Sie sicher, dass in der Domain jeder im Code angegebenen Bazaarvoice-URL „/bvstaging“ vorkommt.

      <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>

    • Benutzen Sie den folgenden Code für die Produktionsumgebung (Die Produktionsumgebung ist extern sichtbar. Inhalte in der Produktionsumgebung sind auf Ihrer Webseite sichtbar).

      <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
  2. Ersetzen Sie <client_name> durch den Wert, der vom Bazaarvoice Implementation Team bereitgestellt wird (Groß- und Kleinschreibung beachten).
  3. Ersetzen Sie <site_ID> durch die ID der Implementierungszone, die Sie verwenden wollen. Die Implementierungszone wird im Bazaarvoice-Konfigurations-Hub innerhalb der Bazaarvoice-Workbench eingestellt. Die Standardimplementierungszone ist „main_site“. Vergewissern Sie sich bei Ihrem Bazaarvoice-Ansprechpartner, dass der Name korrekt ist, oder loggen Sie sich im Konfigurations-Hub ein, um die ID zu prüfen.
  4. Ersetzen Sie <locale>, wenn die Seite kein US-Englisch verwendet

Beachten Sie, dass bvapi.js nicht asynchron geladen werden kann. Diese Datei hat jedoch unter den meisten Umständen keinen merkbaren Einfluss auf die Performance, und alle sonstigen Ressourcen werden asynchron geladen.

2. Schritt: Fügen Sie den Bazaarvoice-Konfigurationsaufruf hinzu.

Führen Sie folgende Schritte aus, um die Bazaarvoice-Konfigurationsdatei aufzurufen:

  1. Fügen Sie folgenden JavaScript-Code in den <head>-Tag nach dem Aufruf für bvapi.js und vor jeglichen $BV.ui-Elementen ein.
    <script type="text/javascript"> 
	$BV.configure('global', { productId : 'ProductID123' });
</script>
  2. Ersetzen Sie ProductID123 mit der entsprechenden Produkt-ID. Produkt-IDs berücksichtigen Groß- und Kleinschreibung. Vermeiden Sie Fehler und stellen Sie sicher, dass die Produkt-ID exakt mit der entsprechenden ExternalId in Ihrem Produktkatalog übereinstimmt.

Schritt 3: Platzieren Sie den Übersichts-Container

Einfügen des Übersichts-Containers (Der Übersichts-Container zeigt eine Zusammenfassung der Ratings & Reviews bzw. Questions & Answers auf der Produktdetailseite an. Bazaarvoice speist die neuesten Daten in den <div id="BVRRSummaryContainer"> ein, dessen Erscheinungsbild den von Ihnen im Konfigurations-Hub festgelegten Inhaltsanzeigeeinstellungen entspricht). An dieser Stelle sollte die Übersicht von Ratings & Reviews oder Questions & Answers erscheinen. Jede Produktseite muss folgenden Übersichts-Container-Code enthalten:

<div id="BVRRSummaryContainer"></div>
Hinweis: Dieser Code sollte nur einmal auf der Seite verwendet werden, selbst wenn Sie sowohl Ratings & Reviews als auch Questions & Answers implementieren. Fügen Sie diesen Code relativ weit oben auf Ihrer Produktseite und in der Nähe des Produktnamens oder -bildes ein, wie im folgenden Bild zu sehen.

Schritt 4: Fügen Sie den Ratings & Reviews-Code hinzu

Fügen Sie den nachfolgenden Code unter der Produktbeschreibung ein, um den Inhalt aus Ratings & Reviews anzuzeigen.

Hinweis: Wenn diese Inhalte hinter einem Tab oder anderen unter bestimmten Umständen sichtbaren Elementen der Benutzeroberfläche erscheinen, kann Bazaarvoice die betreffenden Inhalte nur dann sichtbar machen, wenn Sie den entsprechenden Code zur Verfügung stellen, anhand dessen er sichtbar gemacht werden kann. Wie im folgenden Pseudo-Code dargestellt, müssen Sie den Code doShowContent hinzufügen, damit der Inhalt angezeigt werden kann.
<div id="BVRRContainer"></div>
<script type="text/javascript">
   $BV.ui( 'rr', 'show_reviews', {
      doShowContent : function () { 
         // Wenn der Container nicht sichtbar ist (wie etwa hinter einem Tab), fügen Sie hier den Code ein, der ihn sichtbar macht 
         //(open the tab).
      }
   });
</script>

Schritt 5: Fügen Sie den Questions & Answers-Code hinzu

Fügen Sie den nachfolgenden Code unter der Produktbeschreibung ein, um den Inhalt aus Questions & Answers anzuzeigen.

Hinweis: Wenn diese Inhalte hinter einem Tab oder anderen unter bestimmten Umständen sichtbaren Elementen der Benutzeroberfläche erscheinen, kann Bazaarvoice die betreffenden Inhalte nur dann sichtbar machen, wenn Sie den entsprechenden Code zur Verfügung stellen, anhand dessen er sichtbar gemacht werden kann. Wie im folgenden Pseudo-Code dargestellt, müssen Sie den Code doShowContent hinzufügen, damit der Inhalt angezeigt werden kann.
<div id="BVQAContainer"></div>
<script type="text/javascript">
   $BV.ui( 'qa', 'show_questions', {
      doShowContent : function () { 
         // Wenn der Container nicht sichtbar ist (wie etwa hinter einem Tab), fügen Sie hier den Code ein, der ihn sichtbar macht 
 //(open the tab).
      }
   });
</script>

Warum sollten Sie schema.org-Markup hinzufügen?

Wenn Sie schema.org zu Ihrer Produktseite hinzufügen, können wichtige Suchmaschinen Ihre Bewertungen durchsuchen und indexieren. Außerdem ermöglicht es Suchmaschinen, nützliche Informationen (wie Sternebewertungen von Produkten und Bewertungs-Snippets) in den Suchergebnissen zu extrahieren und anzuzeigen.

Damit haben Sie ein gewinnbringendes Werkzeug in der Hand. Denn bedenken Sie, dass 95 % der Verbraucher Bewertungen lesen, bevor sie einen Kauf abschließen.

Sie müssen schema.org jeder Produktdetailseite (Product Display Page, PDP) hinzufügen.

Hinweis: Google extrahiert Rich-Snippet-Daten von strukturiertem Markup (wie schema.org ) auf Ihrer Webseite und zeigt diese an.

Beispiel für ein Rich Snippet:

Beispiel für Rich Snippet

Rich Snippets werden auch als Rich Results bezeichnet. Dies bezieht sich auf nützliche Informationen wie Sternebewertungen von Produkten und Bewertungs-Snippets.

Schema.org-Formate (JSON-LD vs. Mikrodaten)

Google hat offiziell bekannt gegeben, dass JSON-LD sein bevorzugtes Format für strukturierte Daten ist. JSON-LD ist weniger komplex und einfacher zu implementieren als Markup im Mikrodatenformat, denn:

  • Sie können Ihr gesamtes JSON-LD-Markup in einen Standalone-Block in JavaScript-Code einfügen, der in einen Header-Abschnitt Ihrer HTML-Seite integriert wird.
  • Mikrodaten-Markup muss in Inline-HTML-Elemente eingebettet werden.

Bazaarvoice unterstützt strukturierte Daten in beiden Formaten:

  • JSON-LD: Informationen zum Hinzufügen von JSON-LD-Markup finden Sie unter schema.org JSON-LD-Markup.
  • Mikrodaten: Das serverseitige BVSEO SDK unterstützt nur Markup im Mikrodatenformat
Format Beschreibung und Platzierung
JSON-LD (Empfohlen) JSON-LD ist die Abkürzung für JavaScript Object Notation for Linked Data. Es handelt sich um ein leichtgewichtiges Datenaustauschformat, das für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen und zu generieren ist. Anstatt einzelne Elemente auf einer Seite mit schema.org-Attributen zu ergänzen (Mikrodaten-Format), kann man mit JSON-LD Rich Snippets markieren, um sie anschließend in einem Standalone-Block in JavaScript-Code darzustellen. Mit JSON-LD strukturierte Daten können so einfach hinzugefügt, aktualisiert oder entfernt werden.
Hinweis: Ihren mit JSON-LD strukturierten Code sollten Sie in einem <script>-Tag im Head-Abschnitt Ihrer HTML-Seite einbetten.
Mikrodaten Mikrodaten verwendet HTML-Tag-Attribute, um die Inhalte, die Sie als strukturierte Daten darstellen möchten, auszuweisen. Mit Mikrodaten strukturierte Daten übermitteln dieselben Informationen wie auch JSON-LD. Das Mikrodaten-Format kann allerdings etwas unübersichtlich sein, da strukturierte Daten inline in den HTML-Inhalten eingefügt werden.
Hinweis: Markup im Mikrodatenformat wird in <div>-Tags eingebettet und normalerweise inline zu den Elementen im Document Object Model (DOM) Ihrer Seite platziert.
Hinweis: Dieses Thema beschreibt, wie Sie strukturiertes schema.org Mikrodaten-Markup zu Ihren Produktdetailseiten hinzufügen. Das serverseitige BVSEO SDK unterstützt nur Markup im Mikrodatenformat. Das JSON-LD-Format wird in unseren veralteten PRR-Produkten (Product Ratings & Reviews) ebenfalls nicht unterstützt.

Mikrodaten-schema.org-Markup hinzufügen

Befolgen Sie nachfolgende Schritte zum Hinzufügen des strukturierten schema.org-Mikrodaten-Markups zu einer Produktdetailseite.

  1. Fügen Sie den folgenden schema.org-Typ Ihrem PDP-Code hinzu: 
    <div itemscope itemtype="http://schema.org/Product">
    Hinweis: Seiten dürfen nur einen einzigen schema.org-Typ enthalten.
  2. Taggen Sie Ihren Produktnamen mit dem Schema.org-Markup. Benutzen Sie einen der folgenden Zeilencodes, wobei Sie ProductName durch den in Ihrem Produkt-Feed verwendeten Produktnamen ersetzen. 
    <!-- Fügen Sie die schema.org -Produktklasse zum h1-Tag-->
	<h1 itemprop="name">ProductName</h1> hinzu 
<!-- Oder fügen Sie die Klasse in die Meta-Tags--> 	
	<meta itemprop="name" content="ProductName"> ein

  3. Der div muss sowohl den BVRRSummaryContainer als auch den BVRRContainer enthalten, wie im folgenden Beispielcode gezeigt. Wenn Sie Questions & Answers implementiert haben, vergessen Sie nicht, auch den BVQAContainer hinzuzufügen.

    • Die id weist den Lader an, die Bewertungsübersicht anzuzeigen, und die product-id im Konfigurationsaufruf weist den Lader an, die Funktion für eine bestimmte Produkt-ID anzuzeigen, die mit der ExternalId im Produktkatalog übereinstimmen muss.
    • Die id weist den Lader an, Bewertungen anzuzeigen, und die product-id im Konfigurationsaufruf weist den Lader an, die Funktion für eine bestimmte Produkt-ID anzuzeigen, die mit der ExternalId im Produktkatalog übereinstimmen muss.
    • Die id weist den Lader an, Questions & Answers anzuzeigen, und die product-id im Konfigurationsaufruf weist den Lader an, die Funktion für eine bestimmte Produkt-ID anzuzeigen, die mit der ExternalId im Produktkatalog übereinstimmen muss.
    4. Hinweis: Stellen Sie sicher, dass jeder Produktname mit dem Produktnamen identisch oder ihm zumindest sehr ähnlich ist, der in Ihr Produkt-Feed aufgenommen wird. Google verlangt im Rahmen des Schema-Markups von den verwendeten Produktnamen ein hohes Maß an Ähnlichkeit.

In diesem Beispiel wird dargestellt, wie Ihre mit Mikrodaten strukturierten Daten aussehen sollten. Weitere Informationen zum strukturierten Datenformat JSON-LD finden Sie im Thema JSON-LD-schema.org-Markup hinzufügen.

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; in <client_name>, <site_ID> und <locale> ersetzen und /bvstaging FÜR PRODUKTION entfernen --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice-Konfigurationsaufruf --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Entsprechende ExternalId aus Produkt-Feed benutzen }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--Der Produktname muss mit itemprop=Namensattribut identifiziert werden--> <!-- Der Übersichts-Container kommt unterhalb der Seitenfaltung in die Nähe des Produktnamens oder Produktbilds --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews-Container kommt unter die Produktbeschreibung --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> </div> </body> </html>
Hinweis: Sie sind selbst dafür verantwortlich, das schema.org-Markup auf allen Produktdetailseiten zu validieren.

Schema.org-Markups validieren

Bazaarvoice empfiehlt die Nutzung des Testtools für Rich-Suchergebnisse , um Ihr Markup zu validieren und Fehler aufzuspüren.

Hinweis: Die folgenden Schritte beziehen sich auf die Verwendung des Testtools für Rich-Suchergebnisse und gelten unabhängig davon, ob Sie JSON-LD oder das Mikrodaten-Markup-Format validieren.

So testen Sie Ihre schema.org-Markup-Integration:

Diese Validierungsschritte setzen voraus, dass Sie Chrome, Safari oder Firefox verwenden.

  1. Gehen Sie zu Ihrer Produktdetailseite (PDP), um sich zu vergewissern, dass die Container „Übersicht“ und „Reviews“ beide auf der Seite angezeigt werden.
  2. Kopieren Sie den HTML-Code Ihrer Produktseite von Ihrem Browser und reichen Sie ihn als Code-Snippet in einem der empfohlenen Testtools für strukturierte Daten ein. Verwenden Sie den Elements Inspector aus den Entwicklertools Ihres Browsers.
    1. Um den Elements Inspector zu öffnen, klicken Sie mit der rechten Maustaste auf eine Produktdetailseite, um das Kontextmenü zu öffnen. Wählen Sie Untersuchen aus, um die Entwicklertools zu öffnen.
      Hinweis: Diese Test-Tools benötigen den aktiven HTML im Browser. Vielleicht verwenden Sie zur Untersuchung Ansicht > Entwickler > Ansicht Quelle (oder cmd + opt + U auf OS X), aber diesen zeigen nur den HTML-Code, der vom Server ausgegeben wurde. Durch die Verwendung von Inspect erhalten Sie Zugriff auf das Markup, das Ratings & Reviews dynamisch einspeist.
    2. Suchen Sie im Tab Elements bzw. Inspector im Entwicklertool nach dem schema.org-< html code... >-Element. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Copy > Copy Outer HTML. Achten Sie darauf, das gesamte DOM zu kopieren, um gültige Ergebnisse zu erhalten.
      3. Beispiel für Rich Snippet
  3. Öffnen Sie das Testtool für Rich-Suchergebnisse in einem neuen Tab.
  4. Wählen Sie den Tab CODE und fügen Sie den HTML-Code ein, den Sie mit dem Entwicklertool Inspect kopiert haben. Das Testtool für Rich-Suchergebnisse zeigt Ihnen anschließend, wie es die gefundenen strukturierten Daten interpretiert.
  5. Überprüfen Sie das schema.org-Markup, um Folgendes sicherzustellen:
    • Das Produkt ist ein Top-Level-Element.
    • Die Bewertungen sind richtig in Product eingebettet.
  6. Das Testtool für Rich-Suchergebnisse ermittelt FEHLER und/oder WARNUNGEN. Das Mikrodaten-Markup sollte weder Fehler noch Warnungen auslösen.
    • Falls das Tool Fehler findet, wählen Sie den Fehlerbericht aus, um die Quelle des problematischen Codes zu ermitteln.
    • Überprüfen Sie die Warnungen und bestätigen Sie, dass sie von Ihrem bestehenden Code ausgelöst wurden. Bazaarvoice bietet keinen Support für Mikrodaten-Markup, das in keinem Zusammenhang mit dem Bazaarvoice-Code steht.

Warum sollte man zu JSON-LD wechseln?

Hinweis: Bazaarvoice empfiehlt seinen bestehenden Kunden (die mit Mikrodaten formatierte Markups verwenden), nach JSON-LD-Markup zu migrieren, um Inhalte zukunftssicher zu machen. Dies gilt jedoch nicht, wenn Sie das serverseitige BVSEO SDK verwenden, da BVSEO nur Markup im Mikrodatenformat unterstützt.

Google hat offiziell bekannt gegeben, dass JSON-LD sein bevorzugtes Format für strukturierte Daten ist. Falls Ihre benutzergenerierten Inhalte nicht in dem von Google bevorzugten Format bereitgestellt werden, sinken auch die Chancen, dass Ihre Webseite Käufern weit oben in den Suchergebnissen angezeigt wird. Sie lassen sich also eventuell die Gelegenheit entgehen, neue Kunden organisch zu gewinnen.

Vom Mikrodaten- zum JSON-LD-Format migrieren

Beim Wechsel vom strukturierten Datenformat „Mikrodaten“:

  1. Entfernen Sie alle bisher bestehenden Mikrodaten-Markups von Ihrer HTML-Seite.
  2. Weitere Anweisungen finden Sie unter JSON-LD-schema.org-Markup hinzufügen.
Hinweis: JSON-LD ist standardmäßig für neue Ratings & Reviews-Kunden aktiviert.

Beispiel für vollständigen Code

Das folgende Beispiel enthält den Großteil des Codes, den Sie zu jeder PDP hinzufügen müssen. Nutzen Sie diesen Code ausschließlich als Referenz. Sie sollten diesen Code nicht einfach kopieren und einfügen, ohne vorher die spezifischen Daten Ihrer Firma eingetragen zu haben. Sie müssen diesen Code so bearbeiten, dass Ihre Implementierung unterstützt wird, und jedes Code-Snippet an der entsprechenden Stelle im HTML-Code jeder Seite platzieren.

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; in <client_name>, <site_ID> und <locale> ersetzen und /bvstaging FÜR PRODUKTION entfernen --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice-Konfigurationsaufruf --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Entsprechende ExternalId aus Produkt-Feed benutzen }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--Der Produktname muss mit itemprop=Namensattribut identifiziert werden--> <!-- Der Übersichts-Container kommt unterhalb der Seitenfaltung in die Nähe des Produktnamens oder Produktbilds --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews-Container kommt unter die Produktbeschreibung --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> </div> </body> </html>

Bewertungs- oder Frageanzahl zu Produktdetailseiten hinzufügen

Sie können Code hinzufügen, um eine Produktdetailseite hinsichtlich der Anzahl der Produktbewertungen oder Verbraucherfragen benutzerdefiniert zu gestalten. Ihr Code ruft die $BV.ui dazu auf, die gesamte Produktbewertungs- oder Frageanzahl auszugeben, und führt dann eine Aktion anhand dieses Wertes aus.

Nutzen Sie den folgenden Beispielcode, um die Anzahl der Bewertungen anzuzeigen:

var rrPromise = $BV.ui('rr', 'show_reviews');
rrPromise.then(function (data) { 
  // Do something meaningful with the data
});

Nutzen Sie den folgenden Beispielcode, um die Anzahl der Fragen anzuzeigen:

var qaPromise = $BV.ui('qa', 'show_questions');
qaPromise.then(function (data) { 
  // Do something meaningful with the data
});

Das Argument data ist ein Objekt mit folgenden Eigenschaften:

  • Id: die Produktkennung
  • TotalReviewCount: die Gesamtanzahl der Bewertungen für Id
  • TotalQuestionCount: die Gesamtanzahl der Fragen für Id
  • TotalAnswerCount: die Gesamtanzahl der Antworten für Id
  • TotalContentCount: die Summe aus TotalReviewCount, TotalQuestionCount und TotalAnswerCount für Id

Integration von Event Callbacks

Ihre Website kann mit Event Callbacks von JavaScript auf Ereignisse in der Bazaarvoice-Anwendung reagieren, etwa wenn ein Verbraucher ein Eingabeformular für eine Bewertung öffnet. Die Bazaarvoice-Anwendung zeigt einen Satz von JavaScript-Ereignissen, die Sie für Reaktionen auf bstimmte Ereignisse verwenden können. Wenn ein Verbraucher das Ereignis auslöst, führt der Bazaarvoice-Code die Callback-Funktion aus, die Sie diesem Ereignis zugewiesen haben, indem ein Objekt mit Daten zu dem Ereignis weitergegeben wird.

Sie können Event Callbacks von JavaScript verwenden, um die Interaktionen von Kunden mit der Bazaarvoice-Anwendung aufzuzeichnen und auf sie zu reagieren. So können Sie zum Beispiel Folgendes:

  • Zeichnen Sie auf, wenn ein Verbraucher auf einer Seite landet, welche die Bazaarvoice-Anwendung wiedergibt.
  • Zeichnen Sie Informationen über einen Verbraucher auf, zum Beispiel Name, Telefonnummer und E-Mail-Adresse.
  • Messen der Auswirkungen bestimmter Ereignisse auf die entscheidenden Conversions-Metriken wie zum Beispiel die Häufigkeit, mit der ein Verbraucher das Übermittlungsformular für Bewertungen öffnet, ohne es abzuschicken.
  • Das Anzeigen von Inhalten in Reaktion auf eine Interaktion des Verbrauchers mit der Bazaarvoice-Anwendung wie zum Beispiel die Anzeige eines Coupons, nachdem der Verbraucher eine Bewertung abgeschlossen hat.

Halten Sie sich an die folgenden Schritte zur Integration von Event Callbacks von JavaScript:

  1. Wählen Sie ein Ereignis aus, das Sie überwachen wollen.

    Wenn Sie ein Callback für ein Ereignis auswählen, führt es die Callback-Funktion aus, wenn das Ereignis eintritt. Sie können ein Callback für folgende Ereignisse festlegen:

    • bvRender – wird ausgelöst, wenn die Anwendung erstmals auf einer Website wiedergegeben wird.
    • submissionLoad – Wird ausgelöst, wenn ein Verbraucher ein Eingabeformular für Aktivitäten wie um Beispiel das Schreiben einer Bewertung, das Hinterlassen eines Kommentars oder die Beantwortung einer Frage öffnet.
    • submissionClose – wird ausgelöst, wenn ein Verbraucher ein Eingabeformular schließt, ohne es ausgefüllt zu haben.
    • submissionSubmitted – Wird ausgelöst, wenn ein Verbraucher ein Eingabeformular absendet.

    Wenn Sie eine Callback-Funktion für eines dieser Ereignisse festlegen, kann diese Funktion als einzigen Parameter ein Objekt empfangen. Dieses Objekt enthält Informationen zu dem Ereignis. Sie können aus den folgenden Objekteigenschaften auswählen:

    • Id – Produkt-ID
    • TotalAnswerCount – Anzahl der Antworten für das Produkt
    • TotalQuestionCount – Anzahl der Fragen für das Produkt
    • TotalReviewCount – Anzahl der Bewertungen für das Produkt
    • TotalContentCount – Gesamtanzahl von Inhalts-Elementen für das Produkt, falls zutreffend

    Zusätzlich zu den oben genannten Eigenschaften erhalten die Ereignisse submissionLoad, submissionClose und submissionSubmitted ein Objekt mit einer Eigenschaft des Typs contentType, welche den Typ von Inhalt angibt, welche der Einsendung zugeordnet wird.Zu den möglichen Typ-Werten gehörenBewertung, Kommentar, Frage undAntwort.

  2. Fügen Sie eine Callback-Funktion zur globalen Konfiguration $BV.configure hinzu.

    Finden Sie den Aufruf $BV.configure in Ihrem Code und fügen Sie das Event-Callback mit dem JavaScript-Code hinzu, der auf das Ereignis hin ausgeführt werden soll.

    Der folgende Code weist die Callback-Funktion einem Event aus bvRender zu.

    <script>
$BV.configure('global', {
  events : {
    bvRender : function (data) {
      // JavaScript code that executes when the Bazaarvoice application renders.
    }
  }
});
</script>

Einrichtung einer Content Security Policy

Wenn Sie vorhaben, eine Content Security Policy (CSP) auf Ihrer Website einzurichten, empfiehlt Bazaarvoice die Verwendung des HTTP-Modus „Content-Security-Policy-Report-Only“, der via bvapi.js implementiert wird. Bazaarvoice empfiehlt außerdem, Nonce-Attribute im Rahmen einer strengen CPS-Richtlinie einzusetzen.

In diesem Dokument erhalten Sie weitere Informationen zu den Vorteilen von CSP.

CSP Level 2 und Level 3 (unter Verwendung eines Nonce-Attributs)

Hinweis: CSP Level 3 wird nicht von allen Browsern unterstützt.

Die folgenden Schritte gelten für CSP-Methoden, die Meta-Tags oder einen HTTP-Response-Header einsetzen:

  1. Platzieren Sie das nonce-∗-Attribut in den Skripten mit bvapi.js, $BV.configure und $BV.UI.
  2. Bei Verwendung der Video-Uploadfunktion müssen Sie den Zugriff über die folgenden Domains auf frame-src und image-src erlauben: ∗ youtube.com ∗ bazaarvoice.com

CSP Level 1 (kein Nonce-Attribut)

Folgen Sie diesen Einrichtungsschritten:

  1. Erlauben Sie im default-src-Verzeichnis Ihres CSP Zugriff auf die folgenden Domains:
    • ∗.bazaarvoice.com
    • uk.cdn-net.com
    • six.cdn-net.com
    • mpsnare.iesnare.com
  2. Stellen Sie sicher, dass das font-src-Verzeichnis den data:-Wert für data-URI aufweist, mit dem Bazaarvoice benutzerdefinierte Schriftarten lädt.
  3. Bei Verwendung der Video-Uploadfunktion müssen Sie den Zugriff über die folgenden Domains auf frame-src und image-src erlauben: ∗ youtube.com ∗ bazaarvoice.com
  4. Legen Sie $BV.configure und $BV.ui in separaten Dateien ab. ($BV.ui-Parameter wie productID können dem globalen Namespace entnommen werden.)

Wenden Sie sich an Bazaarvoice Support , wenn Sie weitere Fragen zu CSP in Ihrer Bazaarvoice-Integration haben.

Performance und Ladezeit

Bazaarvoice-Inhalte sollten Ihre Webseite nicht verlangsamen, da ein Großteil der Bazaarvoice-Dateien nicht blockierend oder asynchron sind. Die Scout-Datei (bvapi.js) ist der einzige synchrone Bazaarvoice-Code auf Ihrer Seite. Sie wird gleichzeitig mit dem restlichen Inhalt auf der Seite geladen. Der Ort der Scout-Datei und des $BV.ui-Aufrufs haben Auswirkung auf den asynchronen Inhalt, da der Inhalt nicht geladen wird, bevor die Scout-Datei geladen wurde.

Führen Sie die folgenden Schritte durch, um die Ladezeit zu optimieren:

  1. Platzieren Sie die Scout-Datei (bvapi.js) innerhalb des <head>-Tags auf der Seite so hoch wie möglich, idealerweise direkt nach den Kernkomponenten.
  2. Platzieren Sie den $BV.ui-Aufruf im <body>-Tag so hoch wie möglich.
  3. Führen Sie Geschwindigkeitstests auf Ihrer Webseite durch, um sicherzustellen, dass Ihre Bazaarvoice-Inhalte so effizient wie möglich geladen werden.

Durchführung eines Geschwindigkeitstests

Führen Sie mit WebPagetest die folgenden Performance-Tests durch, um zu analysieren, wie sich Bazaarvoice in Ihre Webseite integriert. Führen Sie jeden Test in einem neuen Tab durch, um die Tests nebeneinander ansehen zu können. Sie können beliebige Konfigurationseinstellungen verwenden, solange diese für alles Tests konsistent sind. Vergleichen Sie nach dem Testen die Ergebnisse, um leichter feststellen zu können, was der Grund für die Verlangsamung Ihrer Webseite sein könnte.

  1. Testen Sie Bazaarvoice isoliert. Bazaarvoice stellt eine gehostete Container-Seite bereit, auf der Sie Ihre konfigurierte Ratings & Reviews-Implementierung laden können. Fügen Sie die folgende URL in das Feld Eine Webseite-URL eingeben auf der WebPagetest-Startseite ein und ersetzen Sie folgende Variablen mit Ihren Werten.
    http://display.ugc.bazaarvoice.com/common/util/clientTestPage.html?client=<client_name>&site=<site_name>&locale=<locale>&productId=<product_ID>

    wobei

    • <client_name> – der Kundenname, mit dem Sie sich in der Workbench anmelden. Beachten Sie bei dem Wert die Groß- und Kleinschreibung.
    • <site_name> – die Implementierungszone. Main Site (Hauptseite) beispielsweise würde main_site geschrieben. Sie finden den Seitennamen auch unter Seiten-ID in der Implementierungszone im Konfigurations-Hub.
    • <locale> – die von der Implementierung verwendete Sprachregion. (zum Beispiel de_DE für Deutsch). Beachten Sie hierbei die Groß- und Kleinschreibung.
    • <product_ID> – die im Produktfeed aufgeführte Produkt-ID (External ID) für das Produkt, dessen Bazaarvoice-Inhalte Sie im Test verwenden möchten.
  2. Testen Sie Ihre gehostete Produktseite mit implementierten Bewertungen & Bewertungen, indem Sie die URL der Seite in das Feld Eine Webseite URL eingeben eingeben. Wählen Sie eine Produktseite, die beständig dieselben Inhalte lädt, um möglichst genaue Testergebnisse zu erzielen.
  3. Testen Sie Ihre gehostete Produktseite mit blockierten Ratings & Reviews. Erweitern Sie die Optionen auf der Startseite „WebPagetest“ mit Erweiterte Einstellungen. Geben Sie auf der Registerkarte Blockieren bvapi in das Feld Anfragen blockieren, die enthalten ein. Starten Sie den Test mit derselben URL aus Schritt 2. Durch Blockieren der Anfrage für bvapi.js werden weitere Anfragen an Bazaarvoice verhindert und Sie erhalten die Ladezeit Ihrer Seite ohne Bazaarvoice-Inhalte.

Hinweis:Testergebnisse können sich selbst in einer konsistenten Testumgebung aufgrund von Rechner- und Netzwerkschwankungen erheblich ändern.

Überprüfung des Geschwindigkeitstests

Die wichtigsten Kennzahlen zur Überprüfung finden Sie auf den Registerkarten WebPagetest Übersicht und Details. Die Namen der Container können sich etwas unterscheiden, je nachdem welche Bazaarvoice-Anwendungen Sie auf der von Ihnen getesteten Seite laden. Für die folgenden Überprüfungsschritte basieren die wichtigsten Kennzahlen auf einer Seite, die Ratings & Reviews hostet.

Hinweis: Diese Kennzahlen können eventuell von denen in Ihrem Test abweichen.

Ratings & Reviews isoliert überprüfen

Gehen Sie zur Registerkarte Details und ziehen Sie den Wert scoutStart vom Wert reviewContentList1-render-end ab, um die Renderzeit aus dem ersten Test zu erhalten. Das Ergebnis ist die benötigte Zeit zur Initialisierung der Scout-Datei bvapi.js und zum Laden von Ratings & Reviews auf der Seite.

Überprüfen Sie Ihre gehostete Produktseite mit implementierten Ratings & Reviews

Entnehmen Sie der Registerkarte Details folgende Kennzahlen:

  • Die Dauer der Anfrage von bvapi.js (diese finden Sie im Abschnitt Anfragedetails)
  • Die Zeit der Performance-Marke rr_show_reviews-call
  • Die Zeit der Performance-Marke reviewContentList1-render-end

Führen Sie entsprechend der vorherigen Kennzahlen die folgenden Maßnahmen durch:

  • Wenn die Anfragedauer für bvapi.js größer als 1.000 ms ist, verschieben Sie den BV.ui-Aufruf auf der Seite nach oben.
  • Wenn der Zeitunterschied zwischen der Anforderung rr_show_reviews-call und bvapi.js mehr als 500 ms beträgt, ist Ratings & Reviews auf der Seite, wurde aber noch nicht zum Wiedergabe aufgefordert. Bewegen Sie den Auruf $BV.ui sofort nach dem Verweis auf bvapi.js.
  • Wenn die Zeitdifferenz bei der Anfrage von reviewContentList1-render-end und rr_show_reviews-call länger als drei Sekunden ist und es zu Leistungsproblemen kommt, wenn Sie Ihre gehostete Produktseite mit blockierten Ratings & Reviews überprüfen, kann es sein, dass der Bazaarvoice-Code um Netzwerk-Bandbreite und Rechenleistung im Webbrowser konkurrieren. Kontaktieren Sie Ihren Bazaarvoice-Kundenbetreuer für Unterstützung.

Überprüfen Sie Ihre gehostete Produktseite mit blockierten Ratings & Reviews

Falls die Kennzahlen für Dokument komplett oder Vollständig geladen größer als 3.000 ms sind, wenn der Test mit blockiertem bvapi durchgeführt wird, versucht Ihre Seite wahrscheinlich, zu viel Inhalt auf einmal zu laden. Wenn Render starten über 1.000 ms liegt, ist das auch ein Zeichen für den Versuch, beim Start zu viel Inhalt zu laden. Kontaktieren Sie Ihren Bazaarvoice-Kundenbetreuer, wenn Sie Support benötigen.

Falls keine Performance-Probleme auftraten, wenn Sie Ihre Produktseite mit blockiertem Ratings & Reviews testeten, aber es Probleme mit der Seite gab, als Ratings & Reviews aktiviert war, könnte ein Konflikt zwischen Ihrem Code und dem Bazaarvoice-Code bestehen. Kontaktieren Sie Ihren Bazaarvoice-Kundenbetreuer für Support.

Häufige Performance-Probleme

Folgende Gründe sind häufig für langsame Ladezeiten verantwortlich.

Zu viel JavaScript

Achten Sie auf die Ausführungszeiten, wenn JavaScript (Drittanbieter oder anderweitig) auf Ihrer Seite geladen wird. Ein Script mit offenbar übermäßig hohen Ausführungszeiten könnte unnötigen Overhead zu der Gesamtladezeit Ihrer Seite hinzufügen.

Zu viele JavaScript-Dateien

Wenn die Zahl der Anfragen der JavaScript-Dateien unverhältnismäßig hoch ist, kann es sein, dass es zu einem Engpass im Netzwerk kommt. Wenn Sie 20 oder mehr Anfragen für .js-Dateien von derselben Domain sehen, sollten Sie jene Dateien eventuell verknüpfen .

Content Delivery Networks (CDN) oder Caching nicht effizient genutzt

Die Registerkarte Performace-Übersicht enthält Kennzahlen über Ihre CDN- und Caching-Nutzung. Wenn Ihre Seite viele Inhalte ohne Caching enthält, kann sich das auf die Ladezeiten der Erst- und Wiederholungsbesuche auswirken.

Zu viele Bilder

Wenn Ihre Seite viele Bilder enthält, dann stellen Sie sicher, dass diese Bilder optimiert und komprimiert und weitere Bilder für Bilderkarusselle oder Galerien nach dem ersten Rendern der Seite dynamisch geladen werden.

Fügen Sie dort diesen Code hinzu, wo Sie die Bazaarvoice-Inhalte auf Ihren Seiten anzeigen möchten:

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; in <client_name>, <site_ID> und <locale> ersetzen und /bvstaging FÜR PRODUKTION entfernen --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice-Konfigurationsaufruf --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Entsprechende ExternalId aus Produkt-Feed benutzen }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--Der Produktname muss mit itemprop=Namensattribut identifiziert werden--> <!-- Der Übersichts-Container kommt unterhalb der Seitenfaltung in die Nähe des Produktnamens oder Produktbilds --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews-Container kommt unter die Produktbeschreibung --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // Wenn der Container ausgeblendet ist (zum Beispiel hinter einem Tab), Code hier einfügen, um ihn einzublenden //(Tab öffnen). } }); </script> </div> </body> </html>

Überprüfen Sie Folgendes: