Wie baue ich die OUTTRA Product Lens auf einer Produkt-Detailseite meines Shops ein?

Erfahren Sie, wie Sie in wenigen einfachen Schritten die OUTTRA Product Lens in ihre Webseite einbinden können

Was Sie benötigen

  • Ihre OUTTRA Shop-ID. Sollten Sie diese nicht zur Hand haben, so wenden Sie sich bitte an support-de@outtra.com.
  • Zugriff auf den Webseiten-Code Ihrer Produkt-Detailseite

Wie Sie die OUTTRA Product Lens einbauen können

Die OUTTRA Product Lens benötigt nur wenige Zeilen Code bestehend aus einem <div> und einem <script>-Tag:

<div 
    id="outtra-product-lens-container"
  data-shop_id="_IHRE SHOP ID_"
  data-gtin="_DIE EAN ODER GTIN DES PRODUKTS_"
data-lang="_DIE GEWÜNSCHTE SPRACHVERSION, ZUM BEISPIEL: de"
    >        
</div>
<script src="https://brandwidgets.outtra.com/js/productLens.js" async></script>

Diesen Code müssen Sie an der Stelle ihrer Webseite einfügen an der die OUTTRA Product Lens erscheinen soll.

Mehr ist in der Basis-Konfiguration nicht zu tun, die OUTTRA Product Lens wird geladen wenn sie für dieses Produkt verfügbar ist!

Konfiguration

Sie können über die data-Attribute des <div>-Containers mit der id "outtra-product-lens-container" die OUTTRA Product Lens konfigurieren.

Notwendige Parameter

  • data-shop_id
    Wird Ihnen von OUTTRA mitgeteilt und identifiziert Ihren Shop bei den OUTTRA-Systemen.
  • data-gtin
    Die EAN oder GTIN des Produkts. Diese müssen Sie übermitteln, damit die korrekte OUTTRA Product Lens geladen werden kann.

Optionale Parameter

  • data-lang
    Steuert die Sprachversion der OUTTRA Product Lens. Akzeptiert werden zweistellige Sprachkürzel wie "de", "en", "fr" dem Standard ISO-639-1 folgend.
    Wenn der Parameter fehlt wird "de" als Standard gesetzt.
    Zur Zeit wird nur "de" unterstützt, weitere Sprachversionen folgen.
  • data-autoload
    Wenn Sie diesen Parameter auf "false" setzen, so lädt die OUTTRA Product Lens nicht automatisch sondern muss per Aufruf (siehe unten) geladen werden.
    Wenn der Parameter fehlt oder auf "true" gesetzt ist lädt die OUTTRA Product Lens automatisch.

Elemente ein- und ausblenden

Sollte eine OUTTRA Product Lens einmal nicht geladen werden können - bspw. weil die übermittelte GTIN unbekannt ist - so werden durch das Script alle Elemente mit der CSS-Klasse "outtra-toggle-display" ausgeblendet. Sie können die OUTTRA Product Lens mit einer anderen GTIN erneut laden (siehe: JavaScript API / Funktionen) und wenn diese bekannt ist werden die mit der CSS-Klasse versehenen Elemente wieder eingeblendet.

Dies ist hilfreich wenn Sie zum Beispiel über die OUTTRA Product Lens eine Überschrift gesetzt haben, die nur angezeigt werden soll, wenn das Tool auch geladen werden konnte.

JavaScript API

Funktionen

loadProductLens
Sie können die OUTTRA Product Lens durch den Aufruf der JavaScript-Funktion "loadProductLens" mit einer von Ihnen übermittelten GTIN neu laden:

window.outtra.loadProductLens(_IHRE EAN ODER GTIN_)

So können Sie bspw. auch eine OUTTRA Product Lens laden, die mit dem Parameter "data-autoload" auf "false" initialisiert wurde.

Events

outtra-product-lens-script-loaded
Wenn das OUTTRA Product Lens Script erfolgreich geladen wurde sendet dieses den Event "outtra-product-lens-script-loaded" an das Window-Objekt. So können Sie auf diesen Event hören und eigenen Code im Anschluss ausführen:

<script>
  window.addEventListener('outtra-product-lens-script-loaded', function(e){
      <!-- IHR CODE -->
  })
</script>