Erfahren Sie, wie Sie das Widget korrekt auf Ihrer Seite einbinden und welche Konfigurationsparameter Sie setzen müssen
Wie Sie das Widget einbinden
Das OUTTRA Brand Widget für Produktdetailseiten ist ein JavaScript HTML-Tag, welches einen Button lädt. Es muss an der Stelle in den Quellcode eingefügt werden an der Sie den Button erscheinen lassen möchten. Sie müssen sicherstellen, dass der Browser das JavaScript laden kann indem Sie das Script-Tag entweder im vom Server zurückgelieferten HTML eingebettet haben, oder indem Sie es nach dem Laden per Document.createElement() (siehe https://developer.mozilla.org/de/docs/Web/API/Document/createElement) oder einer äquivalenten Methode einbinden.
Staging-Umgebungen
Wir raten dazu an, das Widget erst in einer Staging-Umgebung einzubinden und die Implementation zu prüfen bevor Sie diese in Ihre Live-Umgebung übernehmen.
Wenn Ihre Staging-Umgebung eine andere Domain verwendet als Ihre Live-Umgebung, so teilen Sie uns diese Domain bitte unter support-de@outtra.com mit damit wir diese auf unsere Allow-List setzen können.
Konfiguration des Widgets
Das Script-Tag hat ein paar Konfigurationsvariablen in der Form von data-Attributen. Wie Sie diese nutzen hängt davon ab auf welche Weise Sie dem Script mitteilen möchten, welches Produkt geladen werden soll.
Es gibt zwei Arten dies zu tun: Entweder indem Sie eine EAN / GTIN oder indem Sie einen gruppierenden Product Identifier mit gewünschter Herstellerfarbe und Größe übermitteln.
Für beide Implementationsarten gibt es verpflichtende Konfigurationsvariablen:
- $BRAND und $BRAND_ID werden Ihnen von OUTTRA mitgeteilt. Diese könnten bspw. "sports-brand" und "12345" lauten.
- $LANG ist der ISO 3166-1 alpha-2 Ländercode der Sprache in der Sie das Widget laden möchten (zum Beispiel "de" für Deutsch oder "en" für Englisch).
Wenn Sie das Widget per EAN oder GTIN laden möchten:
<script src="https://brandwidgets.outtra.com/js/$BRAND/button-widget.js" data-outtrabrand_id="$BRAND_ID" data-gtins="$GTIN" data-lang="$LANG" async></script>
- $GTIN ist ein numerischer Wert mit 13 oder 14 Stellen, gewöhnlich mit einer führenden 0. Dieser Wert identifiziert weltweit eine Variante innerhalb eines Produkts und muss Teil der an OUTTRA übermittelten Produktdaten-Files sein
Wenn Sie das Widget per gruppierendem Product Identifier laden möchten:
<script src="https://brandwidgets.outtra.com/js/$BRAND/button-widget.js" data-outtrabrand_id="$BRAND_ID" data-product_identifier="$PRODUCT_IDENTIFIER" data-manufacturer_color="$MANUFACTURER_COLOR" data-size="$SIZE" data-lang="$LANG" async></script>
- $PRODUCT_IDENTIFIER ist ein gruppierende Identifikator für ein Produkt. Nicht zu verwechseln mit einer Artikelnummer, welche eine Variante innerhalb eines Produkts identifiziert. Wir gruppieren Produkte anhand des übermittelten Produktdaten-Files. Wenn Sie unsicher sind, wie der jeweilige $PRODUCT_IDENTIFIER für Ihre Produkte aussehen könnte wenden Sie sich gerne an support-de@outtra.com
- $MANUFACTURER_COLOR ist der Hersteller-Farbwert des Produkts, welches Sie im Widget laden möchten, zum Beispiel "space grey". Die möglichen Werte entstammen dem Produktdaten-File.
- $SIZE ist der Größen-Wert des Produkts, welches Sie im Widget laden möchten, zum Beispiel "S" oder "xl". Die möglichen Werte entstammen dem Produktdaten-File.
Das Widget mit User-Interaktionen synchron halten
Sie sollten die data-attributes des OUTTRA Brand Widgets immer synchron mit der Farb- und Größenauswahl der User auf Ihrer Webseite halten. Wenn beispielsweise eine Userin die Größe "S" auswählt und Sie die Implementation via EAN / GTIN vorgenommen haben, so sollten Sie das data-gtins Attribut des Script Tags entsprechend aktualisieren. Wenn Sie nicht per EAN / GTIN implementieren sollten Sie das data-size Attribut entsprechend aktualisieren.
Wenn Sie Fragen bezüglich der technischen Implementation auf Ihrer Produktdetailseite haben zögern Sie nicht sich an support-de@outtra.com zu wenden.