SMARTTAG EXERCICES
Présentation Ce document à pour but de vous présenter différentes solutions aux exercices smarttag. Vous retrouverez pour chaque exercice une correction « simple » et une correction « avancée ». L’objectif de ce document est de vous présenter différentes implémentations afin de mieux comprendre le fonctionnement de ce nouveau marqueur.
Zoom sur le tracker Le tracker : › Tag : base technique pour le marquage d’un site › Plugin : extension métier du tracker
Le marqueur Un fichier JavaScript comprenant en dur ›Une version ›Une configuration par défaut
Le marqueur Tag composer fournit un fichier qui est le résultat de la concaténation du code du Tag avec le code des plugins sélectionnés.
Le marqueur Espace de nom › Une seule variable globale : ATInternet › Qui peut contenir plusieurs outils dont le Tracker › ATInternet.Tracker › Qui contient lui-même l'objet Tag et les plugins › ATInternet.Tracker.Tag › ATInternet.Tracker.Plugins › Création d'un objet Tag : ›var myTag = new ATInternet.Tracker.Tag();
Le marqueur Global: › L'utilisateur peut déclarer (via les helpers) ses données dans l'ordre qu'il le souhaite. › Il peut ensuite procéder à un envoi groupé grâce à la méthode dispatch(): myTag.dispatch() Individuel: › L’utilisateur peut choisir d’envoyer des informations individuellement › On utilisera la méthode send() : myTag.<métier>.send(<données>).
Sommaire Exercice 1 : Page, moteur interne, visiteurs identifiés, clic Exercice 2 : Publisher Exercice 3 : Panier (Sales Tracker) Exercice 4 : Commande (Sales Tracker) Exercice 5 : Les Triggers
Exercice 1 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Mesurer un clic de navigation sur le lien « Make another search ». Mesurer un clic de sortie sur le lien « Leave me alone ». Simuler un moteur interne en Spécifiant « don't have any result ». Ajouter des indicateurs de site « x1 : Search », « x2 : English ». Ajouter un indicateur de page « f1 : No Filter ». Simuler un visiteur identifié ayant la valeur « 1234 » (numeric) et la categorie « 1 ».
Exercice 1 - Correction Les Pré-requis pour répondre aux questions de l’exercice : 1 - Le fichier SMARTTAG 2 - Helper « Page » : .page.set({ […] }) 3 - Helper « Clic » : .click.send({ […] }) 4 - Helper « Visiteurs identifiés » : .identifiedVisitor.set({ […] }) 5 - Helper « Moteur Interne » : . internalSearch.set({ […] }) 6 - Helper « Moteur interne » : .setParam()
Exercice 1 – Correction Faire un appel au fichier « smarttag.js ». La configuration ci-dessous (chemin relatif) indiquera que votre fichier smarttag.js est situé au même niveau que votre page HTML. <script src="./smarttag.js"></script> Initialiser le tracker ce qui permettra d’utiliser les helpers : var tag = new ATInternet.Tracker.Tag(); Marquer la page : tag.page.set({ name:'exercice_1' }); Il existe 2 solutions pour marquer un clic : 1) Marquer le clic de Navigation via un événement JS « onclick » : tag.click.send({elem:this, name:'example_onclick', level2:'', type:'navigation'}); 2) Marquer le clic de Sortie sans ajout dans le code HTML de la page : tag.clickListener.send({ elem: document.getElementById("exercice"), name: 'example_listener', level2: '', type: 'exit' });
Exercice 1 – Correction Les visiteurs identifiés : tag.identifiedVisitor.set({ id: 1234, // Type INT (sans quote) : &an= ; Type String (avec quotes) : &at= category: 1 }); Le format de la valeur présent dans l’id définit le paramètre « an » ou « at ». Indicateurs de sites / pages (x1, x2 et f1) : tag.customVars.set({ site: { 1: ‘[Search]', 2: 'English‘ }, page: { 1: 'No_filter' }
Exercice 1 – Correction Moteur de recherche interne : tag.internalSearch.set({ keyword: 'keyword', resultPageNumber: '0' }); Envoyer un hit : tag.dispatch();
Exercice 1 – Correction Maintenant que nous connaissons les « helpers » pour mesurer les éléments demandés dans l’exercice, nous allons voir comment les positionner dans notre page HTML. 1 – L’appel au fichier dans les balises head : smarttag.js <head> <script src="./smarttag.js"></script> </head> 2 - Mesurer un clic avec un événement JS de type onclick : <center> <a href="http://lmgtfy.com/?q=another" class="btn btn-primary“ onclick="return tag.click.send({elem:this, name:'example_onclick', level2:'', type:'navigation'});" >Make another search</a> </center> Un hit de clic sera envoyé si l’internaute clique sur ce lien
Exercice 1 – Correction Marqueur complet présent dans la balise Script du footer <script> var tag = new ATInternet.Tracker.Tag(); //Initialiser le tracker tag.clickListener.send({ elem: document.getElementById("exercice"), // Si un élément du site contient id=‘exercice’ nous en tiendrons compte name: 'example_listener', // Libellé du clic level2: '', // Niveau 2 du clic type: 'exit‘ // Type de clic }); tag.internalSearch.set({ keyword:'keyword',// Paramètre à envoyer « &mc ». resultPageNumber:'0‘ // Paramètre à envoyer « &np ». tag.customVars.set({ site: { 1: 'Search', // Paramètre de l’objet « site ». Le paramètre 1 correspondra donc au paramètre x1 dans le hit 2: 'English', // Paramètre de l’objet « site ». Le paramètre 2 correspondra donc au paramètre x2 dans le hit }, page: { 1: 'No_filter', // Paramètre de l’objet « page ». Le paramètre 1 correspondra donc au paramètre f1 dans le hit } tag.identifiedVisitor.set({ id: 1234, // Id visiteur identifié au format INT. Le paramètre remonté sera donc « an ». category: 1 // Catégorie du visiteur identifié tag.page.set({ name:'exercice_1‘ // Nom de la page tag.dispatch(); // Envoyer le hit </script>
Exercice 1 – Correction Code source : exercice-1.html Hit généré au chargement de la page : http://logc406.xiti.com/hit.xiti?s=562841&s2=&p=exercice_1&x1=[Search]&x2=English&f1=No_filter&an=1234&ac=1&mc=keyword&np=0 Hit généré au clic sur le bouton « Make another search » : http://logc406.xiti.com/hit.xiti?s=562841&p=example_onclick&s2=&click=N&pclick=&s2click= Hit généré au clic sur le bouton « Leave me alone » : http://logc406.xiti.com/hit.xiti?s=562841&p=example_listener&s2=&click=S&pclick=&s2click=
Exercice 1 – Correction Il est possible d’allez plus loin dans cet exercice : Détecter l’action de clic en « JS / Jquery ». Créer une fonction « clic » qui permettra de générer un hit de clic dynamique. Placer le code du marqueur dans un fichier externe (ex : ex-1-advanced.js). Exemple dans le fichier : - exercice-1-advanced.html - ex-1-advanced.js Utilisation des attributs data-* dans le « ahref » du bouton pour identifier le type de clic
Exercice 2 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Mesurer une page. Mesurer une Impression PUBLISHER. Mesurer Un CLIC PUBLISHER. Simuler un visiteur identifié ayant la valeur « 1234 » (TEXTE) et la categorie « 1 ».
Exercice 2 - Correction Les Pré-requis pour répondre aux questions de l’exercice : 1 - Le fichier SMARTTAG 2 - Helper « Page » : .page.set({ […] }) 3 - Helper « Publisher » impression : .publisher.set({ […] }) 4 - Helper « Publisher » clic: . publisher.send({ […] })
Exercice 2 – Correction Faire un appel au fichier « smarttag.js ». La configuration (chemin relatif) ci-dessous indiquera que votre fichier smarttag.js est situé au même niveau que votre page HTML. <script src="./smarttag.js"></script> Initialiser le tracker ce qui permettra d’utiliser les helpers : var tag = new ATInternet.Tracker.Tag(); Marquer la page : tag.page.set({ name:'exercice_2' }); Les visiteurs identifiés : tag.identifiedVisitor.set({ id: ‘1234’, // Type String (avec côtes) : &at= category: 1 });
Exercice 2 – Correction Marquer un clic d’impression publisher au chargement de la page : tag.publisher.add({ impression:{ campaignId : '[Super-Pepsi]', creation : '[Picture]', variant : '[The_Variant]', format : '[format-125*125]' } }); Envoyer un hit : tag.dispatch(); Mesurer un clic publisher via un événement JS de type onclick (code HTML) : <a href="#" onclick="return tag.publisher.send({elem:this,click:{campaignId:'[Super-Pepsi]',creation:'[Picture]',variant:'[The_Variant]',format:'[format-125*125]'}});"><img src=‘Img_link’></a>
Exercice 2 – Correction Marqueur complet présent dans la balise Script du footer <script> var tag = new ATInternet.Tracker.Tag(); //Initialiser le tracker tag.publisher.send({ impression:{ // Objet impression Publisher campaignId : '[Super-Pepsi]', // Nom de la campagne creation : '[Picture]', // Libellé Création variant : '[The_Variant]', // Libellé Variante format : '[format-125*125]‘ // Libellé format } }); tag.identifiedVisitor.set({ id: ‘1234’, // Id visiteur identifié au format STRING. Le paramètre remonté sera donc « at ». category: 1 // Catégorie du visiteur identifié tag.page.set({ name:'exercice_2‘ // Nom de la page tag.dispatch(); // Envoyer le hit </script>
Exercice 2 – Correction Hit généré au chargement de la page : http://logc406.xiti.com/hit.xiti?s=562841&s2=&p=exercice_2&at=1234&ac=1 Hit d’impression Publisher généré au chargement de la page : http://logc406.xiti.com/hit.xiti?s=562841&ati=PUB-[Super-Pepsi]-[Picture]-[The_Variant]-[format-125*125]----&type=AT Hit Publisher généré au clic sur l’image : http://logc406.xiti.com/hit.xiti?s=562841&atc=PUB-[Super-Pepsi]-[Picture]-[The_Variant]-[format-125*125]----&type=AT
Exercice 2 – Correction Il est possible d’allez plus loin dans cet exercice : Détecter l’action de clic en « JS / Jquery ». Créer une fonction « clic publisher » qui permettra de générer un hit de clic dynamique. Placer le code du marqueur dans un fichier externe (ex : ex-2-advanced.js). Exemple dans le fichier : - exercice-2-advanced.html - ex-2-advanced.js Utilisation des attributs data-* dans le « ahref » pour récupérer des informations Publisher
Exercice 3 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Simuler la création d’un panier au clic sur le bouton « Add to cart ».
Exercice 3 - Correction Les Pré-requis pour répondre aux questions de l’exercice : 1 - Le fichier SMARTTAG 2 - Helper « Page » : .page.set({ […] }) 3 - Helper « Cart » : .cart.add({ […] }) / .cart.set ({ […] })
Exercice 3 – Correction <div class="add-cart-button"> Faire un appel au fichier « smarttag.js ». La configuration (chemin relatif) ci-dessous indiquera que votre fichier smarttag.js est situé au même niveau que votre page HTML. <script src="./smarttag.js"></script> Pour simuler la création d’un panier, une fonction sera appelée dans un événement JS de type « onclick » au moment de l’action de clic sur le bouton « add to cart » : function At_CreateCart(){ Instruction de ma fonction } Appel de la fonction côté HTML <div class="add-cart-button"> <a href="#" onclick=“At_CreateCart();" class="le-button">add to cart</a> </div>
Exercice 3 – Correction Création du panier : Initialiser le tracker ce qui permettra d’utiliser les helpers : var tag = new ATInternet.Tracker.Tag(); Nom de la page panier : tag.page.set({ name:'exercice_3_basket' }); Création du panier : tag.cart.set({cartId: 4568, isBasketPage: true}); Ajouter dans le hit le paramètre &tp=cart tag.setParam("tp","cart");
Exercice 3 – Correction Création du contenu du panier : tag.cart.add({ product: { category: “1[SHARP]", productId: “2[LP-70UD1U_70\"_class_aquos_4K_ultra_HD]", quantity: 1, unitPriceTaxIncluded: 1199.00, unitPriceTaxFree: 964.00, amountProducts: 1199.00 } }); Envoyer un hit : tag.dispatch();
Exercice 3 – Correction Marqueur complet présent dans la balise Script du footer <script> function At_CreateCart(){ var tag = new ATInternet.Tracker.Tag(); //Initialisation du tracker tag.page.set({ name:'My_Basket_Page' }); //Déclaration de la page tag.cart.set({cartId: 4568, isBasketPage: true}); //Déclaration du panier tag.setParam("tp","cart"); //Ajout du paramètre &tp=cart dans le hit tag.cart.add({ //Ajout du produit au panier product: { category: "1[SHARP]", //Catégorie du produit productId: "2[LP-70UD1U_70\"_class_aquos_4K_ultra_HD]", //Nom du produit quantity: 1, //Quantité produit unitPriceTaxIncluded: 1199.00, //Prix unitaire TTC unitPriceTaxFree: 964.00, //Prix unitaire HT amountProducts: 1199.00 //Montant total produit } }); tag.dispatch(); </script>
Exercice 3 – Correction Hit panier généré au clique sur le bouton Add to cart : http://logc406.xiti.com/hit.xiti?s=562841&idcart=2199&tp=cart&pdt1=1[sharp]::2[LP-70ud1u_70%22_class_aquos_4k_ultra_hd]&qte1=1&mt1=1199.00&mtht1=964.00&roimt1=1199.00&p=exercice_3_basket&s2=&ref=
Exercice 3 – Correction Il est possible d’allez plus loin dans cet exercice : Détecter l’action de clic en « JS / Jquery ». Récupérer dynamiquement les champs de la fiche produit. Placer le code du marqueur dans un fichier externe (ex : ex-3-advanced.js). Exemple dans le fichier : - exercice-3-advanced.html - ex-3-advanced.js Ajout de la class « .le-button » sur le lien « Add to cart »
Exercice 4 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Ajouter deux produits au panier. Simuler une commande SALES TRACKER.
Exercice 4 - Correction Les Pré-requis pour répondre aux questions de l’exercice : 1 - Le fichier SMARTTAG 2 - Helper « Page » : .page.set({ […] }) 3 - Helper « Cart » : .cart.add({ […] }) / .cart.set ({ […] }) 4 - Helper « Order » : .order.set ({ […] })
Informations Nécessaires: Exercice 4 - Correction Informations Nécessaires: Produit A Produit B Commande Prix : 30€ TTC Catégorie : Shoes Quantité : 1 Réduction : 5€ TTC Code de réduction : « Sale » Prix : 20€ TTC Catégorie : Jeans Taxe : 20% Réduction : 10€ Code de réduction : « First_timer » Paiement : CB Coût livraison : 6€ Livraison : « Express »
Exercice 4 – Correction Création du panier : Faire un appel au fichier « smarttag.js ». La configuration (chemin relatif) ci-dessous indiquera que votre fichier smarttag.js est situé au même niveau que votre page HTML. <script src="./smarttag.js"></script> Initialiser le tracker ce qui permettra d’utiliser les helpers : var tag = new ATInternet.Tracker.Tag(); Nom de la page de confirmation : tag.page.set({ name:‘confirmation_page' }); Création du panier : tag.cart.set({cartId: 4569});
Exercice 4 – Correction Création du panier pour le produit A et B: tag.cart.add({ //Produit A product: { category: '2[Shoes]', //Catégorie du produit productId: '3[Fred_Perry]', //Libellé du produit quantity: 1, //Quantité unitPriceTaxIncluded: 30, //Coût unitaire TTC unitPriceTaxFree: 24, //Coût unitaire HT discountTaxIncluded: 5, //Réduction TTC discountTaxFree: 4, //Réduction HT promotionalCode: 'SALE', //Libellé code réduction amountProducts: 25 //Montant total produit } }); tag.cart.add({ //Produit B product: { category: '3[Jeans]', productId: '4[Levis]', quantity: 1, unitPriceTaxIncluded: 20, unitPriceTaxFree: 16, //discountTaxIncluded: 0, //discountTaxFree: 0, //promotionalCode: '', amountProducts: 20 } });
Exercice 4 – Correction Création de la commande : tag.order.set({ orderId: 1234, //Order ID turnover: 41, //Chiffre d’affaire status: 3, //Code 3 = validé newCustomer: true, //Nouveau client : true / false paymentMethod: 1, //Code 1 = CB }); amount: { //Objet : Montant amountTaxIncluded: 41, //Montant de la commande (Toutes taxes comprises) amountTaxFree: 32.8, //Montant de la commande (Hors taxe) taxAmount: 8.2 //Montant de la taxe }, delivery: { //Objet : Livraison shippingFeesTaxIncluded: 6, //Montant de la livraison(Toutes taxes comprises) shippingFeesTaxFree: 4.8, //Montant de la livraison (Hors taxe) deliveryMethod: ‘1[Express]’ //Libellé livraison discount: { //Objet : Réduction discountTaxIncluded: 10, //Montant de la réduction commande (Toutes taxes comprises) discountTaxFree: 8, //Montant de la réduction commande (Hors taxe) promotionalCode: ’First_Timer’ //Libellé code réduction }
Exercice 4 – Correction Déclaration de l’indicateur de commande o3 : tag.order.set({ orderCustomVariables: [,,'[homme]'] }); Les indicateurs de commande remontent dans l’ordre ou ils sont positionnés dans l’objet orderCustomVariables . Dans notre exemple nous souhaitons remonter o3 donc il est necessaire de le placer en 3ème position. Envoyer un hit : tag.dispatch();
Exercice 4 – Correction Code source complet : exercice-4.html Hit de commande généré au chargement de la page : http://logc406.xiti.com/hit.xiti?s=562841&idcart=4569&pdt1=2[Shoes]::3[Fred_Perry]&qte1=1&mt1=30&mtht1=24&dsc1=5&dscht1=4&pcode1=SALE&roimt1=25&pdt2=3[Jeans]::4[Levis]&qte2=1&mt2=20&mtht2=16&roimt2=20&cmd=1234&roimt=41&st=3&newcus=1&mp=1&mtht=32.8&mtttc=41&tax=8.2&fp=6&fpht=4.8&dl=[Express]&dsc=10&dscht=8&pcd=First_Timer&o3=[man]&p=confirmation_page&s2=&ref=
Exercice 4 – Correction Il est possible d’allez plus loin dans cet exercice : Gérer dynamiquement l’attribution des valeurs Sales Tracker (calculs). Placer le code du marqueur dans un fichier externe (ex : ex-4-advanced.js). Exemple dans le fichier : - exercice-4-advanced.html - ex-4-advanced.js Les informations relatives à la commande seront déclarées dans la page html.
Exercice 5 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Manipuler les trigger pour simuler l’attente de données partenaires. Le hit devra contenir les données Nuggad dans le paramètre « stc »
Exercice 5 - Correction Les Pré-requis pour répondre aux questions de l’exercice : 1 - Le fichier SMARTTAG 2 - Helper « Page » : .page.set({ […] }) 3 - Helper « onTrigger » : . onTrigger({ […] }) 4 - Helper « Emit » : .emit({ […] }) 5 - Helper « Page » pour alimenter le STC : .page.set({ customObject {[…]} })
Exercice 5 – Correction Faire un appel au fichier « smarttag.js ». La configuration (chemin relatif) ci-dessous indiquera que votre fichier smarttag.js est situé au même niveau que votre page HTML. <script src="./smarttag.js"></script> Initialiser le tracker ce qui permettra d’utiliser les helpers : var tag = new ATInternet.Tracker.Tag(); Marquer la page : tag.page.set({ name:'exercice_5' });
Exercice 5 – Correction Création d’un trigger .emit : var emit = function() { tag.emit('Nuggad:success', nuggAIArray); }; La méthode onTrigger permet de déclarer le trigger et la fonction à exécuter : tag.onTrigger('Nuggad:success', function () { tag.page.set({customObject: nuggAIArray}); tag.dispatch(); }); « Nuggad:success » : Le trigger sur lequel on veut s’inscrire. Dans cette fonction se trouve un helper « page » (pour alimenter le paramètre « &stc ») et un helper « dispatch » pour envoyer le hit si nous rentrons dans ce trigger. Si on reçoit « Nuggad:success » de la part de la fonction contenu dans « .emit », « onTrigger » sera exécuté et le hit sera envoyé avec les valeurs attendues. Modification de la fonction Timeout : setTimeout(emit, 5000);
Exercice 5 – Correction Marqueur complet présent dans la balise Script du footer <script type="text/javascript"> var nuggAIArray = {d2: 3, d1: 2, d9: 3, d12: 1}; </script> var tag = new ATInternet.Tracker.Tag(); //initialisation du tracker tag.page.set({ name: 'maPage' }); //Nom de la page tag.onTrigger('Nuggad:success', function () { //Trigger sur lequel on souhaite s’inscrire + fonction tag.page.set({customObject: nuggAIArray}); //Alimenter le paramètre &stc= avec le tableau de données NuggAd tag.dispatch(); //Envoyer le hit alert("Hit sent"); }); var emit = function() { //Création du trigger tag.emit('Nuggad:success', nuggAIArray); }; setTimeout(emit, 5000);
Exercice 5 – Correction Code source complet : exercice-5.html Hit généré après 5 secondes : http://logc406.xiti.com/hit.xiti?s=562841&p=maPage&s2=&stc=%7B%22d2%22%3A3%2C%22d1%22%3A2%2C%22d9%22%3A3%2C%22d12%22%3A1%7D&ref= Hit décodé http://logc406.xiti.com/hit.xiti?s=562841&p=maPage&s2=&stc={"d2":3,"d1":2,"d9":3,"d12":1}&ref=
Sources Documentation : http://developers.atinternet-solutions.com/javascript-fr/ Autre documentation : SmartTag_Training.pdf