Aller au contenu principal

Intégration de Tealium pour le Commerce Électronique

Ce guide vous accompagne dans le processus d'intégration avec Rokt en utilisant Tealium. Vous apprendrez à créer des variables dans Tealium basées sur votre couche de données, et comment créer des balises pour initialiser le SDK Rokt et insérer des emplacements.

Comprendre la couche de données​

La couche de données devrait avoir été implémentée sur votre page web par vos développeurs.

Une couche de données est un objet qui contient toutes les informations que vous souhaitez partager avec Tealium. Les variables peuvent être partagées avec Tealium via la couche de données ou dans les déclarations de changement de vue subséquentes.

Consultez le guide du développeur Tealium pour des détails complets sur le fonctionnement de la couche de données.

Exemple d'une couche de données :

window.utag_data = window.utag_data || {}

utag_data['email_address'] = 'test@test.com'
utag_data['first_name'] = 'john'
utag_data['last_name'] = 'doe'

Définir le déclencheur de vue​

Pour déclencher l'événement approprié, utilisez le code suivant dans votre application lors d'un événement d'achat :

utag.view({tealium_event : 'purchase', email_address : 'john.doe@example.com', amount:'20.00', currency:'USD', confirmationref:'123456789'})

L'événement "purchase" sera résolu vers la destination que vous configurez dans "Mapped Variables", par exemple Achat, Sac, Caisse, etc..

Initialiser le SDK Rokt​

  1. Connectez-vous à votre compte Tealium.
  2. Cliquez sur Tags dans la navigation de gauche.
  3. Cliquez sur le bouton New Tag sur le côté droit, puis sélectionnez Tealium Custom Container.
  4. Entrez un nom de description pour votre tag, comme "SDK Rokt".
  5. Sous Edit Template, collez l'extrait d'initialisation du SDK fourni ci-dessous.
  6. Remplacez api_key dans u.data par la clé API Rokt fournie par votre gestionnaire de compte Rokt.
  7. Cliquez sur Enregistrer.

Extrait d'initialisation du SDK​

//~~tv:20010.20230630
//~~tc: Tealium Custom Container
//~~tc: Updated Tealium loader to 4.35 version

/*
  Notes du Tealium Custom Container :
  - Ajoutez le code d'envoi entre "Start Tag Sending Code" et "End Tag Sending Code".
  - Ajoutez le code de bibliothèque de tag JavaScript entre "Start Tag Library Code" et "End Tag Library Code".
  - N'ajoutez que du code JavaScript, n'ajoutez pas de code HTML dans ce fichier.
  - Supprimez toutes les balises <script> et </script> du code que vous placez dans ce fichier.

  Chargement de fichiers JavaScript externes (Loader) :
  - Si vous avez besoin de charger un fichier JavaScript externe supplémentaire, décommentez les commentaires JavaScript sur une seule ligne ("//") dans les sections suivantes du Loader près du bas de ce fichier :
      - "Start Loader Function Call"
      - "End Loader Function Call"
      - "Start Loader Callback Function"
      - "End Loader Callback Function"
  - Après avoir décommenté, insérez le chemin du fichier JavaScript externe que vous souhaitez charger.
  - Enfin, dans la fonction de rappel du Loader, insérez le code JavaScript qui doit s'exécuter après le chargement du fichier JavaScript externe.
*/

/* Start Tag Library Code */
window.mParticle = window.mParticle || {};
window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 };
window.mParticle.eCommerce = { Cart: {} };
window.mParticle.Identity = {};
window.mParticle.Rokt = {};
window.mParticle.config = window.mParticle.config || {};
window.mParticle.config.rq = [];
window.mParticle.config.snippetVersion = 2.7;

