SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
COMMENT INTÉGRER LES TAGS AFFILAE
DANS GOOGLE TAG MANAGER
Guide technique
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
Etape 4 : Ajout du code de conversion Affilae 7
Contact 13
1) Injection des variables dans Google Tag Manager 7
2) Création et configuration de la balise 8
3) Conditionner le déclenchement du code de
conversion à un événement « vente »
9
4) Ajout d’un second déclencheur « conversion event » 10
5) Ajout de variable de couches de données 11
INTRODUCTION
Google Tag Manager est un outil qui vous permet de
gérer facilement les tags de votre site web.
Afin de faciliter la mise en place de ses scripts de
tracking pour les anonceurs qui utilisent Google Tag
Manager, Affilae vous propose ce guide pratique et
technique.
Remarques :
üLes screenshots de ce guide sont présents à titre
indicatif, ils vous aident à mieux visualiser chaque
étape de la configuration de Google Tag Manager.
üSi vous utilisez déjà Google Tag Manager, rendez-
vous directement à l’étape 3 : Ajout des tags Affilae
javascript (page 6) .
üLes « tags » correspondent aux « balises » dans
Google Tag Manager
3
ETAPE 1 : CRÉATION COMPTE ET CONTENEUR
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.
Remplissez le nom du compte puis le nom du conteneur
Cliquer sur le bouton "créer" et valider ensuite les
"Conditions d'utilisation de Google Gestionnaires de Balises".
4
1
2
3
1
2
3
ETPAE 2 : INTÉGRATION DU CONTENEUR
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
*
*
ETAPE 3 : A JOUT DU TAG AFFILAE JAVASCRIPT
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
üChoisir le produit : Balise HTML personalisée
Copier-coller ensuite le code javascript de tracking Affilae (onglet
“config” de votre programme) dans l’encart HTML prévu à cet effet.
Conditionner le déclenchement de la balise sur « toutes les pages »
6
1
1
2
2
3
3
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
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, amount et payment.
La variable rulekey est disponible dans le tag de conversion.
7
<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': ‘votre variable numéro de commande',
'affilae.customerId': ’votre variable id client',
'affilae.amount': ’votre variable montant commande HT',
'affilae.payment': 'online' // online | bankwire | cheque | other
}];
</script>
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
2) Création et configuration de la balise
Pour ajouter le code de conversion Affilae, il est nécessaire que vous
créiez une nouvelle balise, sur le même modèle que la précédente.
8
1
1 Produit : Balise HTML Personnalisée
2
2
Type de Balise : HTML Personnalisée
Code de conversion à copier :
<iframe src="https://lb.affilae.com/?key={{affilae-rulekey}}&id={{affilae-
conversion-id}}&amount={{affilaeamount}}&payment={{affilae-payment}}"
frameborder="0" width="1" height="1"></iframe>
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
9
3) Conditionner le déclenchement du code de conversion
à un événement « vente »
Choisir le déclencheur : cliquer sur « plus » puis « nouveau » afin
de créer un nouveau déclencheur
La pop-up suivante s’affiche :
Choisir un événement : Page vue
Ajouter un déclencheur « page url » ou vous indiquer l’url de la
page confirmation de commande
2
1
2
1
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
10
4) Ajout d’un second déclencheur variable de couches de
données
Choisir le déclencheur : cliquer sur « plus » puis « nouveau » afin
de créer un nouveau déclencheur
La pop-up suivante s’affiche :
Choisir un événement : Evénement personnaliser
Créer ensuite les conditions de déclenchement en ajoutant vos
variables précédemment cité page 7 et 8 (voir page 11).
*
*
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
11
5) Ajout de variable de couches de données
GTM doit pouvoir reconnaître les variables du script que nous
avons créer page 7 afin de pouvoir assurer le déclenchement du
tag de conversion.
Pour cela, ajoutez une condition de déclenchement puis cliquer
sur « nouvelle variable » et ajouter ensuite une à une les
variables nécessaires.
Exemple ci-dessous :
Type : Variable de couche de données
Nom de la variable : affilae-amount
Version : version 2
Cliquer ensuite sur « créer une variable »
1
2
1
2
ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE
12
Répéter le même processus pour créer les variable 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.
Vous obtenez ensuite cet écran et vous n’avez plus qu’à
enregistrer la balise et publier.
N’oubliez pas ensuite de faire correspondre à la variable
créée votre propre variable renseigner dans le script page 7.
CONTACT
Contactez-nous pour toute demande d’information,
de support ou simplement pour remonter un bug :
05 35 00 44 34 (numéro non surtaxé)
contact@affilae.com
13

