Aller au contenu principal

Intégration Tealium pour le commerce électronique

Ce guide vous guide à travers le processus d'intégration avec Rokt en utilisant Tealium. Vous apprendrez comment 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 ultérieures.

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 lorsqu'un événement d'achat se produit :

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, Panier, Caisse, etc..

Initialiser le SDK Rokt​

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

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 la bibliothèque de tags JavaScript entre "Start Tag Library Code" et "End Tag Library Code".
  - Ajoutez uniquement 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 devez charger un fichier JavaScript externe supplémentaire, décommentez les commentaires JavaScript sur une seule ligne ("//") dans les sections Loader suivantes 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 vers le 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 || {};
```javascript
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émarrer le 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("Attach 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 { /* support IE ancien */ 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 ici les valeurs par défaut des paramètres de balise */
          /* 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": "",

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

        /* Début du code des extensions à portée de balise */
        /* Veuillez ne pas modifier cette section */
        ##UTEXTEND##
        /* Fin du code des extensions à portée de balise */

        /* 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 non déclenché : L'attribut requis api_key n'est pas renseigné');
          return;
        }
    
        /* Début du code d'envoi de tag */
        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 tag */

        /* Début de la fonction de rappel du chargeur */
        /* Décommentez les commentaires JavaScript sur une seule ligne ("//") pour utiliser cette fonction de rappel du 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,
                  "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 balises de rappel de chargeur */
          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 balises de rappel de chargeur */
        };

        /* Fin de la fonction de rappel de chargeur */

        /* Début de l'appel de la fonction de chargeur */
    /* Décommentez les commentaires JavaScript sur une seule 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 mappages de variables UDO pour les événements d'achat et les variables de la couche de données (data layer).
![Règles & événements](/img/docs/tealium-mparticle-mapped-variables-ecommerce.png)


Vous devez configurer les variables dans Tealium selon votre couche de données spécifique avant de les mapper à Rokt. Consultez les [Variables de la Couche de Données Tealium](https://docs.tealium.com/iq-tag-management/data-layer/data-layer-variables/) pour plus de détails sur les variables.
Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025