Aller au contenu principal

Intégration Tealium pour les Annonceurs

Cette page explique comment implémenter les Rokt Ads en utilisant Tealium pour boucler la boucle en reliant les conversions à vos campagnes. En reliant les conversions à l'engagement de vos Ads, vous pouvez activer 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 basées sur votre couche de données (data layer), 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 doit 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 de conversion approprié, utilisez le code suivant dans votre application lorsqu'une conversion se produit :

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 à droite, puis sélectionnez Tealium Custom Container.
  4. Entrez un nom de description pour votre tag, comme "Rokt SDK".
  5. Sous Edit Template, collez le snippet 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. Changez 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 du SDK​

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

/*
  Notes sur le conteneur personnalisé Tealium :
  - 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 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 || {};
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 */

//balise universelle tealium - 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 ancien 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 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ée de balise */
          /* Veuillez ne pas modifier cette section */
          ##UTEXTEND##
          /* Fin du code des extensions à portée de balise */
  
  
          /* 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,
```fr
            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é : 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;
        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 de chargeur. */
  
          u.loader_cb = function () {
            
            /* Début du code d'envoi de Tag de la fonction 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
                                }; 

```                                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
                            
                            );
                        }
                      );  
                }
              
            });
            
            /* Fin du code d'envoi de balise de rappel du chargeur */
          };
  
          /* Fin de la fonction de rappel du chargeur */
  
  
          /* Début de l'appel de fonction du chargeur */
          /* Décommentez les commentaires JavaScript sur une seule ligne ("//") pour utiliser le chargeur. */
  
          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 du chargeur */
  
  
          //##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLETE");
        }
      };
      utag.o[loader].loader.LOAD(id);
    })("##UTID##", "##UTLOADERID##");
  } catch (error) {
    utag.DB(error);
  }
  //fin de la balise universelle tealium

Activation du script​

Sous Règles et événements, configurez votre nouvelle balise pour qu'elle se déclenche sur toutes les pages.

Sous Variables mappées, configurez les mappages de variables UDO pour l'événement de conversion et les variables de la couche de données. Règles et événements

Mappage de vos noms de variables​

Vous devez mapper vos variables Tealium aux champs Rokt suivants :

  • emailaddress
  • confirmationref
  • amount
  • currency

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 pour plus de détails sur les variables.

Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025