window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); };
["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; });
["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; });
["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; });
["selectPlacements","hashAttributes","setExtensionData","use","getVersion","terminate"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; });

/* Fin du code de la bibliothèque de balises */

//tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. Tous droits réservés.
try {
  (function (id, loader) {
    var u = {};
    var src;
    utag.o[loader].sender[id] = u;

    // Veuillez ne pas modifier
    if (utag.ut === undefined) { utag.ut = {}; }
    // Démarrage du chargeur Tealium 4.35
    if (utag.ut.loader === undefined) {
      u.loader = function (o) {
        var b, c, l, a = document;
        if (o.type === "iframe") {
          b = a.createElement("iframe");
          o.attrs = o.attrs || { "height" : "1", "width" : "1", "style" : "display:none" };
          for (l in utag.loader.GV(o.attrs)) { b.setAttribute( l, o.attrs[l] ); }
          b.setAttribute("src", o.src);
        } else if (o.type=="img") {
          utag.DB("Attacher img: "+o.src);
          b=new Image();
          b.src=o.src;
          return;
        } else {
          b = a.createElement("script");
          b.language="javascript";
          b.type="text/javascript";
          b.async=1;
          b.charset="utf-8";
          for( l in utag.loader.GV(o.attrs) ){ b[l] = o.attrs[l]; }
```javascript
          b.src = o.src;
        }
        if(o.id){b.id=o.id};
        if (typeof o.cb=="function") {
          if(b.addEventListener) { b.addEventListener("load",function(){o.cb()},false); }
          else { /* prise en charge des anciens IE */ b.onreadystatechange=function(){if(this.readyState=='complete'||this.readyState=='loaded'){this.onreadystatechange=null;o.cb()}}; }
        }
        l = o.loc || "head";
        c = a.getElementsByTagName(l)[0];
        if (c) {
          utag.DB("Attacher à "+l+": "+o.src);
          if (l == "script") { c.parentNode.insertBefore(b, c); }
          else { c.appendChild(b) }
        }
      }
    } else { u.loader = utag.ut.loader; }
    // Fin du chargeur Tealium

    u.ev = {view: 1, link:1};

    u.initialized = false;
    
    u.mapFunc = function(arr, obj, item) {
      var i = arr.shift();
      obj[i] = obj[i] || {};
      if (arr.length > 0) {
        u.mapFunc(arr,obj[i], item);
      } else {
        obj[i] = item;
      }
    };
        
    ##UTGEN##
    u.send = function(utag_event, data_layer) { 
      if (u.ev[utag_event] || u.ev.all !== undefined) {
        //##UTENABLEDEBUG##utag.DB("envoyer:##UTID##");

        var a ,b ,c, d, e, f, i;
        a = utag_event
        b = data_layer

        u.data = {
          /* Initialiser les valeurs par défaut des paramètres de tag ici */
          /* Exemples : */
          api_key : "YOUR_API_KEY",
          rokt_domain : "https://apps.rokt-api.com",
          is_development_mode: true,
          /* Une valeur mappée à "api_key" ou "rokt_domain" dans TiQ remplacera ces valeurs par défaut. */
          "amount": "",
          "billingaddress1": "",
          "billingaddress2": "",
          "billingzipcode": "",
          "cardstatus": "",
          "cartItems": {},
          "confirmationref": "",
          "conversionType": "conversion",
          "currency": "",
          "custom": {},
          "customertype": "",
          "email": "",
          "emailEnc": "",
          "eventtype": "",
          "events": [],
          "gender": "",
          "hashedemail": "",
          "locale": "",
          "Loyaltymember": "",
          "loyaltystatus": "",
          "majorcat": [],
          "majorcatid": [],
          "minorcat": [],
          "minorcatid": [],
          "placementtype": "",

``````json
          "price": [],
          "productname": [],
          "paymentserviceprovider": "",
          "quantity": [],
          "shippingtype": "",
          "sku": []
        };

        /* Début du code des extensions tag-scopées */
        /* Veuillez ne pas modifier cette section */
        ##UTEXTEND##
        /* Fin du code des extensions tag-scopées */

        /* Début du code de mappage */
        Object.keys(utag.loader.GV(u.map)).forEach(function(mapping_key) {
          if (data_layer[mapping_key] !== undefined && data_layer[mapping_key] !== '') {
            var destinations = u.map[mapping_key].split(',');
            destinations.forEach( function(parameter) {
              if (
                !u.data.hasOwnProperty(parameter) &&
                (parameter.indexOf('cartItems') !== 0)
              ) {
                u.mapFunc(['custom'].concat(parameter.split('.')), u.data, data_layer[mapping_key]);
                return;
              }
              u.mapFunc(parameter.split('.'), u.data, data_layer[mapping_key]);
            });
          } else {
            var event_destinations = mapping_key.split(":");
            if (
              event_destinations.length === 2 &&
              String(data_layer[event_destinations[0]]) === String(event_destinations[1])
            ) {
              if (u.map[mapping_key]) {
                u.data.events = u.data.events.concat(u.map[mapping_key].split(","));
              }
            }
          }
        });

        //   u.initECommerceFields(data_layer);

        var attributes = {
          "amount": u.data.amount,
          "billingaddress1": u.data.billingaddress1,
          "billingaddress2": u.data.billingaddress2,
          "billingzipcode": u.data.billingzipcode,
          "cardstatus": u.data.cardstatus,
          "cartItems": [],
          "ccbin": u.data.ccbin,
          "confirmationref": u.data.confirmationref,
          "conversionType": u.data.conversionType,
          "country": u.data.country,
          "currency": u.data.currency,
          "customertype": u.data.customertype,
          "email": u.data.email,
          "emailEnc": u.data.emailEnc,
          "eventtype": u.data.eventtype,
          "firstname": u.data.firstname,
          "gender": u.data.gender,
          "hashedemail": u.data.hashedemail,
          "language": u.data.language,
```          "lastname": u.data.lastname,
          "locale": u.data.locale,
          "Loyaltymember": u.data.Loyaltymember,
          "loyaltystatus": u.data.loyaltystatus,
          "mobile": u.data.mobile,
          "paymentserviceprovider": u.data.paymentserviceprovider,
          "paymenttype": u.data.paymenttype,
          "placementtype": u.data.placementtype,
          "shippingtype": u.data.shippingtype,
          "zipcode": u.data.zipcode
        }

        utag.DB('send:##UTID##:MAPPINGS');
        utag.DB(u.data);
        /* Fin du code de mappage */
    
        if (!u.data.api_key) {
          utag.DB(u.id + ': Tag not fired: Required attribute api_key not populated');
          return;
        }
    
        /* Début du code d'envoi de balise */
        var t = u.data.is_development_mode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan;
        
        window.mParticle.config.isDevelopmentMode = u.data.is_development_mode;
        
        if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); }
        
        var i = window.mParticle.config.versions, s = [];
        i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); });
        
        src = u.data.rokt_domain + "/js/v2/" + u.data.api_key + "/app.js" + n + "&" + s.join("&");
        /* Fin du code d'envoi de balise */

        /* Début de la fonction de rappel du chargeur */
        /* Décommentez les commentaires JavaScript mono-ligne ("//") pour utiliser cette fonction de rappel de chargeur. */
        
        async function triggerPlacement(identifier) {
            const selection = await window.mParticle.Rokt.selectPlacements({
                identifier: identifier,
                attributes: {
                  "age": attributes.age,
                  "amount": attributes.amount,
                  "billingaddress1": attributes.billingaddress1,
                  "billingaddress2": attributes.billingaddress2,
                  "billingzipcode": attributes.billingzipcode,
                  "cardstatus": attributes.cardstatus,
                  "cartItems": attributes.cartItems,
                  "ccbin": attributes.ccbin,
                  "confirmationref": attributes.confirmationref,
                  "country": attributes.country,
                  "currency": attributes.currency,
```js
                  "customertype": attributes.customertype,
                  "email": attributes.email,
                  "emailEnc": attributes.emailEnc,
                  "eventtype": attributes.eventtype,
                  "firstname": attributes.firstname,
                  "gender": attributes.gender,
                  "hashedemail": attributes.hashedemail,
                  "language": attributes.language,
                  "lastname": attributes.lastname,
                  "locale": attributes.locale,
                  "Loyaltymember": attributes.Loyaltymember,
                  "loyaltystatus": attributes.loyaltystatus,
                  "mobile": attributes.mobile,
                  "paymentserviceprovider": attributes.paymentserviceprovider,
                  "paymenttype": attributes.paymenttype,
                  "placementtype": attributes.placementtype,
                  "shippingtype": attributes.shippingtype
                }
            });
        }

        u.loader_cb = function () {
          
          /* Début du code d'envoi de l'appel de chargement de balise */
          u.data.events.forEach(function(event) {
            if (["bag", "checkout", "confirmation"].includes(event)) {
              if (attributes.email !== null || attributes.emailsha256 !== null) {
                var userIdentities = {}
                attributes.email && (userIdentities.email = attributes.email)
                attributes.emailsha256 && (userIdentities.email = attributes.emailsha256)
                var identifyRequest = { 
                  userIdentities: userIdentities
                }; 
                mParticle.Identity.identify(identifyRequest);
              }
            }
            
            if (event == "bag") {
              window.mParticle.ready(
                triggerPlacement("bag_page")
              );  
            }
            if (event == "checkout") {
              window.mParticle.ready(
                triggerPlacement("checkout_page")
              );  
            }
            if (event == "confirmation") {
              window.mParticle.ready(
                triggerPlacement("confirmation_page")
              );  
            }
          });
          
          /* Fin du code d'envoi de l'appel de chargement de balise */
        };

        /* Fin de la fonction de rappel de chargement */

        /* Début de l'appel de fonction de chargement */

```        /* Décommentez les commentaires JavaScript sur une ligne ("//") pour utiliser Loader. */

        if (!u.initialized) {
          u.loader({
            "type" : "script",
            "src" : src,
            "cb" : u.loader_cb,
            "loc" : "script",
            "id" : 'utag_##UTID##'
          });
          u.initialized = true;
        } 
        else {
          u.loader_cb();
        }

        /* Fin de l'appel de la fonction Loader */

        //##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLETE");
      }
    };
    utag.o[loader].loader.LOAD(id);
  })("##UTID##", "##UTLOADERID##");
} catch (error) {
  utag.DB(error);
}
//fin du tag universel tealium

Activation du script​

Sous Règles et Événements, configurez votre nouveau tag pour qu'il se déclenche sur toutes les pages.

Sous Variables Mappées, configurez les mappings des variables UDO pour les événements d'achat et les variables de la couche de données. Règles &amp; événements

Vous devez configurer les variables dans Tealium en fonction de votre couche de données spécifique avant de les mapper à Rokt. Consultez les Variables de la couche de données Tealium pour plus de détails sur les variables.

Cet article vous a-t-il été utile ?
Last updated Sep 24, 2025