Parámetros y devoluciones de llamadas

Los parámetros y las devoluciones de llamada que se describen en el artículo siguiente suelen configurarse en el archivo de integración que asigna la lógica del PDP (página de detalles del producto en el sitio web del cliente) a la lógica de la plataforma Tangiblee; este archivo normalmente se denomina tangiblee-mapper.js.

Para tangiblee-mapper.js para que funcione correctamente, la etiqueta de script de la API de Tangiblee debe incluirse en la página web. Todos los parámetros y devoluciones de llamada de este artículo se basan en tener el script de la API de Tangiblee disponible y cargado.

Este es un ejemplo de cómo incluir el script de la API de Tangiblee para que sus métodos estén disponibles para su uso en tangiblee-mapper.js:

<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>

[.malo]IMPORTANTE: El script de API de Tangiblee se actualiza de vez en cuando con versiones más recientes. Si utilizas una integración semigestionada o de autoservicio, asegúrate de utilizar la versión más reciente del script de API de Tangiblee. Pregúntale a tu administrador de cuentas si no estás seguro. [.bad]

Clientes que utilizan la integración gestionada (etiqueta de una línea que envuelve el tangiblee-mapper.js) no tiene que preocuparse por el script de la API de Tangiblee ni por ninguno de los parámetros y devoluciones de llamada de este artículo, el equipo de Tangiblee mantiene la tangiblee-mapper.js para ti, incluido junto con el script de la API de Tangiblee (tangible.min.js) en un solo paquete electrónico tangible.min.js archivo.

Si utilizas una integración semigestionada, el equipo de Tangiblee se asegurará de incluir la etiqueta de script de la API de Tangiblee y el tangiblee-mapper.js. Si se actualiza el script de la API de Tangiblee, el equipo de Tangiblee se pondrá en contacto con usted para proporcionarle información sobre la nueva versión y las notas de publicación.

Por último, para la integración de autoservicio, donde usted implementa su propia tangiblee-mapper.js, asegúrate de incluir la versión más reciente del script de la API de Tangiblee en tu PDP. Si no estás seguro de cuál es su ruta, pregunta a tu administrador de cuentas para obtener más información.

SKU y catálogo

SKU de inicio (SKU: array)

StartOnSkus es el parámetro más importante del documento.

[.malo]Obligatorio: Este parámetro debe configurarse para que la integración de Tangiblee funcione. [.bad]

Este parámetro es el primero, pero se recomienda añadirlo en último lugar en el script de integración para garantizar que todos los demás parámetros de Tangiblee estén configurados cuando se llame. Este parámetro transfiere los ID de SKU que están disponibles en el script de API de PDP a Tangiblee.

Cada vez que el Startons SKU se establece el parámetro, el script de la API de Tangiblee valida que los SKU existen y están listos en la plataforma de Tangiblee.

Esto lo hace un HTTP GET solicitud a https://api.tangiblee.com; a continuación se muestra un ejemplo:

https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com&locale=en-US

Cuando el script API de Tangiblee recibe la respuesta HTTP GET, se activa. OnSKU validado () evento. Tras recibir la respuesta HTTP GET, el script de la API de Tangiblee está listo para determinar qué SKU está ahora activo y debe mostrarse en Tangiblee UX.

En un caso sencillo en el que solo hay un SKU en un PDP, el Starton SKU () está configurado en un solo SKU que está activo de forma predeterminada. En este caso, no es necesario configurarlo de forma explícita SKU activo ().

Si hay varios SKU en el PDP, Starton SKU () debe configurarse en un gama de todos los SKU disponibles actualmente en el PDP. SKU activo () luego debe configurarse y definir qué SKU de la matriz deben seleccionarse de forma predeterminada.

Por eso es importante establecer siempre el SKU activo () delante de Starton SKU () en caso de que haya varios SKU disponibles en el PDP.

La lista de SKU establecida en Starton SKU () debe contener el SKU establecido como SKU activo (), por ejemplo:

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);

[.good] En el ejemplo anterior, el script API de Tangiblee enviará una solicitud HTTP GET con 3 SKU proporcionados y, cuando llegue la respuesta, se elegirá el producto 'WHITE_PRODUCT_SKU' para mostrarlo en Tangiblee UX. [.good]

[.good] Esto solo ocurrirá si Tangiblee ha aprobado 'WHITE_PRODUCT_SKU'; de lo contrario Ocultar CTA () se llamará a la función de devolución de llamada. [.good]

El siguiente ejemplo muestra cómo configurar el script de la API de Tangiblee con un producto que se selecciona de forma predeterminada cuando se carga el PDP. Cuando un usuario cambia el producto activo en un PDP, no es necesario configurarlo Starton SKU () de nuevo si el nuevo SKU activo está en la lista del anterior Starton SKU () declaración.

Basta con establecer un nuevo SKU activo configurando SKU activo () de nuevo, es decir:

