SMARTTAG EXERCICES.

Présentation au sujet: "SMARTTAG EXERCICES."— Transcription de la présentation:

1 SMARTTAG EXERCICES

2 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.

3 Zoom sur le tracker Le tracker :
› Tag : base technique pour le marquage d’un site › Plugin : extension métier du tracker

4 Le marqueur Un fichier JavaScript comprenant en dur ›Une version
›Une configuration par défaut

5 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.

6 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();

7 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>).

8 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

9 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 ».

10 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()

11 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' });

12 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' }

13 Exercice 1 – Correction Moteur de recherche interne :
tag.internalSearch.set({ keyword: 'keyword', resultPageNumber: '0' }); Envoyer un hit : tag.dispatch();

14 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=" 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

15 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>

16 Exercice 1 – Correction Code source : exercice-1.html
Hit généré au chargement de la page : Hit généré au clic sur le bouton « Make another search » : Hit généré au clic sur le bouton « Leave me alone » :

17 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

18 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 ».

19 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({ […] })

20 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 });

21 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>

22 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>

23 Exercice 2 – Correction Hit généré au chargement de la page :
Hit d’impression Publisher généré au chargement de la page : Hit Publisher généré au clic sur l’image :

24 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

25 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 ».

26 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 ({ […] })

27 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>

28 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");

29 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: , unitPriceTaxFree: , amountProducts: } }); Envoyer un hit : tag.dispatch();

30 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: , //Prix unitaire TTC unitPriceTaxFree: , //Prix unitaire HT amountProducts: //Montant total produit } }); tag.dispatch(); </script>

31 Exercice 3 – Correction Hit panier généré au clique sur le bouton Add to cart :

32 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 »

33 Exercice 4 Consignes : Charger le fichier javascript « Smarttag » dans le Head de la page. Ajouter deux produits au panier. Simuler une commande SALES TRACKER.

34 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 ({ […] })

35 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 »

36 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});

37 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 } });

38 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 }

39 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();

40 Exercice 4 – Correction Code source complet : exercice-4.html
Hit de commande généré au chargement de la page :

41 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.

42 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 »

43 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 {[…]} })

44 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' });

45 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);

46 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);

47 Exercice 5 – Correction Code source complet : exercice-5.html
Hit généré après 5 secondes : Hit décodé

48 Sources Documentation : Autre documentation : SmartTag_Training.pdf