With this option, Tangiblee team develops the initial implementation of mapping code (aka tangiblee-mapper.js) tailoring Tangiblee to the PDP layout and structure of the Client’s website.
Semi-Managed integration consists of two code blocks:
- Mapping Code (tangiblee-mapper.js)
- Tangiblee API code (tangiblee.min.js)
Tangiblee recommends to place that tag in the same place where the other Javascript tags are added to the page - it may be the end of the <head> or <body> section. If Tangiblee tags are added via Google Tag Manager (GTM) then GTM manages that automatically.
Client's IT team installs tangiblee-mapper.js either as a Tag or hosts it as a file and add it directly to the client's website. Going forward, the client's IT has full control over the tangiblee-mapper.js to customize Tangiblee and when needed to update it according to changes in the PDP structure. For more details around the possible customization of tangiblee-mapper.js can be found under API Introduction article under the API Documentation section.
This approach combines the best of both worlds. on one hand, receiving a ready-made tangiblee-mapper.js. On the other hand, having full control on tangiblee-mapper.js after the installation, for additional customization and easy maintenance when updating the Client's website (no need to notify Tangiblee on every change to the PDP structure or layout)
IMPORTANT: Before installing the tangiblee-mapper.js verify the SKU ID selector is correct and matches PDP structure - if there's a mismatch, update your account manager asap to fix that.
If you need to install Tangiblee on different environments with different configurations (e.g. STG, PRD) just duplicate the tangiblee-mapper.js and update it with the configuration changes. Below are two examples of tangiblee-mapper.js supporting different configurations. Also, more details around the possible customization of tangiblee-mapper.js can be found under API Introduction article under the API Documentation section.
Single SKU (typical) - Semi-Managed Integration
The tangiblee-mapper.js is similar to Managed Integration Sample PDP but is written by Tangiblee and hosted on the PDP directly instead of loading it from Tangiblee CDN.
Only generic Tangiblee API calls are made to the Tangiblee CDN which translate to saving a round trip to Tangiblee CDN to load the tangiblee-mapper.js.
Below is a sample code of a tangiblee-mapper.js with the following properties configured in the script:
- Single SKU on the PDP
- One active Locale
- No Price/Currency/ATC in-popup
- No Order Tracking
<!-- 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.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>
Multiple SKUs on PDP - Semi-Managed Integration
- Two SKUs on the PDP
- One active Locale
- Price/Currency/ATC in-popup
<!-- 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('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>