Die im folgenden Artikel beschriebenen Parameter und Callbacks werden normalerweise in der Integrationsdatei festgelegt, die die Logik der PDP (Produktdetailseite auf der Website des Kunden) der Logik der Tangiblee-Plattform zuordnet — diese Datei hat normalerweise einen Namen tangiblee-mapper.js.

Für tangiblee-mapper.js Damit es richtig funktioniert, sollte das Tangiblee-API-Skript-Tag auf der Webseite enthalten sein. Alle Parameter und Callbacks in diesem Artikel setzen voraus, dass das Tangiblee-API-Skript verfügbar und geladen ist.

Hier ist ein Beispiel dafür, wie das Tangiblee-API-Skript eingebunden wird, damit seine Methoden zur Verwendung in der tangiblee-mapper.js:

<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>

[.schlecht]WICHTIG: Das Tangiblee-API-Skript wird gelegentlich mit neueren Versionen aktualisiert. Wenn Sie eine halbverwaltete oder Self-Service-Integration verwenden, stellen Sie sicher, dass Sie die neueste Version des Tangiblee-API-Skripts verwenden. Fragen Sie Ihren Account Manager, wenn Sie sich nicht sicher sind. [.bad]

Clients, die Managed Integration verwenden (einzeiliges Tag, das den tangiblee-mapper.js) müssen Sie sich keine Gedanken über das Tangiblee-API-Skript oder die Parameter und Callbacks in diesem Artikel machen. Das Tangiblee-Team verwaltet die tangiblee-mapper.js für dich gebündelt mit dem Tangiblee-API-Skript (tangible.min.js) zu einem einzigen tangiblee-bundle.min.js Datei.

Wenn Sie die Semi-Managed-Integration verwenden, stellt das Tangiblee-Team sicher, dass das Tangiblee-API-Skript-Tag und das tangiblee-mapper.js. Wenn das Tangiblee-API-Skript aktualisiert wird, wird sich das Tangiblee-Team mit Einzelheiten zur neuen Version und Versionshinweisen bei Ihnen melden.

Und schließlich für die Self-Service-Integration, bei der Sie Ihre eigenen implementieren tangiblee-mapper.js, stellen Sie sicher, dass Sie die neueste Version des Tangiblee-API-Skripts in Ihr PDP aufnehmen. Fragen Sie Ihren Account Manager nach Einzelheiten, wenn Sie sich über den Pfad nicht sicher sind.

SKUs und Katalog

startonSKUS (skus:array)

StartOnSkus ist der wichtigste Parameter im Dokument.

[.schlecht]verpflichtend: Dieser Parameter muss gesetzt werden, damit die Tangiblee-Integration funktioniert. [.bad]

Dieser Parameter ist der erste, aber es wird empfohlen, ihn zuletzt im Integrationsskript hinzuzufügen, um sicherzustellen, dass alle anderen Tangiblee-Parameter zum Zeitpunkt des Aufrufs festgelegt sind. Dieser Parameter übergibt die SKU-IDs, die auf dem PDP verfügbar sind, an das Tangiblee-API-Skript.

Jedes Mal Starte mit SKUS Wenn der Parameter gesetzt ist, überprüft das Tangiblee-API-Skript, ob die SKUs existieren und auf der Tangiblee-Plattform bereit sind.

Dies erfolgt durch einen HTTP ABRUFEN Anfrage an https://api.tangiblee.com; unten ist ein Beispiel:

https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com&locale=en-US

Wenn das Tangiblee-API-Skript die HTTP GET-Antwort empfängt, wird es ausgelöst Auf SKUSValidated () Ereignis. Nach Erhalt der HTTP GET-Antwort ist das Tangiblee-API-Skript bereit, um festzustellen, welche SKU jetzt aktiv ist und in Tangiblee UX angezeigt werden soll.

In einem einfachen Fall, wenn es nur eine SKU auf einem PDP gibt, ist die Starte auf SKUS () ist auf nur eine SKU festgelegt, die standardmäßig aktiv ist. In diesem Fall ist es nicht erforderlich, dies explizit festzulegen Aktiver SKU ().

Wenn das PDP mehrere SKUs enthält, dann Starte auf SKUS () sollte auf einen gesetzt werden Reihe aller SKUs, die derzeit auf dem PDP verfügbar sind. Aktiver SKU () sollte dann gesetzt werden und definiert, welche SKUs auf dem Array standardmäßig ausgewählt werden sollen.

