Tangiblee Help Center

Aufgrund unserer Erfahrung würden wir empfehlen Verwaltete Integration aufgrund der Tatsache, dass bei der Semi-Managed-Integration Ihr Entwicklungsteam dafür verantwortlich ist, dass die Funktionen von Tangiblee bei jeder neuen Bereitstellung und Änderung des Seitenlayouts kompatibel sind.

Durch die verwaltete Integration führt Tangiblee die Qualitätssicherung durch und ist dafür verantwortlich, dass der CTA und das Modal von Tangiblee Ihren laufenden Änderungen und Bereitstellungen entsprechen. Beachten Sie jedoch, dass Sie Tangiblee benachrichtigen sollten (success@tangiblee.com) wenn Sie laufende Änderungen an der Produktlayoutseite oder der Neugestaltung der Plattform 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.

Mit dieser Option entwickelt das Tangiblee-Team die erste Implementierung des Mapping-Codes (auch bekannt als tangiblee-mapper.js) Anpassung von Tangiblee an das PDP-Layout und die Struktur Ihrer Website.

Die halbverwaltete 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. Tangiblee empfiehlt keine GTM-Installation angesichts der neueste Updates in IOS17.

Ihr IT-Team installiert tangiblee-mapper.js entweder als Tag oder hostet es als Datei und fügt es direkt zu Ihrer Website hinzu. In Zukunft hat Ihre IT die volle Kontrolle über tangiblee-mapper.js um Tangiblee anzupassen und bei Bedarf an Änderungen in der PDP-Struktur zu aktualisieren. Weitere Informationen zur möglichen Anpassung von tangiblee-mapper.js finden Sie in der Einführung in die API Artikel im Abschnitt API-Dokumentation.

[.gut]WICHTIG: Vor der Installation des tangiblee-mapper.js Vergewissern Sie sich, dass der SKU-ID-Selektor korrekt ist und der PDP-Struktur entspricht. Wenn es eine Diskrepanz gibt, informieren Sie Ihren Account Manager so schnell wie möglich, um das zu beheben. [.good]

Wenn Sie Tangiblee in verschiedenen Umgebungen mit unterschiedlichen Konfigurationen (z. B. STG, PRD) installieren müssen, duplizieren Sie einfach das tangiblee-mapper.js und aktualisiere es mit den Konfigurationsänderungen. Im Folgenden finden Sie zwei Beispiele für tangiblee-mapper.js unterstützt verschiedene Konfigurationen. Außerdem weitere Details zur möglichen Anpassung von tangiblee-mapper.js finden Sie in der Einführung in die API Artikel im Abschnitt API-Dokumentation.

Einzelne SKU (typisch) — Teilweise verwaltete Integration

Hier ist ein Beispiel für eine halbverwaltete Integration: Typisches halbverwaltetes Beispiel-PDP.

Das tangiblee-mapper.js ähnelt Managed Integration Sample PDP, wird jedoch von Tangiblee geschrieben und direkt auf dem PDP gehostet, anstatt es aus dem Tangiblee CDN zu laden.

[.good] Nur generische Tangiblee-API-Aufrufe werden an das Tangiblee-CDN gesendet, was bedeutet, dass ein Roundtrip zum Tangiblee-CDN gespeichert wird, um das zu laden tangiblee-mapper.js. [.gut]

Unten finden Sie einen Beispielcode für tangiblee-mapper.js mit den folgenden im Skript konfigurierten Eigenschaften:

Einzelne SKU auf der PDP
Ein aktives Locale
Kein Preis-/Währung/ATC-In-Popup
Keine Auftragsverfolgung

<!-- tangiblee-mapper.js code placed in a <script> tag -->
<script>
(function(){
    // 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.tangiblee-integration.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>

[.schlecht]Bitte beachten Sie: Dies ist nicht Ihr Integrations-Snippet, sondern ein Beispiel für diesen Leitfaden. Ihr Ansprechpartner bei Tangiblee wird Ihnen während des Onboarding-Prozesses ein Integrations-Snippet speziell für Ihre Website zur Verfügung stellen. [.bad]

Mehrere SKUs auf PDP — Teilweise verwaltete Integration

In diesem Beispiel sehen Sie eine komplexere tangiblee-mapper.js das behandelt einen Anwendungsfall mit mehr als einer SKU auf dem PDP. Außerdem sind weitere Tangiblee-Funktionen konfiguriert, z. B. die Auftragsverfolgung.

Eine vollständige Liste der Anpassungsoptionen und Parameter finden Sie in tangiblee-mapper.js sehen Sie sich bitte die Einführung in die API Artikel im Abschnitt API-Dokumentation in der Knowledge Base.

Unten finden Sie einen Beispielcode für tangiblee-mapper.js mit den folgenden im Skript konfigurierten Eigenschaften:

Zwei SKUs auf der PDP
Ein aktives Locale
Preis/Währung/ATC im Popup

<!-- tangiblee-mapper.js code placed in a <script> tag -->
<script>
(function(){
    // 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('widgetVersion', 'v3');
   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>

Semi-Managed Integration, mapper.js Verantwortung, Deployment Wartung, QA Risiko, kundenspezifische Integration, Managed vs Semi-Managed

Erfahren Sie, wie eine Semi-Managed-Integration funktioniert und warum sie meist nicht empfohlen wird. Der Artikel erklärt die Verantwortung für mapper.js, Pflichten bei Deployments, QA-Risiken, Anpassungsoptionen und wann Managed Integration die bessere Wahl ist.

Tangiblee Help Center

Teilweise verwaltet

Einzelne SKU (typisch) — Teilweise verwaltete Integration

Mehrere SKUs auf PDP — Teilweise verwaltete Integration

Related Resources