Aller au contenu principal

Intégration Tealium pour les annonceurs

Cette page explique comment implémenter les publicités Rokt en utilisant Tealium pour boucler la boucle en reliant les conversions à vos campagnes. En reliant les conversions à l'engagement de vos publicités, vous pouvez permettre une attribution plus précise, une optimisation en temps réel et une mesure des campagnes.

Vous apprendrez comment créer des variables dans Tealium en fonction de votre couche de données, et comment créer des balises pour initialiser le SDK Rokt et enregistrer les conversions.

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 des 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 de conversion approprié, utilisez le code suivant dans votre application lorsqu'une conversion a lieu :

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

L'intégration nécessite confirmationref, amount et currency. email_address est facultatif si vous n'utilisez pas rclid pour fermer la boucle.

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. Saisissez un nom de description pour votre balise, comme "Rokt SDK".
  5. Sous Edit Template, collez le fragment 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. Remplacez la valeur de rokt_domain dans u.data par votre propre domaine si vous configurez une intégration de domaine de première partie.
  8. Cliquez sur Save.

Extrait d'initialisation de SDK​

//~~tv:20010.20230630
//~~tc: Tealium Custom Container
//~~tc: Tealium loader mis à jour vers la version 4.35

/*
  Notes sur le 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 balises JavaScript entre "Start Tag Library Code" et "End Tag Library Code".
  - Ajoutez uniquement le 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 des fichiers JavaScript externes (Loader) :
  - Si vous devez charger un fichier JavaScript externe supplémentaire, décommentez les commentaires JavaScript monolignes ("//") 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 vers le fichier JavaScript externe que vous souhaitez charger.
  - Enfin, dans la fonction de rappel du Loader, insérez le code JavaScript qui doit être exécuté après le chargement du fichier JavaScript externe.
*/

/* Start Tag Library Code */
window.mParticle = window.mParticle || {};
window.mParticle.EventType = { Inconnu: 0, Navigation: 1, Emplacement: 2, Recherche: 3, Transaction: 4, ContenuUtilisateur: 5, PréférenceUtilisateur: 6, Social: 7, Autre: 8, Média: 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 balise universelle - 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]; } 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 les valeurs par défaut des paramètres de balise ici */
            /* Exemples : */
            api_key : "YOUR_API_KEY",
            rokt_domain : "https://apps.rokt-api.com",
            is_development_mode: data_layer.tealium_environment == "prod" ? false : true,
            /* Une valeur mappée à "api_key" ou "rokt_domain" dans TiQ remplacera ces valeurs par défaut. */
            email: '',
            conversionType: "conversion",
            confirmationref: "",
            amount: "",
            currency: "",
            price: [],
            quantity: [],
            majorcat: [],
            majorcatid: [],
            minorcat: [],
            minorcatid: [],
            productname: [],
            sku: [],
            cartItems: {},
            custom: {},
            events: [],
          };
  
  
          /* Commencer le code des extensions portées par les balises */
          /* Veuillez ne pas modifier cette section */
          ##UTEXTEND##
          /* Fin du code des extensions portées par les balises */
  
  
          /* Commencer le 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 = {
            conversionType: u.data.conversionType,
            email: u.data.email,
            firstname: u.data.firstname,
            lastname: u.data.lastname,
            mobile: u.data.mobile,
            confirmationref: u.data.confirmationref,
            amount: u.data.amount,
            currency: u.data.currency,
            paymenttype: u.data.paymenttype,
            zipcode: u.data.zipcode,
            country: u.data.country,
            language: u.data.language,
            ccbin: u.data.ccbin,
            cartItems: []
          }

          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é : attribut requis api_key non 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;
        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 à une ligne ("//") pour utiliser cette fonction de rappel du chargeur. */
  
          u.loader_cb = function () {
            
            /* Début du code d'envoi de tag de rappel du chargeur */
            u.data.events.forEach(function(event) {
                if (event == "conversion"){
                    window.mParticle.ready(
                        function() {  
                            
                            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
                                }; 
```javascript
                                mParticle.Identity.identify(identifyRequest);
                            }
                            
                            var currentUser = mParticle.Identity.getCurrentUser();
                      
                            var transactionObject = {}
                            attributes.conversionType && (transactionObject.conversiontype = attributes.conversionType)
                            attributes.confirmationref && (transactionObject.confirmationref = attributes.confirmationref)
                            attributes.amount && (transactionObject.amount = attributes.amount)
                            attributes.currency && (transactionObject.currency = attributes.currency)
                            
                            mParticle.logEvent( 
                              "conversion", // Le nom de l'événement
                              mParticle.EventType.Transaction, // Le type d'événement
                              transactionObject
                            
                            );
                        }
                      );  
                }
              
            });
            
            /* Code de fin d'envoi de balise de rappel de chargeur */
          };
  
          /* Fin de la fonction de rappel de chargeur */
  
  
          /* Début de l'appel de 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 fonction de chargeur */
  
  
          //##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLET");
        }
      };
      utag.o[loader].loader.LOAD(id);
    })("##UTID##", "##UTLOADERID##");
  } catch (error) {
    utag.DB(error);
  }
  //fin de la balise universelle tealium
  
  


Sous **Règles et Événements**, définissez votre nouvelle balise pour qu'elle s'active sur toutes les pages.

Sous **Variables mappées**, configurez les correspondances de variables UDO pour l'événement de conversion et les variables de la couche de données.
![Règles et événements](/img/docs/tealium-mparticle-mapped-variables.jpg)


### Mappage de vos noms de variables

Vous devez mapper vos variables Tealium aux champs Rokt suivants :
- `emailaddress`
- `confirmationref`
- `amount`
- `currency`

Vous devez configurer des 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 Sep 24, 2025