Deshalb ist es wichtig, immer die Aktiver SKU () vor Starte auf SKUS () falls auf dem PDP mehrere SKUs verfügbar sind.

Die Liste der eingestellten SKUs Starte auf SKUS () sollte die SKU enthalten, die als Aktiver SKU (), zum Beispiel:

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);

[.good] Im obigen Beispiel sendet das Tangiblee-API-Skript eine HTTP-GET-Anfrage mit 3 bereitgestellten SKUs. Wenn die Antwort eintrifft, wird das Produkt „WHITE_PRODUCT_SKU“ ausgewählt, um in Tangiblee UX angezeigt zu werden. [.good]

[.good] Dies tritt nur auf, wenn 'WHITE_PRODUCT_SKU' von Tangiblee genehmigt wurde, andernfalls ECTA verstecken () Die Callback-Funktion wird aufgerufen. [.good]

Das folgende Beispiel zeigt, wie das Tangiblee-API-Skript mit einem Produkt konfiguriert wird, das standardmäßig ausgewählt wird, wenn das PDP geladen wird. Wenn ein Benutzer das aktive Produkt auf einem PDP ändert, muss es nicht eingerichtet werden Starte auf SKUS () erneut, wenn die neue aktive SKU in der Liste der vorherigen enthalten ist Starte auf SKUS () Aussage.

Es reicht, einfach eine neue aktive SKU festzulegen, indem Sie Aktiver SKU () wieder, d. h.:

// PDP loaded, 'WHITE_PRODUCT_SKU' is a default SKU
tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

// Tangiblee API script configured to use following SKUs available on the PDP:
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);
...
// In a while, the user changes the color of the active product on the PDP, for example, to 'LIME_PRODUCT_SKU'.
// Tangiblee API script is configured to display new active SKU in Tangiblee UX:
tangiblee('activeSKU', 'LIME_PRODUCT_SKU');

Wenn die aktive SKU von Tangiblee genehmigt wurde, werden die folgenden Maßnahmen ergriffen:

1. Zeige CTA () Die Callback-Funktion wird aufgerufen.
2. ONCTA wird gezeigt () Ereignis wird ausgelöst, wenn CTA angezeigt wird.

Wenn die PDP ein Einseitige Anwendung (SPA) dann Starte auf SKUS () sollte jedes Mal eingestellt werden die verfügbare Liste der PDP-SKUs ändert sich. Das Gleiche gilt für die Aktiver SKU () - es sollte jedes Mal gesetzt werden, wenn die aktive SKU aktualisiert wird. Beides Starte auf SKUS () und Aktiver SKU () kann so oft wie nötig aufgerufen werden.

‍

Wichtige Hinweise zur Verwendung von Parametern und Callbacks auf SPAs:

• Aktiver SKU () sollte gesetzt werden vor Starte auf SKUS () jedes Mal wenn Starte auf SKUS () ist auf eine neue Liste von SKUs gesetzt. Dann Aktiver SKU () kann so oft wie nötig gesetzt werden, bis es auf eine der SKUs aus der Liste gesetzt wird, die durch die letzte definiert wurde Starte auf SKUS () Aussage.
• Starte auf SKUS () führt die HTTP GET-Anfrage aus und wartet auf die Antwort. Es sollte nicht oft in kurzer Zeit eingestellt werden.‍

Domäne (Domäne:Zeichenfolge)

[.schlecht]verpflichtend: Dieser Parameter muss implementiert werden, damit die Tangiblee-Integration funktioniert. [.bad]

Legt die Domain für alle API-Anfragen an die Tangiblee-Plattform fest.

Die Kombination der Domäne Parameter mit der SKUs array (als Parameter gesetzt) Starte auf SKUS ()) ist eine eindeutige Kennung für SKUs auf der Tangiblee-Plattform. Diese Kennung wird verwendet, um:

• Prüfen Sie, welche SKUs tatsächlich auf der Tangiblee-Plattform verfügbar sind, um sie auf dem PDP anzuzeigen.
• Rufen Sie die Konfiguration von Tangiblee UX für die spezifische SKU ab.
• Verfassen Sie die Tangiblee-Iframe-URL für die spezifische SKU.
• Erfassen Sie Analyse-, Nutzungs- und E-Commerce-Leistungsdaten.

