Tangiblee Help Center

Tangiblee empfiehlt verwaltete Integration für 95% unserer Kunden. Im Rahmen einer verwalteten Integration führt Tangiblee die Qualitätssicherung durch und ist dafür verantwortlich, dass Tangiblee CTA und Modal den laufenden Änderungen und Implementierungen der Kunden entsprechen. Es ist jedoch wichtig zu beachten, dass Tangiblee (success@tangiblee.com) benachrichtigen sollte, wenn sie eine fortlaufende Produktlayout-Seite oder Änderungen an der Plattformneugestaltung haben sollten, über das wir uns im Klaren sein sollten. Falls nicht, sehen wir diese Änderung zuerst auf der Seite, da sie für die Produktion bereitgestellt wurden, und der Tangiblee-CTA wird erst angezeigt, wenn unser Mapping aktualisiert wurde, um diese Änderungen zurückzugeben.

Was ist ein möglicher Anwendungsfall für Self-Service Integration?

Wenn Sie eine progressive Webanwendung verwenden, die auf Ihrer vorhandenen E-Commerce-Plattform ausgeführt wird, wird möglicherweise empfohlen, die Self-Service-Integration zu verwenden. Wir empfehlen aber ein Gespräch mit dem Tangiblee-Engineering-Team, um alle möglichen Integrationsoptionen zu definieren.

Im Fall einer Self-Service-Integration implementiert der Kunde seinen eigenen Mapping-Code (tangiblee-mapper.js) und hat die volle Kontrolle über seine Logik.

Die Self-Service-Integration besteht aus zwei Codeblöcken:

Zuordnungscode (tangiblee-mapper.js)
Greifbarer API-Code (greifbar.min.js)

<head><body>Tangiblee empfiehlt, diesen Tag an derselben Stelle zu platzieren, sodass die anderen Javascript-Tags zur Seite hinzugefügt wurden - es kann das Ende des Abschnitts sein oder sein. Wenn Tangiblee-Tags hinzugefügt werden Google Tag Manager (GTM) dann verwaltet GTM das automatisch.

Wenn ein Kunde auch zwei Versionen der Snippets benötigt, um zwei verschiedene Umgebungen wie PRD und STD zu unterstützen, können zwei separate Versionen verwendet werden tangiblee-mapper.js Dateien für PRD- und STG-Umgebungen.‍

Typische Self-Service-Integration

Das tangiblee-mapper.js ist ähnlich Beispiel für eine PDP-Version von Managed Integration Production aber jetzt vom Client geschrieben und direkt auf dem PDP gehostet, aber es sollte vom Tangiblee CDN geladen werden.

[.gut] Nur allgemein Greifbare API Besuche werden an das Tangiblee-CDN gesendet, was einem Hin- und Rücklauf weniger entspricht, um das zu laden mapper.js von Tangiblee CDN. [.gut]

Eine SKU auf einem PDP
Ein aktives Lokal
Kein Preis/Währung/ATC im Widget
Keine Auftragsverfolgung

*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*

`<script>`

*`// helper function containing the code`*

*`// that injects the demo CTA.`*

*`// this code should be replaced with a`*

*`// real CTA injecting for a given PDP`*

**`var** showTangibleeCta = **function**(ctaThumbs) {`

**`var** ctaClassName = 'tangiblee-shopify-cta',`

`ctaContainer = document.getElementById('ProductThumbs'),`

`cta = document.getElementsByClassName(ctaClassName)[0];`

**`if** (cta) {`

`cta.style.display = 'block';`

`} **else** {`

**`if** (ctaContainer) {`

**`var** li = document.createElement('li');`

`li.className = 'grid__item small--one-third medium-up--one-third';`

**`var** btn = document.createElement('button');`

`btn.className = 'product-single__thumbnail ' + ctaClassName;`

`btn.style.border = '1px solid #333';`

`btn.style.padding = '0';`

`btn.style.margin = '0';`

`btn.style.backgroundColor = '#fff';`

`btn.style.width = '76px';`

`btn.style.height = '76px';`

`btn.style.fontSize = '1.4em';`

`btn.style.fontWeight = 'bold';`

`btn.style.lineHeight = '1.1em';`

`btn.style.textAlign = 'center';`

`btn.innerText = 'Will It Fit?';`

`li.appendChild(btn);`

`ctaContainer.appendChild(li);`

`}`

`}`

**`return** ctaClassName;`

`};`

`window.tangiblee =`

`window.tangiblee ||`

**`function**() {`

`(tangiblee.q = tangiblee.q || []).push(arguments);`

`};`

`tangiblee('domain', 'www.example.com');`

`tangiblee('useCookies', true);`

`tangiblee('showCTA', showTangibleeCta);`

`tangiblee('startOnSKUs', ['2275915']);`

`</script>`

*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*

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

### Multi SKU Multi Locale Self-Service Integration