Contenu connexe

En vedette

Le circuit des cabanes
Le circuit des cabanesLe circuit des cabanes
Le circuit des cabanes
miloo07
 

En vedette (20)

Affilae - Guide affiliation annonceur (FR)
Affilae - Guide affiliation annonceur (FR)Affilae - Guide affiliation annonceur (FR)
Affilae - Guide affiliation annonceur (FR)
 
Affilae - Guide Affilié (FR)
Affilae - Guide Affilié (FR)Affilae - Guide Affilié (FR)
Affilae - Guide Affilié (FR)
 
Drrt cvl atelier ceii cci chartres
Drrt cvl   atelier ceii cci chartresDrrt cvl   atelier ceii cci chartres
Drrt cvl atelier ceii cci chartres
 
Drrt cvl présentation icon 23032017 - focus cir&amp;cifre - ver finale
Drrt cvl   présentation icon 23032017 - focus cir&amp;cifre - ver finaleDrrt cvl   présentation icon 23032017 - focus cir&amp;cifre - ver finale
Drrt cvl présentation icon 23032017 - focus cir&amp;cifre - ver finale
 
Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique F...
Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique F...Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique F...
Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique F...
 
Suivi du E-commerce amélioré pour Prestashop avec Google Tag Manager
Suivi du E-commerce amélioré pour Prestashop avec Google Tag ManagerSuivi du E-commerce amélioré pour Prestashop avec Google Tag Manager
Suivi du E-commerce amélioré pour Prestashop avec Google Tag Manager
 
Mise en place du suivi multi appareil Google Analytics pour Prestashop avec G...
Mise en place du suivi multi appareil Google Analytics pour Prestashop avec G...Mise en place du suivi multi appareil Google Analytics pour Prestashop avec G...
Mise en place du suivi multi appareil Google Analytics pour Prestashop avec G...
 
Le circuit des cabanes
Le circuit des cabanesLe circuit des cabanes
Le circuit des cabanes
 
Proceso de paz
Proceso de pazProceso de paz
Proceso de paz
 
Consejo nacional electoral
Consejo nacional electoralConsejo nacional electoral
Consejo nacional electoral
 
Paquetes estadísticos
Paquetes estadísticosPaquetes estadísticos
Paquetes estadísticos
 
Compuertas logicas
Compuertas logicasCompuertas logicas
Compuertas logicas
 
(Citer)ds150 e et wow avec multidiag pro + cdp
(Citer)ds150 e et wow avec multidiag pro + cdp(Citer)ds150 e et wow avec multidiag pro + cdp
(Citer)ds150 e et wow avec multidiag pro + cdp
 
VALORES
VALORESVALORES
VALORES
 
Les fautes d’orthographe
Les fautes d’orthographeLes fautes d’orthographe
Les fautes d’orthographe
 
software maliciosos
software maliciosossoftware maliciosos
software maliciosos
 
Kinect, Tablette ou PC, Microsoft Dynamics NAV 2013 la nouvelle expérience ERP
Kinect, Tablette ou PC, Microsoft Dynamics NAV 2013 la nouvelle expérience ERPKinect, Tablette ou PC, Microsoft Dynamics NAV 2013 la nouvelle expérience ERP
Kinect, Tablette ou PC, Microsoft Dynamics NAV 2013 la nouvelle expérience ERP
 
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
 
Kompetenznetze Deutschland
Kompetenznetze DeutschlandKompetenznetze Deutschland
Kompetenznetze Deutschland
 
INFORMATICA GRUPO 7
INFORMATICA GRUPO 7INFORMATICA GRUPO 7
INFORMATICA GRUPO 7
 

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

Comment migrer d’virtuemart à prestashop à cart2cart
Comment migrer d’virtuemart à prestashop à cart2cartComment migrer d’virtuemart à prestashop à cart2cart
Comment migrer d’virtuemart à prestashop à cart2cart
Cart2Cart
 
Installer Google Analytics avec Google Tag Manager
Installer Google Analytics avec Google Tag ManagerInstaller Google Analytics avec Google Tag Manager
Installer Google Analytics avec Google Tag Manager
Bruno Guyot
 

Similaire à Guide Technique : intégration des tags Affilae dans Google Tag Manager (20)

Tuto : Configurer Facebook Conversion API avec Google Tag Manager et Google A...
Tuto : Configurer Facebook Conversion API avec Google Tag Manager et Google A...Tuto : Configurer Facebook Conversion API avec Google Tag Manager et Google A...
Tuto : Configurer Facebook Conversion API avec Google Tag Manager et Google A...
 
