Self-Service-Integration
[.bad] HINWEIS: Die Self-Service-Integration wird nur für sehr spezifische Anwendungsfälle empfohlen. [.bad]
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 Sie Tangiblee (success@tangiblee.com) benachrichtigen sollten, wenn Sie eine fortlaufende Produktlayout-Seite oder Änderungen an der Plattformneugestaltung haben, über die wir uns im Klaren sein sollten. Wenn nicht, werden wir diese Änderung erst auf der Seite sehen, nachdem sie für die Produktion bereitgestellt wurde, und der Tangiblee-CTA wird erst angezeigt, wenn wir unser Mapping aktualisiert haben, um diesen Änderungen Rechnung zu tragen.
Was ist ein möglicher Anwendungsfall für Self-Service Integration?
Wenn Sie eine Progressive Web Application nutzen, die auf Ihrer bestehenden E-Commerce-Plattform ausgeführt wird, ist es möglicherweise ratsam, die Self-Service-Integration zu nutzen. Wir empfehlen jedoch ein Gespräch mit dem Tangiblee-Engineering-Team, in dem alle möglichen Integrationsoptionen dargelegt werden.
Im Fall einer Self-Service-Integration implementiert der Client seinen eigenen Mapping-Code (tangiblee-mapper.js) und hat die volle Kontrolle über seine Logik.
Die Self-Serviced-Integration besteht aus zwei Codeblöcken:
- Zuordnungscode (tangiblee-mapper.js)
- Greifbarer API-Code (tangible.min.js)
<head><body>Tangiblee empfiehlt, dieses Tag an derselben Stelle zu platzieren, an der die anderen Javascript-Tags zur Seite hinzugefügt wurden - es kann das Ende des Abschnitts oder sein. Wenn Tangiblee-Tags hinzugefügt werden über Google Tag Manager (GTM) dann verwaltet GTM das automatisch.
Wenn ein Client beispielsweise zwei Versionen des Snippets benötigt, um zwei verschiedene Umgebungen wie PRD und STD zu unterstützen, kann dies mithilfe von zwei separaten Versionen geschehen tangiblee-mapper.js Dateien für die PRD- und STG-Umgebungen.
Typische Self-Service-Integration
Das tangiblee-mapper.js ist ähnlich wie Beispiel für eine PDP-Version von Managed Integration Production aber jetzt vom Client geschrieben und direkt auf dem PDP gehostet, anstatt es vom Tangiblee CDN zu laden.
[.gut] Nur generisch Greifbare API Aufrufe werden an das Tangiblee-CDN getätigt, was einem Hin- und Rücklauf weniger entspricht, um das zu laden mapper.js vom Tangiblee CDN. [.gut]
- Eine SKU auf einem PDP
- Ein aktives Locale
- 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 Gebietsschemas
Beispiel für eine erweiterte Self-Service-Integration: Beispiellink für eine erweiterte Self-Service-Integration.
Wie im vorherigen Beispiel, auch im Advanced-Beispiel, wird der Mapping-Code vom Client geschrieben und auf dem PDP des Clients gehostet.
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>`