In the case of a Self-Service Integration, the client implements its own mapping code (tangiblee-mapper.js) and has full control of its logic.
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.
For example, if a client needs two versions of the Snippet to support two different environments like PRD and STD, it may be done by using two separate tangiblee-mapper.js files for the PRD and STG environments.
Typical Self-Service Integration
Here is an example of Self-Service Integration: Basic Self-Service Sample Link.
The tangiblee-mapper.js is similar to Managed Integration Production PDP version example but now written by the client and hosted on the PDP directly instead of loading it from Tangiblee CDN.
Only generic Tangiblee API calls are made to the Tangiblee CDN equaling one less round trip to load the mapper.js from the Tangiblee CDN.
- One SKU on a PDP
- One activeLocale
- No Price/Currency/ATC in-widget
- 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.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
Same as in the previous example, also in the Advanced example the Mapping Code is written by the client and hosted on the client PDP.
Same as in the previous example, also in the Advanced example the Mapping Code is written by the client and hosted on the client PDP.
This example shows how to use Tangiblee on:
- Multiple SKUs on a PDP (in this case two).
- Multiple locales
- Price/Currency/ATC in-widget
- 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>