Suivi du Commerce Electronique Avec Google Tag Manager
Suivi du Commerce Electronique Avec Google Tag ManagerSuivi du Commerce Electronique Avec Google Tag Manager
Suivi du Commerce Electronique Avec Google Tag Manager
 
Installation de Google Tag Manager sur Wordpress et suivi avancé Google Analy...
Installation de Google Tag Manager sur Wordpress et suivi avancé Google Analy...Installation de Google Tag Manager sur Wordpress et suivi avancé Google Analy...
Installation de Google Tag Manager sur Wordpress et suivi avancé Google Analy...
 
Comment Migrer d’3dcart à Magento
Comment Migrer d’3dcart à MagentoComment Migrer d’3dcart à Magento
Comment Migrer d’3dcart à Magento
 
Comment Migrer d’xt:Commerce à Magento
Comment Migrer d’xt:Commerce à MagentoComment Migrer d’xt:Commerce à Magento
Comment Migrer d’xt:Commerce à Magento
 
Comment Migrer d’Magento à PrestaShop
Comment Migrer d’Magento à PrestaShopComment Migrer d’Magento à PrestaShop
Comment Migrer d’Magento à PrestaShop
 
Comment Migrer d’Magento à Shopify
Comment Migrer d’Magento à ShopifyComment Migrer d’Magento à Shopify
Comment Migrer d’Magento à Shopify
 
Comment Migrer d’Interspire à Magento
Comment Migrer d’Interspire à MagentoComment Migrer d’Interspire à Magento
Comment Migrer d’Interspire à Magento
 
Comment Migrer d’OpenCart à PrestaShop
Comment Migrer d’OpenCart à PrestaShopComment Migrer d’OpenCart à PrestaShop
Comment Migrer d’OpenCart à PrestaShop
 
Comment Migrer d’BigCommerce à Shopify
Comment Migrer d’BigCommerce à ShopifyComment Migrer d’BigCommerce à Shopify
Comment Migrer d’BigCommerce à Shopify
 
Comment Migrer d’WooCommerce à Magento
Comment Migrer d’WooCommerce à MagentoComment Migrer d’WooCommerce à Magento
Comment Migrer d’WooCommerce à Magento
 
Mise en place d'un suivi des conversions Adwords avancé avec GTM sur Wordpress
Mise en place d'un suivi des conversions Adwords avancé avec GTM sur WordpressMise en place d'un suivi des conversions Adwords avancé avec GTM sur Wordpress
Mise en place d'un suivi des conversions Adwords avancé avec GTM sur Wordpress
 
Comment migrer d’virtuemart à prestashop à cart2cart
Comment migrer d’virtuemart à prestashop à cart2cartComment migrer d’virtuemart à prestashop à cart2cart
Comment migrer d’virtuemart à prestashop à cart2cart
 
Formation Google Tag Manager
Formation Google Tag ManagerFormation Google Tag Manager
Formation Google Tag Manager
 
Cartelis formation-google-tag-manager
Cartelis formation-google-tag-managerCartelis formation-google-tag-manager
Cartelis formation-google-tag-manager
 
Comment Migrer d’VirtueMart à OpenCart
Comment Migrer d’VirtueMart à OpenCartComment Migrer d’VirtueMart à OpenCart
Comment Migrer d’VirtueMart à OpenCart
 
Installer Google Analytics avec Google Tag Manager
Installer Google Analytics avec Google Tag ManagerInstaller Google Analytics avec Google Tag Manager
Installer Google Analytics avec Google Tag Manager
 
Suivi des conversions avancé avec Google Analytics et Google Tag Manager sur ...
Suivi des conversions avancé avec Google Analytics et Google Tag Manager sur ...Suivi des conversions avancé avec Google Analytics et Google Tag Manager sur ...
Suivi des conversions avancé avec Google Analytics et Google Tag Manager sur ...
 
Remarketing Facebook avancé avec Google Tag Manager sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager  sur WordpressRemarketing Facebook avancé avec Google Tag Manager  sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager sur Wordpress
 
