Les paramètres et les rappels décrits dans l'article ci-dessous sont généralement définis dans le fichier d'intégration qui mappe la logique du PDP (page détaillée du produit sur le site Web du client) à la logique de la plate-forme Tangiblee. Ce fichier est généralement nommé tangiblee-mapper.js.

Pour tangiblee-mapper.js pour fonctionner correctement, la balise de script de l'API Tangiblee doit être incluse sur la page Web. Tous les paramètres et rappels de cet article dépendent de la disponibilité et du chargement du script de l'API Tangiblee.

Voici un exemple de la façon d'inclure le script d'API Tangiblee afin que ses méthodes puissent être utilisées dans tangiblee-mapper.js :

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

[.mauvais]IMPORTANT: le script d'API Tangiblee est parfois mis à jour avec de nouvelles versions. Si vous utilisez une intégration semi-gérée ou en libre-service, assurez-vous d'utiliser la dernière version du script d'API Tangiblee. Demandez à votre chargé de compte si vous n'êtes pas sûr. [.bad]

Clients utilisant Managed Integration (balise d'une ligne qui enveloppe le tangiblee-mapper.js) n'ont pas à vous soucier du script de l'API Tangiblee ou de l'un des paramètres et des rappels de cet article, l'équipe de Tangiblee gère le tangiblee-mapper.js pour vous, fourni avec le script d'API Tangiblee (tangible.min.js) en un seul bundle tangible.min.js dossier.

Si vous utilisez une intégration semi-gérée, l'équipe de Tangiblee veillera à inclure la balise de script de l'API Tangiblee et le tangiblee-mapper.js. Si le script de l'API Tangiblee est mis à jour, l'équipe de Tangiblee vous contactera pour vous fournir des détails sur la nouvelle version et des notes de publication.

Enfin, pour l'intégration en libre-service, où vous implémentez votre propre tangiblee-mapper.js, assurez-vous d'inclure la dernière version du script d'API Tangiblee dans votre PDP, demandez plus de détails à votre chargé de compte si vous n'êtes pas sûr de son chemin.

SKU et catalogue

StartOnSKUs (skus:array)

StartOnSkus est le paramètre le plus important du document.

[.mauvais]obligatoire: Ce paramètre doit être défini pour que l'intégration de Tangiblee fonctionne. [.bad]

Ce paramètre est le premier, mais il est recommandé de l'ajouter en dernier dans le script d'intégration pour s'assurer que tous les autres paramètres de Tangiblee sont définis au moment de son appel. Ce paramètre transmet les ID SKU disponibles dans le script d'API PDP à Tangiblee.

À chaque fois que Commencez sur SKUS Le paramètre est défini, le script de l'API Tangiblee valide que les SKU existent et sont prêts sur la plateforme Tangiblee.

Cela est fait par un HTTP GET demande à https://api.tangiblee.com ; voici un exemple :

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

Lorsque le script de l'API Tangiblee reçoit la réponse HTTP GET, il se déclenche OnSkusValidated () événement. Après avoir reçu la réponse HTTP GET, le script de l'API Tangiblee est prêt à déterminer quel SKU est désormais actif et doit être affiché dans Tangiblee UX.

Dans un cas simple, lorsqu'il n'y a qu'un seul SKU sur un PDP, le Commencez par SKU () est défini sur un seul SKU qui est actif par défaut. Dans ce cas, il n'est pas nécessaire de définir explicitement SKU actif ().

S'il existe plusieurs SKU sur le PDP, alors Commencez par SKU () doit être réglé sur gamme de tous les SKU actuellement disponibles sur le PDP. SKU actif () alors doit être défini et définit les SKU de la baie qui doivent être sélectionnés par défaut.

C'est pourquoi il est important de toujours régler le SKU actif () avant Commencez par SKU () au cas où plusieurs SKU seraient disponibles sur le PDP.

La liste des SKU définie sur Commencez par SKU () doit contenir le SKU défini comme SKU actif (), par exemple :

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

[.good] Dans l'exemple ci-dessus, le script de l'API Tangiblee enverra une requête HTTP GET avec 3 SKU fournis et lorsque la réponse arrivera, le produit « WHITE_PRODUCT_SKU » sera choisi pour être affiché dans Tangiblee UX. [.good]

[.good] Cela ne se produira que si « WHITE_PRODUCT_SKU » a été approuvé par Tangiblee, sinon HideCTA () la fonction de rappel sera appelée. [.good]

L'exemple ci-dessous montre comment configurer le script d'API Tangiblee avec un produit sélectionné par défaut lors du chargement du PDP. Lorsqu'un utilisateur modifie le produit actif sur un PDP, il n'est pas nécessaire de définir Commencez par SKU () à nouveau si le nouveau SKU actif figure dans la liste de la précédente Commencez par SKU () déclaration.

Il suffit de définir un nouveau SKU actif en réglant SKU actif () encore une fois, c'est-à-dire :

// 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 le SKU actif est approuvé par Tangiblee, les actions suivantes seront effectuées :

1. Afficher le CTA () la fonction de rappel est appelée.
2. Oncta montré () l'événement est déclenché lorsque le CTA est affiché.

Si le PDP est un Application d'une seule page (SPA) alors Commencez par SKU () doit être réglé à chaque fois la liste disponible des modifications apportées aux SKU PDP. Il en va de même pour le SKU actif () - il doit être défini à chaque fois que le SKU actif est mis à jour. Les deux Commencez par SKU () et SKU actif () peut être appelé autant de fois que nécessaire.

‍

Remarques importantes concernant l'utilisation des paramètres et des rappels sur les SPA :

• SKU actif () doit être réglé avant Commencez par SKU () chaque fois que Commencez par SKU () est paramétré sur une nouvelle liste de SKU. Puis SKU actif () peut être défini autant de fois que nécessaire jusqu'à ce qu'il soit réglé sur l'un des SKU de la liste définie par le dernier Commencez par SKU () déclaration.
• Commencez par SKU () exécutera la requête HTTP GET et attendra la réponse. Il ne doit pas être réglé souvent sur une courte période.‍

domaine (domaine:chaîne)

[.mauvais]obligatoire: Ce paramètre doit être implémenté pour que l'intégration de Tangiblee fonctionne. [.bad]

Définit le domaine pour toutes les demandes d'API adressées à la plateforme Tangiblee.

La combinaison des domaine param avec le SKUs tableau (défini comme paramètre) Commencez par SKU ()) est un identifiant unique pour les SKU sur la plateforme de Tangiblee. Cet identifiant est utilisé pour :

