NOTA: Tangiblee no recomienda esta opción.
Según nuestra experiencia, recomendaríamos Integración gestionada debido al hecho de que la integración semigestionada requiere que su equipo de desarrollo sea responsable de garantizar que la funcionalidad de Tangiblee sea compatible con cada nueva implementación y cambio en el diseño de la página.
A través de la integración gestionada, Tangiblee ejecuta el control de calidad y es responsable de garantizar que la CTA y el modal de Tangiblee se ajusten a sus cambios e implementaciones continuos. Sin embargo, es importante tener en cuenta que debes notificar a Tangiblee (success@tangiblee.com) si tienes algún cambio en curso en la página de diseño del producto o en el cambio de plataforma que debamos tener en cuenta. De lo contrario, solo veremos ese cambio en la página una vez que esté en producción y la CTA de Tangiblee no aparecerá hasta que actualicemos nuestra cartografía para reflejar estos cambios.
Con esta opción, el equipo de Tangiblee desarrolla la implementación inicial del código de mapeo (también conocido como tangiblee-mapper.js) adaptando Tangiblee al diseño y la estructura de PDP de su sitio web.
La integración semigestionada consta de dos bloques de código:
- Código de mapeo (tangiblee-mapper.js)
- Código API tangible (tangible.min.js)
<body>Tangiblee recomienda colocar esa etiqueta en el mismo lugar donde se agregan las demás etiquetas de Javascript a la página; puede ser al final de la sección <head>o. Tangiblee no recomienda la instalación de GTM dado que últimas actualizaciones en IOS17.
Su equipo de TI instala tangiblee-mapper.js ya sea como una etiqueta o lo aloja como un archivo y lo agrega directamente a su sitio web. De ahora en adelante, su departamento de TI tendrá el control total sobre tangiblee-mapper.js para personalizar Tangiblee y, cuando sea necesario, actualizarlo de acuerdo con los cambios en la estructura del PDP. Más detalles sobre la posible personalización de tangiblee-mapper.js se puede encontrar en el Introducción a la API artículo en la sección de documentación de la API.
[.bueno]IMPORTANTE: Antes de instalar el tangiblee-mapper.js comprueba que el selector de ID de SKU es correcto y coincide con la estructura del PDP. Si no coincide, ponte en contacto con tu administrador de cuentas lo antes posible para solucionarlo. [.good]
Si necesita instalar Tangiblee en diferentes entornos con diferentes configuraciones (por ejemplo, STG, PRD), simplemente duplique el tangiblee-mapper.js y actualízalo con los cambios de configuración. A continuación se muestran dos ejemplos de tangiblee-mapper.js admite diferentes configuraciones. Además, más detalles sobre la posible personalización de tangiblee-mapper.js se puede encontrar en el Introducción a la API artículo en la sección de documentación de la API.
SKU único (típico): integración semigestionada
Este es un ejemplo de integración semigestionada: Ejemplo típico de PDP semigestionado.
El tangiblee-mapper.js es similar a Ejemplo de PDP de integración gestionada pero está escrito por Tangiblee y alojado directamente en el PDP en lugar de cargarlo desde Tangiblee CDN.
[.good] Solo se realizan llamadas genéricas a la API de Tangiblee a la CDN de Tangiblee, lo que se traduce en guardar un viaje de ida y vuelta a la CDN de Tangiblee para cargar el tangiblee-mapper.js. [.bueno]
A continuación se muestra un ejemplo de código de tangiblee-mapper.js con las siguientes propiedades configuradas en el script:
- SKU único en el PDP
- Un lugar activo
- Sin ventana emergente de precio/divisa/ATC
- Sin seguimiento de pedidos
<!-- 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>
[.malo]Tenga en cuenta: este no es tu fragmento de integración, sino un ejemplo para esta guía. Tu punto de contacto de Tangiblee compartirá un fragmento de integración específico para tu sitio web durante el proceso de incorporación. [.bad]
Varios SKU en PDP: integración semigestionada
En este ejemplo, puede ver un aspecto más complejo tangiblee-mapper.js que gestiona un caso de uso de más de un SKU en el PDP. Además, se configuran más funciones de Tangiblee, como el seguimiento de pedidos.
Para obtener una lista completa de las opciones y parámetros de personalización que puede usar en tangiblee-mapper.js por favor, consulte el Introducción a la API artículo en la sección de documentación de la API de la base de conocimientos.
A continuación se muestra un ejemplo de código de tangiblee-mapper.js con las siguientes propiedades configuradas en el script:
- Dos SKU en el PDP
- Un lugar activo
- Ventana emergente de precio/divisa/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>
[.malo]Tenga en cuenta: este no es tu fragmento de integración, sino un ejemplo para esta guía. Tu punto de contacto de Tangiblee compartirá un fragmento de integración específico para tu sitio web durante el proceso de incorporación. [.bad]
