Intégration en libre-service
[.bad] REMARQUE : L'intégration en libre-service n'est pas recommandée, sauf pour des cas d'utilisation très spécifiques. [.bad]
Tangiblee recomenda intégration gérée pour 95 % de nos clients. Grâce à l'intégration gérée, Tangiblee gère l'assurance qualité et est chargée de s'assurer que le CTA et le modal de Tangiblee respectent les changements et les déploiements en cours des clients. Cependant, il est important de noter que vous devez informer Tangiblee (success@tangiblee.com) si vous avez une page de mise en page de produit en cours ou si des modifications de la plateforme sont en cours et que nous devrions en avoir connaissance. Dans le cas contraire, cette modification ne s'affichera sur la page qu'après son déploiement en production et le CTA tangible n'apparaîtra pas tant que nous n'aurons pas mis à jour notre mappage pour refléter ces modifications.
Quel est le cas d'utilisation possible de l'intégration en libre-service ?
Si vous profitez d'une application Web progressive qui s'exécute au-dessus de votre plateforme de commerce électronique existante, il peut être conseillé d'utiliser l'intégration en libre-service. Cependant, nous vous recommandons de discuter de toutes les options d'intégration potentielles avec l'équipe d'ingénierie de Tangiblee.
Dans le cas d'une intégration en libre-service, le client implémente son propre code de mappage (tangiblee-mapper.js) et maîtrise totalement sa logique.
L'intégration en libre-service se compose de deux blocs de code :
- Code de mappage (tangiblee-mapper.js)
- Code API tangible (tangible.min.js)
<head><body>Tangiblee recommande de placer cette balise au même endroit où les autres balises Javascript sont ajoutées à la page. Il peut s'agir de la fin de la section ou. Si des balises Tangiblee sont ajoutées via Gestionnaire de balises Google (GTM) alors GTM gère cela automatiquement.
Par exemple, si un client a besoin de deux versions du Snippet pour prendre en charge deux environnements différents tels que PRD et STD, cela peut être fait en utilisant deux versions distinctes tangiblee-mapper.js fichiers pour les environnements PRD et STG.
Intégration classique en libre-service
Le tangiblee-mapper.js est similaire à Exemple de version PDP de Managed Integration Production mais désormais écrit par le client et hébergé directement sur le PDP au lieu de le charger depuis Tangiblee CDN.
[.good] Uniquement générique API tangible des appels sont passés vers le CDN de Tangiblee, ce qui équivaut à un aller-retour en moins pour charger le mapper.js depuis le CDN de Tangiblee. [.good]
- Un SKU sur un PDP
- Un Locale actif
- Aucun prix/devise/ATC dans le widget
- Pas de suivi des commandes
*`<!-- 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>`Intégration en libre-service multi-SKU et multi-sites
Exemple d'intégration avancée en libre-service : Exemple de lien vers l'intégration avancée en libre-service.
Comme dans l'exemple précédent, également dans l'exemple avancé, le code de mappage est écrit par le client et hébergé sur le PDP du client.
Cet exemple montre comment utiliser Tangiblee sur :
- Plusieurs SKU sur un PDP (dans ce cas, deux).
- Plusieurs régions
- Widget intégré prix/monnaie/ATC
- Suivi des commandes sur la page de remerciement
*`<!-- 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>`