Valtech - Tag Manager et e-commerce
Valtech - Tag Manager et e-commerceValtech - Tag Manager et e-commerce
Valtech - Tag Manager et e-commerce
 

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

  • 1. COMMENT INTÉGRER LES TAGS AFFILAE DANS GOOGLE TAG MANAGER 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 Etape 4 : Ajout du code de conversion Affilae 7 Contact 13 1) Injection des variables dans Google Tag Manager 7 2) Création et configuration de la balise 8 3) Conditionner le déclenchement du code de conversion à un événement « vente » 9 4) Ajout d’un second déclencheur « conversion event » 10 5) Ajout de variable de couches de données 11
  • 3. INTRODUCTION Google Tag Manager est un outil qui vous permet de gérer facilement les tags de votre site web. Afin de faciliter la mise en place de ses scripts de tracking pour les anonceurs qui utilisent Google Tag Manager, Affilae vous propose ce guide pratique et technique. Remarques : üLes screenshots de ce guide sont présents à titre indicatif, ils vous aident à mieux visualiser chaque étape de la configuration de Google Tag Manager. üSi vous utilisez déjà Google Tag Manager, rendez- vous directement à l’étape 3 : Ajout des tags Affilae javascript (page 6) . üLes « tags » correspondent aux « balises » dans Google Tag Manager 3
  • 4. ETAPE 1 : CRÉATION COMPTE ET CONTENEUR 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. Remplissez le nom du compte puis le nom du conteneur Cliquer sur le bouton "créer" et valider ensuite les "Conditions d'utilisation de Google Gestionnaires de Balises". 4 1 2 3 1 2 3
  • 5. ETPAE 2 : INTÉGRATION DU CONTENEUR 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 * *
  • 6. ETAPE 3 : A JOUT DU TAG AFFILAE JAVASCRIPT 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 üChoisir le produit : Balise HTML personalisée Copier-coller ensuite le code javascript de tracking Affilae (onglet “config” de votre programme) dans l’encart HTML prévu à cet effet. Conditionner le déclenchement de la balise sur « toutes les pages » 6 1 1 2 2 3 3
  • 7. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 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, amount et payment. La variable rulekey est disponible dans le tag de conversion. 7 <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': ‘votre variable numéro de commande', 'affilae.customerId': ’votre variable id client', 'affilae.amount': ’votre variable montant commande HT', 'affilae.payment': 'online' // online | bankwire | cheque | other }]; </script>
  • 8. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 2) Création et configuration de la balise Pour ajouter le code de conversion Affilae, il est nécessaire que vous créiez une nouvelle balise, sur le même modèle que la précédente. 8 1 1 Produit : Balise HTML Personnalisée 2 2 Type de Balise : HTML Personnalisée Code de conversion à copier : <iframe src="https://lb.affilae.com/?key={{affilae-rulekey}}&id={{affilae- conversion-id}}&amount={{affilaeamount}}&payment={{affilae-payment}}" frameborder="0" width="1" height="1"></iframe>
  • 9. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 9 3) Conditionner le déclenchement du code de conversion à un événement « vente » Choisir le déclencheur : cliquer sur « plus » puis « nouveau » afin de créer un nouveau déclencheur La pop-up suivante s’affiche : Choisir un événement : Page vue Ajouter un déclencheur « page url » ou vous indiquer l’url de la page confirmation de commande 2 1 2 1
  • 10. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 10 4) Ajout d’un second déclencheur variable de couches de données Choisir le déclencheur : cliquer sur « plus » puis « nouveau » afin de créer un nouveau déclencheur La pop-up suivante s’affiche : Choisir un événement : Evénement personnaliser Créer ensuite les conditions de déclenchement en ajoutant vos variables précédemment cité page 7 et 8 (voir page 11). * *
  • 11. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 11 5) Ajout de variable de couches de données GTM doit pouvoir reconnaître les variables du script que nous avons créer page 7 afin de pouvoir assurer le déclenchement du tag de conversion. Pour cela, ajoutez une condition de déclenchement puis cliquer sur « nouvelle variable » et ajouter ensuite une à une les variables nécessaires. Exemple ci-dessous : Type : Variable de couche de données Nom de la variable : affilae-amount Version : version 2 Cliquer ensuite sur « créer une variable » 1 2 1 2
  • 12. ETAPE 4 : A JOUT DU CODE DE CONVERSION AFFILAE 12 Répéter le même processus pour créer les variable 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. Vous obtenez ensuite cet écran et vous n’avez plus qu’à enregistrer la balise et publier. N’oubliez pas ensuite de faire correspondre à la variable créée votre propre variable renseigner dans le script page 7.
  • 13. CONTACT Contactez-nous pour toute demande d’information, de support ou simplement pour remonter un bug : 05 35 00 44 34 (numéro non surtaxé) contact@affilae.com 13