• Validez quels SKU sont réellement disponibles sur la plateforme Tangiblee pour les afficher sur le PDP.
• Extrayez la configuration de Tangiblee UX pour le SKU spécifique.
• Composez l'URL tangible de l'iframe pour le SKU spécifique.
• Collectez des données d'analyse, d'utilisation et de performance du commerce électronique.

[.bien]Rappel: chaque demande adressée aux serveurs Tangiblee utilise le domaine + l'ID SKU comme identifiant unique d'un SKU dans le catalogue du client. [.good]

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

‍

Confidentialité

Utiliser des cookies (utiliser des cookies : bool)

‍

Détermine si les cookies peuvent être utilisés par Tangiblee UX.

Si Utiliser des cookies réglé sur FALSE puis :

• Google Analytics ne collectera aucune donnée.
• Tangiblee n'enregistrera aucune donnée utilisateur entre les visites du PDP, c'est-à-dire que la fonction Historique de Tangiblee ne sera pas disponible.

tangiblee('useCookies', false);

iframe Placement

conteneur (conteneur:chaîne)

‍

Détermine si l'iframe tangible doit être affiché dans une fenêtre contextuelle tangible ou dans toute autre fenêtre modale/intégré directement à un élément donné sur un PDP.

Par défaut, l'iframe Tangiblee est placé dans un .tangiblee-modal-iframe-container élément. La fenêtre modale tangible ne sera pas créée si un autre sélecteur CSS est défini.

// 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');

‍

Rappels CTA (appel à l'action)

ShowCTA (ShowCTA : fonction)

‍

[.mauvais]obligatoire: Ce paramètre doit être mis en œuvre pour que l'intégration de Tangiblee fonctionne. [.bad]

Définit à quoi doivent ressembler les CTA tangibles (ou CTA), à la fois en termes de visuels (image, texte, etc.) et en termes de placement sur le PDP.

Le CTA (ou les CTA) peut déjà exister dans le code HTML (par exemple un espace réservé) et être masqué par défaut. Si tel est le cas, ShowCTA définit les actions nécessaires pour rendre le CTA visible.

Retours

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);

