Integración de autoservicio
No se recomienda la integración de autoservicio, excepto en casos de uso muy específicos.
Tangiblee recomienda integración gestionada para el 95% de nuestros clientes. Mediante una integración gestionada, Tangiblee gestiona el control de calidad y es responsable de garantizar que la CTA y el modo de Tangiblee se ajusten a los cambios e implementaciones continuos de los clientes. Sin embargo, es importante tener en cuenta que debes avisar 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.
¿Cuál es un posible caso de uso para la integración de autoservicio?
Si aprovechas una aplicación web progresiva que se ejecuta sobre tu plataforma de comercio electrónico existente, es recomendable utilizar la integración de autoservicio. Sin embargo, le recomendamos que mantenga una conversación con el equipo de ingeniería de Tangiblee para describir todas las posibles opciones de integración.
En el caso de una integración de autoservicio, el cliente implementa su propio código de mapeo (tangiblee-mapper.js) y tiene el control total de su lógica.
La integración de autoservicio 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. Si las etiquetas de Tangiblee se añaden mediante Administrador de etiquetas de Google (GTM) entonces GTM lo gestiona automáticamente.
Por ejemplo, si un cliente necesita dos versiones del fragmento para admitir dos entornos diferentes, como PRD y STD, puede hacerlo mediante el uso de dos versiones distintas tangiblee-mapper.js archivos para los entornos PRD y STG.
Integración de autoservicio típica
Este es un ejemplo de integración de autoservicio: Ejemplo de enlace de autoservicio básico.
El tangiblee-mapper.js es similar a Ejemplo de la versión PDP de Managed Integration Production pero ahora escrito por el cliente y alojado en el PDP directamente en lugar de cargarlo desde Tangiblee CDN.
[.good] Solo genéricos API tangible las llamadas se realizan a la CDN de Tangiblee, lo que equivale a un viaje de ida y vuelta menos para cargar el mapper.js del CDN Tangiblee. [.bueno]
- Un SKU en un PDP
- Un lugar activo
- Sin precio/divisa/ATC en el widget
- Sin seguimiento de pedidos
*`<!-- 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>`Integración de autoservicio con múltiples SKU y múltiples ubicaciones
Ejemplo de integración avanzada de autoservicio: Ejemplo de enlace de integración de autoservicio avanzado.
Al igual que en el ejemplo anterior, también en el ejemplo avanzado, el cliente escribe el código de mapeo y lo aloja en el PDP del cliente.
Este ejemplo muestra cómo usar Tangiblee en:
- Varios SKU en un PDP (en este caso, dos).
- Múltiples ubicaciones
- Widget integrado de precio/divisa/ATC
- Seguimiento de pedidos en la página de agradecimiento
*`<!-- 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>`