Advanced Self-Service Integration example: [Advanced Self-Service Integration Sample Link.](https://tngsandbox.myshopify.com/products/andre-sofa-bed)

Same as in the previous example, also in the Advanced example, the Mapping Code is written by the client and hosted on the client's PDP.

This example shows how to use Tangiblee on:

1. Multiple SKUs on a PDP (in this case two).
2. Multiple locales
3. *Price/Currency/ATC in-widget*
4. *Order Tracking on Thank You Page*

*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*

`<script>`

*`// helper function containing the code`*

*`// that injects the demo CTA.`*

*`// this code should be replaced with a`*

*`// real CTA injecting for a given PDP`*

**`var** showCta = **function** (ctaThumbs) {`

**`var** ctaClassName = 'tangiblee-cta',`

`cta = document.getElementsByClassName(ctaClassName)[0];`

**`if** (!cta && window.thumbsCarousel) {`

**`var** existingThumb = document.querySelector('.thumbsCarousel img');`

**`var** wrapper = document.createElement('div');`

`wrapper.style.position = 'relative';`

`wrapper.style.width = existingThumb.width + 'px';`

`wrapper.style.height = existingThumb.height + 'px';`

**`var** btn = document.createElement('button');`

`btn.style.position = 'absolute';`

`btn.style.top = '50%';`

`btn.style.left = '50%';`

`btn.style.display = 'block';`

`btn.style.margin = '-38px 0 0 -38px';`

`btn.className = ctaClassName;`

`btn.style.border = '1px solid #333';`

`btn.style.padding = '0';`

`btn.style.backgroundColor = '#fff';`

`btn.style.width = '76px';`

`btn.style.height = '76px';`

`btn.style.fontSize = '1.4em';`

`btn.style.fontWeight = 'bold';`

`btn.style.lineHeight = '1.1em';`

`btn.style.textAlign = 'center';`

`btn.innerText = 'Will It Fit?';`

`wrapper.appendChild(btn);`

`window.thumbsCarousel.append(wrapper);`

`}`

**`return** ctaClassName;`

`};`

*`// helper function containing the code`*

*`// that hides the demo CTA.`*

*`// this code should be replaced with a`*

*`// real CTA hiding for a given PDP`*

**`var** hideCTA = **function** (activeSKU) {`

**`var** cta = document.getElementsByClassName('tangiblee-cta')[0];`

**`if** (cta) {`

`cta.parentNode.removeChild(cta);`

`}`

`};`

*`// helper function containing the code`*

*`// that listens for the SKU change on the page and calls`*

*`// tangiblee('activeSKU', activeSku);`*

*`// when the value of active SKU is changed.`*

*`// this code should be replaced with a`*

*`// real SKU change detection for a given PDP`*

**`var** skuChangingElement = document.getElementsByClassName('single-option-selector')[0];`

`skuChangingElement.addEventListener('change', **function** () {`

**`var** activeSku,`

`selectedValue = document.getElementsByClassName('single-option-selector')[0].value;`

**`for** (**var** i = 0; i < meta.product.variants.length; i = i + 1) {`

**`if** (meta`

`.product`

`.variants[i]`

`.public_title === selectedValue) {`

`activeSku = meta.product.variants[i].sku;`

**`break**;`

`}`

`}`

**`if** (activeSku) {`

`tangiblee('activeSKU', activeSku);`

`}`

`});`

`});`

`window.tangiblee = window.tangiblee || **function** () {`

`(tangiblee.q = tangiblee.q || []).push(arguments);`

`};`

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

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

`tangiblee('useCookies', true);`

`tangiblee('useEnhancedEcommerce', true);`

`tangiblee('showCTA', showCta);`

`tangiblee('hideCTA', hideCTA);`

`tangiblee('activeCurrency', '$');`

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

`tangiblee('onSKUsValidated', **function** (atLeastOneSKUIsValid) {`

`console.log('At least one SKU is valid: ' + JSON.stringify(atLeastOneSKUIsValid));`

`});`

`tangiblee('onCTAFirstShown', **function** () {`

`console.log('Tangiblee CTA first shown!');`

`});`

`tangiblee('onCtaClicked', **function** () {`

`console.log('Tangiblee CTA clicked!');`

`});`

`tangiblee('onModalOpened', **function** () {`

`console.log('Tangiblee modal opened!');`

`});`

`tangiblee('onIframeLoaded', **function** () {`

`console.log('Tangiblee iframe loaded!');`

`});`

`tangiblee('onModalClosed', **function** () {`

`console.log('Tangiblee modal closed!');`

`});`

`tangiblee('activeSKU', 'F123356');`

`tangiblee('startOnSKUs', ['F123356', 'F125170']);`

`tangiblee('activePrice', '350');`

`</script>`

*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*

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

Self-Service-Integration mit mehreren SKUs und mehreren regionalen Schemas

Beispiel für eine erweiterte Self-Service-Integration: Beispiellink für eine erweiterte Self-Service-Integration.

Wie im vorherigen Beispiel, auch im vorherigen Beispiel, wird der Mapping-Code vom Client und dem Hosting auf dem PDP der Clients geschrieben.

Dieses Beispiel zeigt, wie Tangiblee verwendet wird für:

Mehrere SKUs auf einem PDP (in diesem Fall zwei).
Mehrere Standorte
Preis/Währung/ATC im Widget
Auftragsverfolgung auf der Dankeschön-Seite

*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*

`<script>`

*`// helper function containing the code`*

*`// that injects the demo CTA.`*

*`// this code should be replaced with a`*

*`// real CTA injecting for a given PDP`*

**`var** showCta = **function** (ctaThumbs) {`

**`var** ctaClassName = 'tangiblee-cta',`

`cta = document.getElementsByClassName(ctaClassName)[0];`

**`if** (!cta && window.thumbsCarousel) {`

**`var** existingThumb = document.querySelector('.thumbsCarousel img');`

**`var** wrapper = document.createElement('div');`

`wrapper.style.position = 'relative';`

`wrapper.style.width = existingThumb.width + 'px';`

`wrapper.style.height = existingThumb.height + 'px';`

**`var** btn = document.createElement('button');`

`btn.style.position = 'absolute';`

`btn.style.top = '50%';`

`btn.style.left = '50%';`

`btn.style.display = 'block';`

`btn.style.margin = '-38px 0 0 -38px';`

`btn.className = ctaClassName;`

`btn.style.border = '1px solid #333';`

`btn.style.padding = '0';`

`btn.style.backgroundColor = '#fff';`

`btn.style.width = '76px';`

`btn.style.height = '76px';`

`btn.style.fontSize = '1.4em';`

`btn.style.fontWeight = 'bold';`

`btn.style.lineHeight = '1.1em';`

`btn.style.textAlign = 'center';`

`btn.innerText = 'Will It Fit?';`

`wrapper.appendChild(btn);`

`window.thumbsCarousel.append(wrapper);`

`}`

**`return** ctaClassName;`

`};`

*`// helper function containing the code`*

*`// that hides the demo CTA.`*

*`// this code should be replaced with a`*

*`// real CTA hiding for a given PDP`*

**`var** hideCTA = **function** (activeSKU) {`

**`var** cta = document.getElementsByClassName('tangiblee-cta')[0];`

**`if** (cta) {`

`cta.parentNode.removeChild(cta);`

`}`

`};`

*`// helper function containing the code`*

*`// that listens for the SKU change on the page and calls`*

*`// tangiblee('activeSKU', activeSku);`*

*`// when the value of active SKU is changed.`*

*`// this code should be replaced with a`*

*`// real SKU change detection for a given PDP`*

**`var** skuChangingElement = document.getElementsByClassName('single-option-selector')[0];`

`skuChangingElement.addEventListener('change', **function** () {`

**`var** activeSku,`

`selectedValue = document.getElementsByClassName('single-option-selector')[0].value;`

**`for** (**var** i = 0; i < meta.product.variants.length; i = i + 1) {`

**`if** (meta`

`.product`

`.variants[i]`

`.public_title === selectedValue) {`

`activeSku = meta.product.variants[i].sku;`

**`break**;`

`}`

`}`

**`if** (activeSku) {`

`tangiblee('activeSKU', activeSku);`

`}`

`});`

`});`

`window.tangiblee = window.tangiblee || **function** () {`

`(tangiblee.q = tangiblee.q || []).push(arguments);`

`};`

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

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

`tangiblee('useCookies', true);`

`tangiblee('useEnhancedEcommerce', true);`

`tangiblee('showCTA', showCta);`

`tangiblee('hideCTA', hideCTA);`

`tangiblee('activeCurrency', '$');`

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

`tangiblee('onSKUsValidated', **function** (atLeastOneSKUIsValid) {`

`console.log('At least one SKU is valid: ' + JSON.stringify(atLeastOneSKUIsValid));`

`});`

`tangiblee('onCTAFirstShown', **function** () {`

`console.log('Tangiblee CTA first shown!');`

`});`

`tangiblee('onCtaClicked', **function** () {`

`console.log('Tangiblee CTA clicked!');`

`});`

`tangiblee('onModalOpened', **function** () {`

`console.log('Tangiblee modal opened!');`

`});`

`tangiblee('onIframeLoaded', **function** () {`

`console.log('Tangiblee iframe loaded!');`

`});`

`tangiblee('onModalClosed', **function** () {`

`console.log('Tangiblee modal closed!');`

`});`

`tangiblee('activeSKU', 'F123356');`

`tangiblee('startOnSKUs', ['F123356', 'F125170']);`

`tangiblee('activePrice', '350');`

`</script>`

*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*

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

Self-Service Integration, mapper.js, clientseitige Implementierung, JavaScript Integration, Multi-Environment Setup, API Code

Erfahren Sie, wann eine Self-Service-Integration sinnvoll ist und wie sie umgesetzt wird. Der Leitfaden erklärt den kundenseitig verwalteten mapper.js-Ansatz, die nötigen Code-Blöcke, die Umgebungslogik und die wichtigsten Unterschiede zur Managed Integration.

Tangiblee Help Center

Selfservice-Integration

Was ist ein möglicher Anwendungsfall für Self-Service Integration?

Typische Self-Service-Integration

Self-Service-Integration mit mehreren SKUs und mehreren regionalen Schemas

Related Resources