[.gut]Erinnerung: Jede Anfrage an die Tangiblee-Server verwendet die Domain und die SKU-ID als eindeutige Kennung für eine SKU im Katalog des Kunden. [.good]

tangiblee('domain', 'www.tangiblee-integration.com');

‍

Datenschutz

Verwenden Sie Cookies (verwenden Sie Cookies: Bool)

‍

Legt fest, ob Cookies von Tangiblee UX verwendet werden können.

Wenn Verwenden Sie Cookies auf FALSE setzen dann:

• Google Analytics sammelt keine Daten.
• Tangiblee speichert keine Benutzerdaten zwischen PDP-Besuchen, d. h. die Funktion Tangiblee-Verlauf ist nicht verfügbar.

tangiblee('useCookies', false);

iframe Platzierung

container (container:string)

‍

Legt fest, ob der Tangiblee-Iframe in einem Tangiblee-Popup oder in einem anderen modalen Fenster angezeigt oder direkt in ein bestimmtes Element auf einem PDP eingebettet werden soll.

Standardmäßig wird der Tangiblee-Iframe in einem platziert .tangiblee-modal-iframe-container Element. Ein modales Tangiblee-Fenster wird nicht erstellt, wenn ein anderer CSS-Selektor gesetzt ist.

// in this example the Tangiblee modal dialog will not be created
// and Tangiblee UX will be placed inside #tangiblee_app element
tangiblee('container', '#tangiblee_app');

‍

CTA-Rückrufe (Call-to-Action)

showCTA (showCTA:Function)

‍

[.schlecht]verpflichtend: Dieser Parameter muss umgesetzt werden damit die Tangiblee-Integration funktioniert. [.bad]

Definiert, wie Tangiblee-CTA (oder CTAs) aussehen sollen, sowohl in Bezug auf die Grafik (Bild, Text usw.) als auch in Bezug auf die Platzierung auf dem PDP.

Der CTA (oder die CTAs) sind möglicherweise bereits im HTML-Code (z. B. ein Platzhalter) vorhanden und standardmäßig ausgeblendet. Wenn das der Fall ist, definiert showCTA die Aktionen, die erforderlich sind, um den CTA sichtbar zu machen.

kehrt zurück

var showCTA = function(activeSKU, thumbUrl) {
     var ctaCssClass = 'tangiblee-cta',
         cta = document.getElementsByClassName(ctaCssClass)[0];
     if (cta) {
         cta.style.display = 'block';
     } else {
         var cta = document.createElement('button');
         cta.className = ctaCssClass;
         cta.innerText = 'Will it fit?';
         cta.style.backgroundImage = 'url(' + thumbUrl + ')';
         //...
         document.body.appendChild(cta);
     }
     return ctaCssClass;
};
tangiblee('showCTA', showCTA);

Es können beliebig viele CTAs gleichzeitig auf demselben PDP platziert werden.

Zum Beispiel gibt es 2 SKUs auf einem PDP: sku-black und sku-white. Das PDP hat 2 CTAs, eine für jede SKU, mit jeweils schwarzem und weißem Hintergrund.

var showCTA = function(activeSKU, thumbUrl) {
    var ctaCssClass = 'tangiblee-cta',
        CTAs = document.querySelectorAll(ctaCssClass);
    if (CTAs.length) {
        for (var i = 0; i < CTAs.length; i++) {
            CTAs[i].style.display = 'block';
        }
    } else {
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-black';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'black';
        //...
        document.body.appendChild(cta);
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-white';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'white';
        //...
        document.body.appendChild(cta);
    }
    return ctaCssClass;
};

// Set active SKU depending on which CTA is clicked
var onCtaClicked = function(cta) {
    if (cta.className.indexOf('black') > -1) {
        tangiblee('activeSKU', 'sku-black');
    }
    if (cta.className.indexOf('white') > -1) {
        tangiblee('activeSKU', 'sku-white');
    }
}

tangiblee('showCTA', showCTA);
tangiblee('onCtaClicked', onCtaClicked);

‍

hiDecta (hidecta: Funktion)

Definiert, wie Tangiblee CTA (oder CTAs) aus PDP entfernt werden sollen.

