Guide Technique : intégration des tags Affilae dans Google Tag Manager

  • 561 views
Uploaded on

Comment intégrer les tags de tracking Affilae avec Google Tag Manager. Guide technique descriptif + vues du process

Comment intégrer les tags de tracking Affilae avec Google Tag Manager. Guide technique descriptif + vues du process

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
561
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. COMMENTINTÉGRERLESTAGSAFFILAEDANSGOOGLETAGMANAGER Guide technique
  • 2. SOMMAIRE Introduction 3 Etape 1 :Création compte et conteneur 4 Etpae 2 : Intégration du conteneur 5 Etape 3 : Ajout du tag Affilae javascript 6 2 1)Créer letag javascript Affilae 6 2)Créer la règle de déclenchement du tag 7 Etape 4 : Ajout du code de conversion Affilae 9 Etape 5 : Créer une version et publier 14 Contact 15 1)Injection des variables dans Google Tag Manager 9 2)Créer des macros pour récupérer les valeurs 9 3)Créer une nouvelle règle pour le déclenchement du code de conversion Affilae 11 4)Créer le tag du code de conversion Affilae 12 5)Associer la règle “conversion page” à la balise “affilae conversion” 13
  • 3. INTRODUCTION GoogleTagManagerestunoutilquivouspermetdegérerfacilementlestagsdevotresiteweb. AfindefaciliterlamiseenplacedesesscriptsdetrackingpourlesanonceursquiutilisentGoogleTagManager,Affilaevousproposeceguidepratiqueettechnique. Remarques: Lesscreenshotsdeceguidesontprésentsàtitreindicatif,ilsvousaidentàmieuxvisualiserchaqueétapedelaconfigurationdeGoogleTagManager. SivousutilisezdéjàGoogleTagManager,rendez- vousdirectementàl’étape3:AjoutdestagsAffilaejavascript(page6). Les«tags»correspondentaux«balises»dansGoogleTagManager 3
  • 4. ETAPE1 : CRÉATIONCOMPTEETCONTENEUR Vous devez d'abord configurer votre compte Google Tag Manager au nom de votre société ou de votre client, et créer un "conteneur" au nom du site web. Cliquer ensuite sur "page web" pour ajoutez l'url de votre site. Cliquer sur le bouton "créer un compte et un conteneur" et valider ensuite les "Conditions d'utilisation de Google Gestionnaires de Balises". 4 1 2 3 1 2 3
  • 5. ETPAE2 : INTÉGRATIONDUCONTENEUR Un conteneur contient toutes les balises pour votre site, positionnez-le juste après la balise d'ouverture <body>. Il est nécessaire de créer un nouveau conteneur à chaque fois que vous démarrez la gestion des tags pour un nouveau site Web. Toutes les infos développeurs pour l'intégration sont disponibles ici : https://developers.google.com/tag-manager/ 5 1 1
  • 6. ETAPE3 : AJOUTDUTAGAFFILAEJAVASCRIPT 1)Créer le tag javascript Affilae Une fois le code du conteneur activé, soit celui-ci est vide, soit il contient déjà les tags de vos autres partenaires. Pour ajouter le tag Affilae, cliquer sur “Créer” > “Balise” Nom de la balise : Affilae Javascript Type de balise : Balise HTML personalisée Copier-collerensuite le code javascript de tracking Affilae(onglet “config” de votre programme) dans l’encart HTML prévu à cet effet. 6 1 1 2 2
  • 7. ETAPE3 : AJOUTDUTAGAFFILAEJAVASCRIPT 2)Créer la règle de déclenchement du tag Il est nécessaire d’ajouter une règle pour déterminer quand le javascript Affilae doit s’afficher. Ici il doit s’afficher sur toutes les pages. Deux possibilités : La règle “Toutes les pages” est déjà créée. Dans ce cas, il faut l’ajouter à la balise “Affilae Javascript” : •Aller dans le menu “Balises”, cliquer sur la balise “Affilae Javascript”, puis sur le coté droit cliquer sur le bouton “ajouter” règle de déclenchement. •La pop-up (ci-dessous) s’ouvre et choisissezalors la règle “Toutes les pages” parmi les règles existantes, puis enregistrer. 7
  • 8. ETAPE3 : AJOUTDUTAGAFFILAEJAVASCRIPT Si la règle “Toutes les pages” n’est pas présente, il faut la créer. Dans le menu “Vue d’ensemble” cliquer sur l’onglet “Règles”, et ajouter une nouvelle règle. •Nommer la règle : “Toutes les pages” •Condition : {{url}} | correspond à RegEx | .* •Enregistrer •Ensuite attribuer la règle “Toutes les pages” à la balise “Affilae javascript” comme dans le point précédent 8 1 1
  • 9. ETAPE4 : AJOUTDUCODEDECONVERSIONAFFILAE Plusieurs étapes sont nécessaires : 1)Injection des variables dans Google Tag Manager L’objectif du script suivant est de transmettre à Google Tag Manager les variables de la conversion. Attention :Placez le script suivant avant celui du conteneur de Google Tag Manager et renseignez dynamiquement les variables ruleKey, conversionId, customerId, amountet payment. 9 <script> // MUST BE PLACED BEFORE THE GOOGLE TAG MANAGER SCRIPT // push conversion's data into Google Tag Manager dataLayer = [{ 'affilae.ruleKey': 'xxxxxxxxxxxxxxxxxxxxxxxx- xxxxxxxxxxxxxxxxxxxxxxxx', 'affilae.conversionId': '123', 'affilae.customerId': '123', 'affilae.amount': '100.5', 'affilae.payment': 'online' // online | bankwire | cheque | other }]; </script> 2)Créer des macros pour récupérer les valeurs Les macros permettent de pouvoir exploiter les variables renseignées à l’étape précédente dans les Balises. Pour créer une macro : menu “Vue d’ensemble” > onglet “Macros”
  • 10. ETAPE4 : AJOUTDUCODEDECONVERSIONAFFILAE Des macros par défaut de Google Tag Manager sont déjà présentes, il faut maintenant créer les macros d’Affilae. Cliquer sur le bouton rouge “Créer” > “Macro” Compléter la macro avec les données suivantes, puis enregistrer. Nom de la macro : affilae-amount Type de variable : Variable de couche de données Nom de la variable de la couche de données : affilae-amount 10 Il faut ensuite répéter le même processus pour créer les macros suivantes : affilae-conversion-id affilae-custumer-id affilae-payment affilae-rule-key Vous pouvez spécifier la valeur par défaut “online” sur la macro affilae-payment si vos conversions sont sousmises à un règlement en ligne. 1 1
  • 11. ETAPE4 : AJOUTDUCODEDECONVERSIONAFFILAE 3)Créer une nouvelle règle pour le déclenchement du code de conversion Affilae Il est nécessaire que l’iframe de conversion s’affiche uniquement sur les pages de confirmation de conversion, pour cela il faut créer une règle. Nom de la règle : Conversion page Conditions : {{url}} | contient | order/confirmation (indiquer l’url relative de votre page de confirmation de conversion) 11 1 1
  • 12. ETAPE4 : AJOUTDUCODEDECONVERSIONAFFILAE 4)Créer le tag du code de conversion Affilae C’est l’avant dernière étape de la création du code de conversion Affilae nécessaire à la remontée des conversions. Comme vous pouvez le voir, celui-ci exploite les maccros que nous avons configuré. Nous allons suivre le même process que celui de la création du tag “Affile Javascript” : Cliquer sur le bouton “Créer” > “Balises” Nom de la balise : “Affilae conversion” Type de balise : Balise HTML personnalisée Champs HTML : copier-coller l’iframe suivante : 12 <iframe src="https://lb.affilae.com/?key={{affilae-rule- key}}&id={{affilae-conversion-id}}&amount={{affilae- amount}}&payment={{affilae-payment}}" frameborder="0" width="1" height="1"></iframe> Enregistrer 2 2 1 1
  • 13. ETAPE4 : AJOUTDUCODEDECONVERSIONAFFILAE 5)Associer la règle “conversion page” à la balise “affilae conversion” La aussi même process que pour la règle “Toutes les pages”. La règle “Conversion page” est déjà créée, il faut alors la lier à la balise “affilae conversion” : Aller dans le menu “Balises”, cliquer sur la balise “affilae conversion”, puis sur le coté droit cliquer sur le bouton“ajouter” règle de déclenchement. La pop-up (ci-dessous) s’ouvre et choisissez alors la règle “Conversion page” parmi les règles existantes, puis enregistrer. 13 1 1
  • 14. ETAPE5 : CRÉERUNEVERSIONETPUBLIER Avec Google Tag Manager, il est nécessaire de créer une version afin de sauvegarder les paramètres que vous venez de créer et effectuer des tests. Sur la page “Vue d’ensemble”, cliquer sur le bouton “créer une version” 14 1 1 Avec Google Tag Manager les tags ajoutés ne sont pas publiés automatiquement, vous devez les publier à la main. Une fois la version créé, cliquer sur le bouton “publier” pour activer vos nouveaux paramètres. 2 2 Bravo ! Vous avez terminé.
  • 15. CONTACT Contactez-nous pour toute demande d’information, de support ou simplement pour remonter un bug : 09 72 33 76 10 (numéro non surtaxé) contact@affilae.com 15