Un certain nombre de CTA peuvent être placés simultanément sur le même PDP.

Par exemple, un PDP comporte 2 SKU : sku-black et sku-white. Le PDP comporte 2 CTA, un pour chaque SKU, sur fond noir et blanc respectivement.

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 : fonction)

Définit comment les CTA tangibles (ou CTA) doivent être supprimés du PDP.

Cette fonction de rappel peut être omise s'il n'y a qu'un seul SKU sur un PDP et que le placement du CTA de Tangiblee ne change pas lorsqu'un utilisateur interagit avec le PDP (par exemple, en cliquant sur des listes déroulantes, des variations de couleur, etc.). Si le ou les CTA doivent être créés côté client via du code JavaScript, c'est la fonction qui doit supprimer correctement le CTA tangible. Le SKU actif a été transmis à la fonction en tant que premier paramètre.

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

‍

Personnalisation de l'UX

Version du widget (Version du widget : chaîne)

‍

Définit une version de Tangiblee UX et détermine la version de l'UX chargée lorsque Tangiblee est affiché.

[.bien]REMARQUE: la v3 est la version la plus récente de Tangiblee UX et constitue la valeur recommandée pour ce paramètre [.good]

tangiblee('widgetVersion', 'v3');

‍

Synchronisation des modifications du PDP avec Tangiblee UX

ActiveSKU (ActiveSKU : chaîne)

‍

Utile lorsque le PDP contient plus d'un SKU approuvé par Tangiblee.

Ce paramètre peut être omis s'il n'y a qu'un seul SKU sur le PDP. Veuillez vous référer à Commencez par SKU () section de documentation pour plus de détails sur l'utilisation Commencez par SKU () et SKU actif () ensemble.

Il doit être défini chaque fois qu'un SKU actif est modifié sur le PDP.

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

‍

ActiveLocale (ActiveLocale:String)

Ce paramètre définit le document actif ActiveLocale. Utilisé pour identifier une version localisée du SKU s'il existe plus d'un ActiveLocale configuré pour le site Web du client.

Document.DocumentElement.lang utilisé par défaut.

Il doit être défini à chaque fois que la locale active est modifiée sur le PDP.

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

‍

ActivePrice (ActivePrice : String)

Définit le prix du SKU dans Tangiblee UX.

Il doit être défini chaque fois que le prix d'un SKU actif est modifié sur le PDP.

tangiblee('activePrice', '42');

‍

ActiveCurrency (ActiveCurrency:String)

Définit la devise active utilisée dans Tangiblee UX.

Il doit être défini chaque fois que la devise du SKU actif est modifiée sur le PDP.

tangiblee('activeCurrency', '$');

‍

ActiveATC (ActiveATC:String)

Définit le sélecteur d'ajout au panier (ATC) actif dans le PDP. Si le bouton ATC est visible dans Tangiblee UX, cliquer sur cet ATC déclenchera le sélecteur défini comme ATC actif.

Il doit être défini chaque fois que le sélecteur d'ajout au panier (ATC) du SKU actif est modifié sur le PDP.

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

‍

Intégration de Google Analytics (intégration GA)

Les balises d'intégration en libre-service, semi-gérée et gérée contiennent uniquement du code d'API Tangiblee Analytics générique, mais pas le code de mappage de Tangiblee Analytics. Le code d'API générique de Tangiblee Analytics permet de suivre des paramètres courants tels que les pages vues. Le code de mappage de Tangiblee Analytics doit être créé pour effectuer le suivi des commandes. Il contient généralement le code nécessaire pour envoyer les données de commande au système Analytics.

Le code de mappage de Tangiblee Analytics doit être ajouté aux pages pertinentes (page de remerciement, page de révision des commandes, etc.) à l'aide de la balise Tangiblee Analytics distincte.

Veuillez vous référer au Collecte de mesures de performance tangibles section pour plus de détails sur la façon d'ajouter la balise Tangiblee Analytics aux pages Web et de la configurer.