guide technique : intégration des tags affilae dans google tag manager

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

1) Créer le tag 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

INTRODUCTION

Google Tag Manager est un outil qui vous permet degérer facilement les tags de votre site web.

Afin de faciliter la mise en place de ses scripts detracking pour les anonceurs qui utilisent Google TagManager, Affilae vous propose ce guide pratique ettechnique.

Remarques :

Les screenshots de ce guide sont présents à titreindicatif, 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 Affilaejavascript (page 6) .

Les « tags » correspondent aux « balises » dansGoogle Tag Manager

3

http://www.google.fr/tagmanager/

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.

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

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

1

https://developers.google.com/tag-manager/

ETAPE 3 : A JOUT DU TAG AFFILAE JAVASCRIPT

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-coller ensuite le code javascript de tracking Affilae (onglet “config” de votre programme) dans l’encart HTML prévu à cet effet.

6

1

1

2

2


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 choisissez alors la règle “Toutes les pages” parmi les règles existantes, puis enregistrer.

7


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

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.

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”


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


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 pageConditions : {{url}} | contient | order/confirmation (indiquer l’url relative de votre page de confirmation de conversion)

11

1

1


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éeChamps 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


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

ETAPE 5 : CRÉER UNE VERSION ET PUBLIER

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

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

[email protected]

15

guide technique : intégration des tags affilae dans google tag manager

Technology