// PDP loaded, 'WHITE_PRODUCT_SKU' is a default SKU
tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

// Tangiblee API script configured to use following SKUs available on the PDP:
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);
...
// In a while, the user changes the color of the active product on the PDP, for example, to 'LIME_PRODUCT_SKU'.
// Tangiblee API script is configured to display new active SKU in Tangiblee UX:
tangiblee('activeSKU', 'LIME_PRODUCT_SKU');

Si Tangiblee aprueba el SKU activo, se realizarán las siguientes acciones:

1. Mostrar CTA () se llama a la función de devolución de llamada.
2. Se muestra una vez () el evento se activa cuando se muestra CTA.

Si el PDP es un Aplicación de una sola página (SPA) entonces Starton SKU () debe configurarse cada vez la lista disponible de los SKU de PDP cambia. Lo mismo se aplica a la SKU activo () - debe configurarse cada vez que se actualice el SKU activo. - Ambos Starton SKU () y SKU activo () se puede llamar tantas veces como sea necesario.

‍

Notas importantes sobre el uso de parámetros y devoluciones de llamada en los SPA:

• SKU activo () debe configurarse delante de Starton SKU () cada vez que Starton SKU () está configurado en una nueva lista de SKU. Entonces SKU activo () se puede configurar tantas veces como sea necesario hasta que se establezca en uno de los SKU de la lista definida por el último Starton SKU () declaración.
• Starton SKU () realizará la solicitud HTTP GET y esperará la respuesta. No debe configurarse con frecuencia en un período corto de tiempo.‍

dominio (dominio:cadena)

[.malo]Obligatorio: Este parámetro debe implementarse para que la integración de Tangiblee funcione. [.bad]

Establece el dominio para todas las solicitudes de API a la plataforma Tangiblee.

La combinación de dominio param con el SKUs matriz (establecida como parámetro) Starton SKU ()) es un identificador único para los SKU de la plataforma de Tangiblee. Este identificador se usa para:

• Valide qué SKU están realmente disponibles en la plataforma Tangiblee para mostrarlos en el PDP.
• Extraiga la configuración de Tangiblee UX para el SKU específico.
• Redacta la URL del iframe de Tangiblee para el SKU específico.
• Recopile datos de análisis, uso y rendimiento del comercio electrónico.

[.bueno]Recordatorio: cada solicitud a los servidores de Tangiblee utiliza el dominio + el ID de SKU como identificador único de un SKU del catálogo del cliente. [.good]

tangiblee('domain', 'www.tangiblee-integration.com');

‍

Privacidad

Uso de cookies (uso de cookies: bool)

‍

Determina si Tangiblee UX puede utilizar cookies.

Si Usa cookies establecido en FALSO y luego:

• Google Analytics no recopilará ningún dato.
• Tangiblee no guardará ningún dato de usuario entre visitas al PDP, es decir, la función Historial de Tangiblee no estará disponible.

tangiblee('useCookies', false);

iframe Colocación

contenedor (contenedor:cadena)

‍

Determina si el iframe de Tangiblee debe mostrarse en una ventana emergente de Tangiblee o en cualquier otra ventana modal o incrustado directamente en un elemento determinado de un PDP.

De forma predeterminada, el iframe de Tangiblee se coloca en un .contenedor de marcos modales tangibles elemento. La ventana modal tangible no se creará si se establece cualquier otro selector de CSS.

// in this example the Tangiblee modal dialog will not be created
// and Tangiblee UX will be placed inside #tangiblee_app element
tangiblee('container', '#tangiblee_app');

‍

Devoluciones de llamadas de CTA (llamada a la acción)

ShowCTA (ShowCTA: función)

‍

[.malo]Obligatorio: Este parámetro debe implementarse para que la integración de Tangiblee funcione. [.bad]

Define el aspecto que deben tener los CTA (o CTA) de Tangiblee, tanto en términos de imágenes (imagen, texto, etc.) como de ubicación en el PDP.

Es posible que la CTA (o las CTA) ya existan en el código HTML (por ejemplo, un marcador de posición) y estén ocultas de forma predeterminada; si ese es el caso, ShowCTA define las acciones necesarias para que la CTA sea visible.

Devoluciones

var showCTA = function(activeSKU, thumbUrl) {
     var ctaCssClass = 'tangiblee-cta',
         cta = document.getElementsByClassName(ctaCssClass)[0];
     if (cta) {
         cta.style.display = 'block';
     } else {
         var cta = document.createElement('button');
         cta.className = ctaCssClass;
         cta.innerText = 'Will it fit?';
         cta.style.backgroundImage = 'url(' + thumbUrl + ')';
         //...
         document.body.appendChild(cta);
     }
     return ctaCssClass;
};
tangiblee('showCTA', showCTA);

Puede haber cualquier cantidad de CTA colocadas en el mismo PDP al mismo tiempo.

Por ejemplo, hay 2 SKU en un PDP: sku-black y sku-white. El PDP tiene 2 CTA, una para cada SKU, con fondo blanco y negro respectivamente.