Diese Callback-Funktion kann weggelassen werden, wenn ein PDP nur eine SKU enthält und sich die CTA-Platzierung von Tangiblee nicht ändert, wenn ein Benutzer mit PDP interagiert (z. B. durch Klicken auf Drop-down-Menüs, Farbvariationen usw.). Wenn die CTA (s) auf der Clientseite per JavaScript-Code erstellt werden sollen, ist dies die Funktion, die den Tangiblee-CTA korrekt entfernen sollte. Aktive SKU, die als erster Parameter an die Funktion übergeben wurde.

var hideCTA = function(activeSKU) {
     var cta = document.getElementsByClassName('tangiblee-cta')[0];
     if (cta) {
         cta.parentNode.removeChild(cta);
     }
};
tangiblee('hideCTA', hideCTA);

‍

UX-Anpassung

widgetVersion (widgetVersion:Zeichenfolge)

‍

Legt eine Version von Tangiblee UX fest und bestimmt die Version von UX, die geladen wird, wenn Tangiblee angezeigt wird.

[.gut]NOTIZ: v3 ist die aktuellste Version von Tangiblee UX und ist der empfohlene Wert für diesen Parameter [.good]

tangiblee('widgetVersion', 'v3');

‍

PDP-Änderungen mit Tangiblee UX synchronisieren

activeSKU (activeSKU:Zeichenfolge)

‍

Nützlich, wenn das PDP mehr als eine SKU enthält, die von Tangiblee genehmigt wurde.

Dieser Parameter kann weggelassen werden, wenn das PDP nur eine SKU enthält. Bitte beziehen Sie sich auf Starte auf SKUS () Dokumentationsabschnitt für weitere Informationen zur Verwendung Starte auf SKUS () und Aktiver SKU () zusammen.

Sie sollte jedes Mal festgelegt werden, wenn eine aktive SKU im PDP geändert wird.

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

‍

activeLocale (activeLocale: Zeichenfolge)

Dieser Parameter legt das aktive Dokument ActiveLocale fest. Wird verwendet, um eine lokalisierte Version der SKU zu identifizieren, wenn für die Website des Kunden mehr als ein ActiveLocale konfiguriert ist.

document.documentElement.lang wird standardmäßig verwendet.

Es sollte jedes Mal gesetzt werden, wenn das aktive Gebietsschema auf dem PDP geändert wird.

tangiblee('activeLocale', 'en-US');

‍

activePrice (activePrice:String)

Legt den Preis der SKU in Tangiblee UX fest.

Es sollte jedes Mal festgelegt werden, wenn der Preis einer aktiven SKU im PDP geändert wird.

tangiblee('activePrice', '42');

‍

ActiveCurrency (ActiveCurrency:String)

Legt die aktive Währung fest, die in Tangiblee UX verwendet wird.

Es sollte jedes Mal festgelegt werden, wenn die Währung der aktiven SKU im PDP geändert wird.

tangiblee('activeCurrency', '$');

‍

activeATC (activeATC: Zeichenfolge)

Legt den aktiven ADD-to-Cart-Selektor (ATC) im PDP fest. Wenn die ATC-Schaltfläche in Tangiblee UX sichtbar ist, wird durch Klicken auf dieses ATC der Auswahlsatz wie folgt ausgelöst Aktiver ATC.

Es sollte jedes Mal gesetzt werden, wenn der ADD-to-Cart (ATC) -Selektor der aktiven SKU auf dem PDP geändert wird.

tangiblee('activeATC', '.btn-cart');

‍

Google Analytics-Integration (GA-Integration)

Die Self-Service-, Semi-Managed- und Managed Integration-Tags enthalten nur den generischen Tangiblee Analytics-API-Code, nicht jedoch den Tangiblee Analytics-Zuordnungscode. Der generische Tangiblee Analytics-API-Code ermöglicht die Verfolgung gängiger Parameter wie Seitenaufrufe. Für die Auftragsverfolgung sollte der Tangiblee Analytics-Mapping-Code erstellt werden. Er enthält in der Regel den Code, der zum Senden der Bestelldaten an das Analytics-System benötigt wird.

Der Tangiblee Analytics-Zuordnungscode sollte den entsprechenden Seiten (Dankeschön-Seite, Seite mit der Bestellbewertung usw.) mithilfe des separaten Tangiblee Analytics-Tags hinzugefügt werden.

Bitte beachten Sie die Erfassung greifbarer Leistungskennzahlen In diesem Abschnitt finden Sie weitere Informationen zum Hinzufügen und Einrichten des Tangiblee Analytics-Tags zu den Webseiten.