{"id":1228,"date":"2020-07-12T16:37:57","date_gmt":"2020-07-12T14:37:57","guid":{"rendered":"https:\/\/taillet.fr\/blog\/?p=1228"},"modified":"2020-07-13T16:47:46","modified_gmt":"2020-07-13T14:47:46","slug":"comment-ajouter-un-tag-media-sur-adobe-launch-ou-gtm","status":"publish","type":"post","link":"https:\/\/taillet.fr\/blog\/collecte\/comment-ajouter-un-tag-media-sur-adobe-launch-ou-gtm\/","title":{"rendered":"Comment ajouter un tag m\u00e9dia sur Adobe Launch ou GTM ?"},"content":{"rendered":"\n<p>Il est 22h, les enfants sont couch\u00e9s, vous avez mang\u00e9 et le film se termine bient\u00f4t. Cette soir\u00e9e est d\u00e9cid\u00e9ment parfaite. Vous commencez \u00e0 r\u00e9fl\u00e9chir comment optimiser votre deuxi\u00e8me partie soir\u00e9e. Mais bon tout \u00e7a, c&rsquo;\u00e9tait avant le drame, bien entendu\u00a9.<\/p>\n\n\n\n<p>En effet, vous \u00eates tranquillement dans votre canap\u00e9, totalement inconscient du Destin qui s&rsquo;appr\u00eate \u00e0 frapper.  Sur un r\u00e9flexe devenu naturel avec les ann\u00e9es, vous prenez votre t\u00e9l\u00e9phone et commencez \u00e0 rafra\u00eechir Facebook \/ Linkedin \/ Twitter pour la 8\u00e8me fois depuis le d\u00e9but du film. Rien de nouveau, \u00e0 part Karim qui met des Bravos au hasard \u00e0 des coll\u00e8gues sur Linkedin.<\/p>\n\n\n\n<p>Et c&rsquo;est l\u00e0 que le drame se produit : vous ouvrez votre boite mail pro. Et vous d\u00e9couvrez ainsi le mail annot\u00e9 \u00ab\u00a0URGENT\u00a0\u00bb de Julie, qui vous \u00e9crit \u00e0 22h (depuis le bureau, elle a visiblement tenu \u00e0 le pr\u00e9ciser aux  8 personnes qu&rsquo;elle a mis en copie). \u00c7a y est, c&rsquo;est votre moment de gloire, savourez-le : vous allez ajouter un tag m\u00e9dia.<\/p>\n\n\n\n<h2>Qu&rsquo;est-ce qu&rsquo;un tag m\u00e9dia ?<\/h2>\n\n\n\n<p>Les tags m\u00e9dias sont essentiels afin de d\u00e9terminer si une solution m\u00e9dia est performante et si elle a contribu\u00e9 \u00e0 la r\u00e9alisation d&rsquo;objectifs pr\u00e9d\u00e9finis. Ces tags vont alimenter les bases de donn\u00e9es des fournisseurs de solution de tous types (ex : Google Search Ads, Marine Software, TimeOne) et leur permettre de collecter des statistiques.<\/p>\n\n\n\n<p>Un tag m\u00e9dia est un bout de JavaScript qui permet \u00e0 une solution tierce de collecter des informations et d&rsquo;essayer de d\u00e9terminer si elle contribue ou non aux objectifs du site. Par exemple, combien de pages ont \u00e9t\u00e9 vues, combien d&rsquo;ajouts panier ont \u00e9t\u00e9 effectu\u00e9s ou combien de conversions ont \u00e9t\u00e9 r\u00e9alis\u00e9es.<\/p>\n\n\n\n<p>La plupart des \u00e9diteurs de solutions vont alors fournir un plan de tag indiquant :<\/p>\n\n\n\n<ol><li>La liste des diff\u00e9rents types de tags<\/li><li>Leur composition (avec ou sans valeurs dynamiques)<\/li><li>O\u00f9 et quand les appeler<\/li><\/ol>\n\n\n\n<p>Le tag m\u00e9dia se compose g\u00e9n\u00e9ralement :<\/p>\n\n\n\n<ul><li>de l&rsquo;appel d&rsquo;une librairie JavaScript<\/li><li>de l&rsquo;alimentation d&rsquo;une s\u00e9rie de variables<\/li><li>de l&rsquo;ex\u00e9cution d&rsquo;une fonction, variant suivant l&rsquo;\u00e9tape du parcours utilisateur<\/li><\/ul>\n\n\n\n<p>Exemple avec le tag de conversion Google Search Ads (AdWords)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- On alimente des variables sp\u00e9cifiques -->\n&lt;script type=\"text\/javascript\">\n\t\/* &lt;![CDATA[ *\/\n\t\tvar google_conversion_id = 1234567890; \/* L'ID de conversion *\/\n\t\tvar google_conversion_value = 10.0; \/* Le montant de la conversion *\/\n\t\tvar google_conversion_currency = \"EUR\"; \/* La devise *\/\n\t\/* ]]> *\/\n&lt;\/script>\n\n&lt;!-- On appelle la librairie JavaScript d\u00e9di\u00e9e \u00e0 la conversion -->\n&lt;script type=\"text\/javascript\" src=\"\/\/www.googleadservices.com\/pagead\/conversion.js\">&lt;\/script><\/pre>\n\n\n\n<h2>Int\u00e9grer le tag m\u00e9dia sur votre TMS<\/h2>\n\n\n\n<h3>1. Mapper les variables<\/h3>\n\n\n\n<p>Dans un premier temps, il faut lister les valeurs dynamiques des tags et les affecter \u00e0 une variable GTM ou un data element Launch. Cela permettra de cr\u00e9er une seule variable et de l&rsquo;utiliser dans de multiples tags, m\u00e9dia ou non.<\/p>\n\n\n\n<p>Nous allons prendre ici pour exemple le Revenue (chiffre d&rsquo;affaires) d&rsquo;une transaction, qui permettra d&rsquo;alimenter un tag de transaction Effiliation, une plateforme d&rsquo;affiliation historique du march\u00e9 fran\u00e7ais.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h4>Sur GTM<\/h4>\n\n\n\n<p>On cr\u00e9e une variable depuis Variables &gt; User-Defined Variables &gt; New &gt; Custom JavaScript.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function() {\n  var result=\"\";\n  if(ecommerceData){\nif(ecommerceData.transactionTotal){\nresult=ecommerceData.transactionTotal;\n    }\n  }\n  return result;\n}<\/pre>\n\n\n\n<p>Il aurait \u00e9t\u00e9 \u00e9galement possible d&rsquo;utiliser la m\u00e9thode \u00ab\u00a0datalayer variable\u00a0\u00bb.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h4>Sur Adobe Launch<\/h4>\n\n\n\n<p>On cr\u00e9e un data element depuis Data elements &gt; Add Data Element &gt; Custom Code.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var result=\"\";\nif(ecommerceData){\nif(ecommerceData.transactionTotal){\nresult=ecommerceData.transactionTotal;\n  }\n}\nreturn result;<\/pre>\n\n\n\n<p>On aurait pu utiliser ici aussi la m\u00e9thode JavaScript variable et pointer vers la variable de datalayer correspondante.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>En r\u00e9sum\u00e9, pas vraiment de diff\u00e9rences sur les outils en termes de code ou de fonctionnement. A l&rsquo;appel de cette variable, elle retournera la valeur du chiffre d&rsquo;affaires de la transaction. On peut donc l&rsquo;ins\u00e9rer directement dans un ou plusieurs tags m\u00e9dia.<\/p>\n\n\n\n<h3>2. Ajouter les tags m\u00e9dia<\/h3>\n\n\n\n<p>La deuxi\u00e8me \u00e9tape est d&rsquo;int\u00e9grer le tag html qui sera appel\u00e9 par le TMS. Dans la plupart des cas, le fournisseur de la solution demande que l&rsquo;on appelle soit un pixel, soit un fichier JavaScript. La finalit\u00e9 est la m\u00eame : g\u00e9n\u00e9rer une URL comportant les param\u00e8tres voulus, comme le montant de la transaction.<\/p>\n\n\n\n<p>Sur notre exemple d&rsquo;Effiliation, on nous demande d&rsquo;ins\u00e9rer un pixel (<a rel=\"noreferrer noopener\" href=\"https:\/\/www.effinity-martech.com\/tracking-mode-demploi\/\" target=\"_blank\">source<\/a>) :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=http:\/\/track.votredomaine.com\/servlet\/effi.revenue?id=VOTRE_IDENTIFIANT&amp;ref=NUMERO_COMMANDE&amp;montant=MONTANT_COMMANDE\" \/><\/pre>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Le code est le m\u00eame sur les deux outils, mis \u00e0 part l&rsquo;appel des variables :<\/p>\n\n\n\n<h4>Sur GTM<\/h4>\n\n\n\n<p>Pour cr\u00e9er le tag, il faut aller dans Tags &gt; New &gt; Tag configuration &gt; Tag type &gt; Custom HTML. Attention, il ne faut pas oublier de placer les balises HTLM &lt;script&gt; ou GTM n&rsquo;arrivera pas \u00e0 interpr\u00e9ter votre JavaScript et l&rsquo;affichera sur la page, comme si c&rsquo;\u00e9tait du texte !<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\n\/* 1. On cr\u00e9e le pixel *\/\nvar what = document.createElement(\"img\"); \/\/ On cr\u00e9e un nouvel \u00e9l\u00e9ment &lt;img>\nwhat.src=\"http:\/\/track.votredomaine.com\/servlet\/effi.revenue?id=123456\"; \/\/ On lui donne une source\nwhat.src+=\"&amp;ref=\"+{{orderId}}; \/\/ On ajoute le num\u00e9ro de commande, une autre variable GTM\nwhat.src+=\"&amp;montant=\"+{{orderAmount}}; \/\/ On ajoute le montant de la commande\nwhat.height=1; \/\/ On donne une hauteur \u00e0 l'image\nwhat.width=1; \/\/ On donne une hauteur \u00e0 l'image\n\n\/* 2. On d\u00e9termine o\u00f9 ins\u00e9rer le pixel *\/\nvar where = document.getElementsByTagName(\"body\")[0]; \n\n\/* 3. Pour finir, on ins\u00e8re le pixel \u00e0 l'endroit souhait\u00e9 ! *\/\nwhere.appendChild(what, where);\n&lt;\/script><\/pre>\n\n\n\n<h4>Sur Adobe Launch<\/h4>\n\n\n\n<p>Pour cr\u00e9er le tag, il faut aller dans Rules &gt; Add Rule &gt; Action &gt; Add &gt; Custom code. Launch permet de choisir le type de tag. Je vous conseille de choisir un tag JavaScript directement, cela ouvre une option dont nous parlerons une autre fois (\u00ab\u00a0Execute globally\u00a0\u00bb).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* 1. On cr\u00e9e le pixel *\/\nvar what = document.createElement(\"img\"); \/\/ On cr\u00e9e un nouvel \u00e9l\u00e9ment &lt;img>\nwhat.src=\"http:\/\/track.taillet.fr\/servlet\/effi.revenue?id=123456\"; \/\/ On lui donne une source\nwhat.src+=\"&amp;ref=\"+_satellite.getVar('orderId'); \/\/ On ajoute le num\u00e9ro de commande, un autre data element\nwhat.src+=\"&amp;montant=\"+_satellite.getVar('orderAmount'); \/\/ On ajoute le montant de la commande\nwhat.height=1; \/\/ On donne une hauteur \u00e0 l'image\nwhat.width=1; \/\/ On donne une hauteur \u00e0 l'image\n\n\/* 2. On d\u00e9termine o\u00f9 ins\u00e9rer le pixel *\/\nvar where = document.getElementsByTagName(\"body\")[0]; \n\n\/* 3. Pour finir, on ins\u00e8re le pixel \u00e0 l'endroit souhait\u00e9 ! *\/\nwhere.appendChild(what, where);<\/pre>\n\n\n\n<p>Vous pouvez tester ces scripts dans la console de d\u00e9veloppement (F12), c&rsquo;est tout simple \ud83d\ude42<\/p>\n\n\n\n<h3>3. D\u00e9finir les r\u00e8gles de d\u00e9clenchement (triggers)<\/h3>\n\n\n\n<p>La derni\u00e8re tape d&rsquo;int\u00e9gration, c&rsquo;est de d\u00e9finir quand le tag va se d\u00e9clencher. Le trigger va se baser sur un \u00e9v\u00e8nement JavaScript qui dans notre cas indique \u00e0 quel \u00e9tape du chargement de la page nous sommes.<\/p>\n\n\n\n<p>On d\u00e9clenche g\u00e9n\u00e9ralement les tags m\u00e9dia sur l&rsquo;un des deux \u00e9v\u00e8nements suivants, \u00e0 savoir :<\/p>\n\n\n\n<ul><li>au moment o\u00f9 le contenu de la page commence \u00e0 se charger (DOM ready)<\/li><li>au moment o\u00f9 la page a fini de se charger (page loaded)<\/li><\/ul>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h4>Sur GTM<\/h4>\n\n\n\n<p>On reste sur la page de d\u00e9finition du tag et on ajoute le trigger (Triggering &gt; choose a trigger &gt; New trigger &gt; Trigger configuration &gt; Trigger type &gt; DOM Ready).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h4>Sur Adobe Launch<\/h4>\n\n\n\n<p>On reste dans la m\u00eame r\u00e8gle et on ajoute le trigger (events). Pour un tag m\u00e9dia, on ira dans Events &gt; Add &gt; Event type &gt; DOM Ready.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Le trigger est d\u00e9sormais associ\u00e9 au tag que vous venez de cr\u00e9er. Vous pouvez le r\u00e9utiliser pour d&rsquo;autres tags, m\u00e9dia ou non.<\/p>\n\n\n\n<h3>4. Valider l&rsquo;int\u00e9gration des tags m\u00e9dia<\/h3>\n\n\n\n<p>La derni\u00e8re \u00e9tape et non la moindre, c&rsquo;est celle du test. De nombreux \u00e9l\u00e9ments peuvent en effet perturber le d\u00e9clenchement des tags et on passe parfois de pr\u00e9cieuses minutes \/ heures \u00e0 trouver la source du probl\u00e8me (g\u00e9n\u00e9ralement un bon vieux <a rel=\"noreferrer noopener\" href=\"https:\/\/i.pinimg.com\/originals\/f1\/62\/5d\/f1625dbabd8b7268b77747a594bdef71.gif\" target=\"_blank\" data-rel=\"lightbox-gallery-o49CfgvZ\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">PEBKAC<\/a>).<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h4>Sur GTM<\/h4>\n\n\n\n<p>Une fois le tag configur\u00e9 et enregistr\u00e9, passez en mode preview.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h4>Sur Adobe Launch<\/h4>\n\n\n\n<p>Une fois le tag enregistr\u00e9, chargez-le dans une librairie sur votre environnement de d\u00e9veloppement.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>De l\u00e0, chargez la page qui est cens\u00e9e afficher le tag et v\u00e9rifiez :<\/p>\n\n\n\n<ol><li>que les variables attendues sont bien aliment\u00e9es<\/li><li>que le tag attendu est bien d\u00e9clench\u00e9<\/li><li>que le tag comporte bien les variables que vous avez d\u00e9finies<\/li><\/ol>\n\n\n\n<p>Si vous \u00eates vraiment press\u00e9 : ouvrez la console de d\u00e9veloppement (F12), allez dans network et v\u00e9rifiez directement la composition du pixel g\u00e9n\u00e9r\u00e9 par votre tag m\u00e9dia.<\/p>\n\n\n\n<p>Exemple :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"575\" height=\"276\" src=\"https:\/\/taillet.fr\/blog\/wp-content\/uploads\/2020\/07\/image.png\" alt=\"\" class=\"wp-image-1287\" srcset=\"https:\/\/taillet.fr\/blog\/wp-content\/uploads\/2020\/07\/image.png 575w, https:\/\/taillet.fr\/blog\/wp-content\/uploads\/2020\/07\/image-300x144.png 300w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/figure>\n\n\n\n<p>Dans cet exemple :<\/p>\n\n\n\n<ul><li>\u00ab\u00a0ref\u00a0\u00bb est correctement aliment\u00e9 avec un ID de commande (123456)<\/li><li>\u00ab\u00a0montant\u00a0\u00bb est correctement aliment\u00e9 avec le montant de la commande (100)<\/li><li>le pixel est en erreur 404 car ce pixel est un exemple sp\u00e9cialement cr\u00e9\u00e9 pour cet article. Sur un cas r\u00e9el, le pixel ne devrait pas appara\u00eetre en rouge et retourner un code 200 (requ\u00eate r\u00e9ussie)<\/li><\/ul>\n\n\n\n<p style=\"background-color:black;color:white;padding:15px;text-align:justify;border-radius:2px;\"><img loading=\"lazy\" width=\"150\" height=\"150\" style=\"margin:0 10px 0 0;padding:0;border:10px solid white;width:120px;display:block;float:left;border-radius:10px 0 10px 0;\" src=\"https:\/\/taillet.fr\/blog\/wp-content\/uploads\/2020\/04\/logo_mini-1.png\" alt=\"\" class=\"wp-image-127\">A partir de maintenant, vous devriez \u00eatre en mesure d&rsquo;int\u00e9grer n&rsquo;importe quel tag m\u00e9dia, f\u00e9licitations ! L&rsquo;ajout de tags est une t\u00e2che tr\u00e8s courante chez les analystes web, mais met souvent en difficult\u00e9 les moins senior.<br \/>Si vous ne vous sentez pas encore \u00e0 l&rsquo;aise \u00e0 la suite la lecture de cet article, je vous encourage fortement \u00e0 vous former en JavaScript. Paul-K\u00e9vin pourrait vous soutenir que le JavaScript est inutile, mais GTM ne propose pas de tag tout pr\u00eat pour 100% des solutions \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La plupart des TMS &#8211; dont Adobe Launch et Google Tag Manager &#8211; proposent des widgets permettant de param\u00e9trer facilement des tags m\u00e9dia. L&rsquo;inconv\u00e9nient est que tous les tags m\u00e9dia ne sont pas repr\u00e9sent\u00e9s et qu&rsquo;il faut parfois faire un peu de JavaScript et reconstituer le tag soit-m\u00eame. Cet article a pour ambition de vous montrer comment int\u00e9grer un tag m\u00e9dia pas-\u00e0-pas.<\/p>\n","protected":false},"author":1,"featured_media":1302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/posts\/1228"}],"collection":[{"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/comments?post=1228"}],"version-history":[{"count":65,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/posts\/1228\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/posts\/1228\/revisions\/1297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/media\/1302"}],"wp:attachment":[{"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/media?parent=1228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/categories?post=1228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taillet.fr\/blog\/wp-json\/wp\/v2\/tags?post=1228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}