var showCTA = function(activeSKU, thumbUrl) {
    var ctaCssClass = 'tangiblee-cta',
        CTAs = document.querySelectorAll(ctaCssClass);
    if (CTAs.length) {
        for (var i = 0; i < CTAs.length; i++) {
            CTAs[i].style.display = 'block';
        }
    } else {
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-black';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'black';
        //...
        document.body.appendChild(cta);
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-white';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'white';
        //...
        document.body.appendChild(cta);
    }
    return ctaCssClass;
};

// Set active SKU depending on which CTA is clicked
var onCtaClicked = function(cta) {
    if (cta.className.indexOf('black') > -1) {
        tangiblee('activeSKU', 'sku-black');
    }
    if (cta.className.indexOf('white') > -1) {
        tangiblee('activeSKU', 'sku-white');
    }
}

tangiblee('showCTA', showCTA);
tangiblee('onCtaClicked', onCtaClicked);

‍

HiDecta (HiDecta: función)

Define cómo se deben eliminar los CTA (o CTA) de Tangiblee del PDP.

Esta función de devolución de llamada se puede omitir si solo hay un SKU en un PDP y la ubicación de la CTA de Tangiblee no cambia cuando un usuario interactúa con un PDP (por ejemplo, hace clic en los menús desplegables, las variaciones de color, etc.). Si las CTA se deben crear en el lado del cliente mediante código JavaScript, esta es la función que debería eliminar correctamente la CTA de Tangiblee. El SKU activo pasó a la función como primer parámetro.

var hideCTA = function(activeSKU) {
     var cta = document.getElementsByClassName('tangiblee-cta')[0];
     if (cta) {
         cta.parentNode.removeChild(cta);
     }
};
tangiblee('hideCTA', hideCTA);

‍

Personalización de UX

WidgetVersion (WidgetVersion: cadena)

‍

Establece una versión de Tangiblee UX y determina la versión de UX cargada cuando se muestra Tangiblee.

[.bueno]NOTA: v3 es la versión más actualizada de Tangiblee UX y es el valor recomendado para este parámetro [.good]

tangiblee('widgetVersion', 'v3');

‍

Sincronización de los cambios de PDP con Tangiblee UX

ActiveSKU (activeSKU: cadena)

‍

Es útil cuando hay más de un SKU en el PDP aprobado por Tangiblee.

Este parámetro se puede omitir si solo hay un SKU en el PDP. Por favor, consulta Starton SKU () sección de documentación para obtener más información sobre el uso Starton SKU () y SKU activo () juntos.

Debe configurarse cada vez que se cambie un SKU activo en el PDP.

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

‍

ActiveLocale (ActiveLocale: cadena)

Este parámetro establece ActiveLocale del documento activo. Se usa para identificar una versión localizada del SKU si hay más de un ActiveLocale configurado para el sitio web del cliente.

document.documentElement.lang se usa de forma predeterminada.

Debe configurarse cada vez que se cambie la configuración regional activa en el PDP.

tangiblee('activeLocale', 'en-US');

‍

ActivePrice (ActivePrice: cadena)

Establece el precio del SKU en Tangiblee UX.

Debe configurarse cada vez que se cambie el precio de un SKU activo en el PDP.

tangiblee('activePrice', '42');

‍

ActiveCurrency (ActiveCurrency: cadena)

Establece la moneda activa utilizada en Tangiblee UX.

Debe configurarse cada vez que se cambie la moneda del SKU activo en el PDP.

tangiblee('activeCurrency', '$');

‍

ActiveAtc (ActiveAtc: cadena)

Establece el selector de añadir al carrito (ATC) activo en el PDP. Si el botón ATC está visible en Tangiblee UX, al hacer clic en ese ATC, se activará el selector establecido como ATC activo.

Debe configurarse cada vez que se cambie el selector de añadir al carrito (ATC) del SKU activo en el PDP.

tangiblee('activeATC', '.btn-cart');

‍

Integración de Google Analytics (integración de GA)

Las etiquetas de integración gestionada, semigestionada y de autoservicio solo contienen código API genérico de Tangiblee Analytics, pero no el código de mapeo de Tangiblee Analytics. El código genérico de la API de Tangiblee Analytics permite rastrear parámetros comunes como las páginas vistas. Se debe crear el código de mapeo de Tangiblee Analytics para realizar el seguimiento de los pedidos. Por lo general, contiene el código necesario para enviar los datos del pedido al sistema de análisis.

El código de mapeo de Tangiblee Analytics debe añadirse a las páginas correspondientes (página de agradecimiento, página de revisión de pedidos, etc.) mediante la etiqueta independiente de Tangiblee Analytics.

Consulte la Recopilación de métricas de rendimiento tangibles sección para obtener más detalles sobre cómo agregar la etiqueta Tangiblee Analytics a las páginas web y configurarla.