REMARQUE : Tangiblee ne recommande pas cette option.
Sur la base de notre expérience, nous recommandons Intégration gérée en raison du fait que l'intégration semi-gérée nécessite que votre équipe de développement soit chargée de s'assurer que les fonctionnalités de Tangiblee sont compatibles à chaque nouveau déploiement et à chaque modification de mise en page.
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 vos changements et déploiements en cours. Cependant, il est important de noter que vous devez en informer Tangiblee (success@tangiblee.com) si vous avez des modifications en cours sur la page de mise en page du produit ou le remaniement de la plateforme dont nous devrions être informés. 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.
Avec cette option, l'équipe de Tangiblee développe l'implémentation initiale du code de mappage (alias tangiblee-mapper.js) en adaptant Tangiblee à la mise en page et à la structure PDP de votre site Web.
L'intégration semi-gérée 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. Tangiblee ne recommande pas l'installation de GTM étant donné dernières mises à jour dans iOS 17.
Votre équipe informatique installe tangiblee-mapper.js soit en tant que tag, soit en l'hébergeant sous forme de fichier et en l'ajoutant directement à votre site Web. À l'avenir, votre service informatique aura le contrôle total de tangiblee-mapper.js pour personnaliser Tangiblee et, le cas échéant, pour le mettre à jour en fonction des modifications apportées à la structure du PDP. Plus de détails sur la personnalisation possible de tangiblee-mapper.js peut être trouvé dans Présentation de l'API article dans la section Documentation de l'API.
[.bien]IMPORTANT: Avant d'installer tangiblee-mapper.js vérifiez que le sélecteur d'ID SKU est correct et qu'il correspond à la structure du PDP. En cas de non-concordance, informez votre gestionnaire de compte dès que possible pour y remédier. [.good]
Si vous devez installer Tangiblee sur différents environnements avec des configurations différentes (par exemple STG, PRD), dupliquez simplement le tangiblee-mapper.js et mettez-le à jour avec les modifications de configuration. Vous trouverez ci-dessous deux exemples de tangiblee-mapper.js prenant en charge différentes configurations. En outre, plus de détails sur la personnalisation possible de tangiblee-mapper.js peut être trouvé dans Présentation de l'API article dans la section Documentation de l'API.
SKU unique (standard) - Intégration semi-gérée
Voici un exemple d'intégration semi-gérée : exemple typique de PDP semi-géré.
Le tangiblee-mapper.js est similaire à Managed Integration Sample PDP mais est écrit par Tangiblee et hébergé directement sur le PDP au lieu de le charger depuis Tangiblee CDN.
[.good] Seuls les appels d'API génériques de Tangiblee sont effectués vers le CDN de Tangiblee, ce qui se traduit par l'enregistrement d'un aller-retour vers le CDN de Tangiblee pour charger le tangiblee-mapper.js. [.bien]
Vous trouverez ci-dessous un exemple de code d'un tangiblee-mapper.js avec les propriétés suivantes configurées dans le script :
- SKU unique sur le PDP
- Un Locale actif
- Pas de fenêtre contextuelle sur le prix/la devise ou l'ATC
- Pas de suivi des commandes
<!-- 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>
[.mauvais]Veuillez noter : il ne s'agit pas de votre extrait d'intégration, mais d'un exemple pour les besoins de ce guide. Votre point de contact Tangiblee partagera un extrait d'intégration spécifique à votre site Web pendant le processus d'intégration. [.bad]
Plusieurs SKU sur PDP - Intégration semi-gérée
Dans cet exemple, vous pouvez voir un tangiblee-mapper.js qui gère un cas d'utilisation de plusieurs SKU sur le PDP. En outre, d'autres fonctionnalités tangibles sont configurées, telles que le suivi des commandes.
Pour obtenir la liste complète des options et paramètres de personnalisation que vous pouvez utiliser dans tangiblee-mapper.js veuillez consulter le Présentation de l'API article dans la section Documentation de l'API de la base de connaissances.
Vous trouverez ci-dessous un exemple de code d'un tangiblee-mapper.js avec les propriétés suivantes configurées dans le script :
- Deux références sur le PDP
- Un Locale actif
- Fenêtre contextuelle prix/monnaie/ATC
<!-- 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>
[.mauvais]Veuillez noter : il ne s'agit pas de votre extrait d'intégration, mais d'un exemple pour les besoins de ce guide. Votre point de contact Tangiblee partagera un extrait d'intégration spécifique à votre site Web pendant le processus d'intégration. [.bad]
