Mettre en place le webtracker sur votre site avec GTM

Le tracker web de Probance vous permet de traquer les visites et les actions (mise au panier, commande, …) des membres de votre base cliente sur votre site web. Ce tracking s’effectue grâce à la pose d’un cookie, par vous-même et par Probance, contenant un identifiant unique par membre.

Cette procédure explique comment mettre en place le tracker sur votre site avec Google Tag Manager

1. Mettre en place Google Tag Manager

Cliquez sur Créer un compte
Saisissez un nom pour votre compte. Il s’agit généralement du nom de votre societé ou de votre site
Sélectionnez votre pays
Dans Nom du conteneur, saisissez le nom de votre site
Dans la liste des Plateformes cible proposées, sélectionnez Web
Cliquez sur Créer

Après acceptation des conditions d’utilisation, GTM vous redirigera sur le dashboard de votre conteneur, et vous fournira deux morceaux de code à intégrer dans votre site.

Le premier est à insérer dans la section <head> de votre site
Le second est à insérer immédiatement après l’ouverture du tag <body>

Vous pouvez vérifier qu’ils sont correctement intégrés en saisissant l’url de votre site web et en cliquant sur Tester.

2. Installer le script de tracking

Dans le dashboard de votre conteneur, cliquez sur Ajouter une balise
Nommez votre balise Probance Webtrack
Cliquez sur Configuration de la balise, puis sélectionnez HTML personnalisé dans la liste
Dans l’éditeur de saisie, copiez le script fourni dans le menu Administration > Technique > Tracker web de votre compte Probance One

Cliquez sur Déclenchement, puis sélectionnez l’option Initialization – All pages
Enregistrez la balise

3. Installer le tag des visites

3.1. Préparation du script

Le tag des visites permet de suivre et remonter la navigation complète des visiteurs identifiés.

Le script correspondant peut-être récupéré en cliquant sur l’icone d’information du bloc Visite dans le menu dans le menu Administration > Technique > Tracker web.

Il est de la forme suivante :

<script type="text/javascript" language="JavaScript">
var ViewedPage=function(){
	
	//===== PARTIE 1: CONFIGURATION DU TAG =====

	var typeID= '[Type d'identifiant du visiteur]';
	var my_id = '[Identifiant du visiteur]';
	var pid = '[Identifiant du produit]';
	var aid = '[Identifiant de l'article]';
	var url=document.location.href; 
	
	//===== PARTIE 2: APPEL DU TAG =====

	var crm=null;
	try{
		crm = new PROBANCE_CRMTracker([token webtrack],"Prob_Track",90,"//t4.my-probance.one/webtrax","idprob");
	}catch (err){
		return;
	}
	if(crm == null){
		return;
	}

	var PROBANCE_tracker = new PROBANCE_trackers();
	PROBANCE_tracker.setCRM(crm);
	
	if(my_id != null && my_id != undefined && my_id != ''){
		crm.setCustomer(my_id, typeID);
	}
	PROBANCE_tracker.doNotTrackOnInit();
	PROBANCE_tracker.init();

	if(pid == null || pid == undefined){
		pid = '';
	}
	if(aid == null || aid == undefined){
		aid = '';
	}
	PROBANCE_tracker.track(url,[["product_id",pid],["article_id",aid],["action","visit"]]);
};
$(document).ready(ViewedPage)</script>

La partie 1 : Configuration du tag vous permet de définir comment récupérer les informations à tracker.

[Type d'identifiant visiteur] doit être remplacé par le champ de contact utilisé pour identifier le visiteur : email, customer_id, crc32_email ou crc32_customer_id
[Identifiant visiteur] doit être remplacé par la variable correspondant à l’identifiant du visiteur
[Identifiant produit] doit être remplacé par la variable correspondant à l’identifiant du produit si la page correspond à une fiche produit. Ce champ peut-être le laissé vide.
[Identifiant article] doit être remplacé par la variable correspondant à l’identifiant de l’article la page correspond à une fiche d’article. Ce champ peut-être le laissé vide.

La partie 2 : Appel du tag ne doit pas être modifié. La valeur de [token webtrack] est directement renseignée directement dans le script fourni.

3.2. Création de la balise

Dans le dashboard de votre conteneur, cliquez sur Ajouter une balise
Nommez votre balise Webtrack – Visite
Cliquez sur Configuration de la balise, puis sélectionnez HTML personnalisé dans la liste
Dans l’éditeur de saisie, copiez le script de tracking des visites
Cliquez sur Déclenchement, puis sélectionnez l’option All pages

Enregistrez la balise

4. Installer le tag des paniers

Le tag des visites permet de remonter la mise au panier de produits et d’articles.

4.1. Récupération du script

Le script à intégrer peut-être récupéré en cliquant sur l’icone d’information du bloc Panier.

Il est de la forme suivante :

<script type="text/javascript" language="JavaScript">
function Cartin(){
	
	//===== PARTIE 1: CONFIGURATION DU TAG =====
	
	var typeID= '[Type d'identifiant du visiteur]';
	var my_id = '[Identifiant du visiteur]';
	var pid = '[Identifiant du produit]';
	var aid = '[Identifiant de l'article]';
	var bid = '[Identifiant du panier]';
	var url=document.location.href; 


	//===== PARTIE 2: APPEL DU TAG =====

	var crm=null;
	try{
		crm = new PROBANCE_CRMTracker([token webtrack],"Prob_Track",90,"//t4.my-probance.one/webtrax","idprob");
	}catch (err){
		return;
	}
	if(crm == null){
		return;
	}

	var PROBANCE_tracker = new PROBANCE_trackers();
	PROBANCE_tracker.setCRM(crm);
	
	if(my_id != null && my_id != undefined && my_id != ''){
		crm.setCustomer(my_id, typeID);
	}
	PROBANCE_tracker.doNotTrackOnInit();
	PROBANCE_tracker.init();

	if(pid == null || pid == undefined){
		pid = '';
	}
	if(aid == null || aid == undefined){
		aid = '';
	}
	if(bid == null || bid == undefined){
		bid = '';
	}
	
	PROBANCE_tracker.trackEvent(url,[["product_id", pid],["article_id",aid],["basket_id", bid],["action","cart"]]);
		
}
</script>

La partie 1 : Configuration du tag vous permet de définir comment récupérer les informations à tracker.

[Type d'identifiant visiteur] doit être remplacé par le champ de contact utilisé pour identifier le visiteur : email, customer_id, crc32_email ou crc32_customer_id
[Identifiant visiteur] doit être remplacé par la variable correspondant à l’identifiant du visiteur
[Identifiant produit] doit être remplacé par la variable correspondant à l’identifiant du produit. Ce champ peut-être le laissé vide.
[Identifiant article] doit être remplacé par la variable correspondant à l’identifiant de l’article. Ce champ peut-être le laissé vide.
[Identifiant panier] doit être remplacé par la variable correspondant à l’identifiant unique du panier. Ce champ peut-être le laissé vide.

La partie 2 : Appel du tag ne doit pas être modifié. ne doit pas être modifié. La valeur de [token webtrack] est directement renseignée dans le script fourni dans l’administration technique de votre projet.

4.1. Création de la balise

Dans le dashboard de votre conteneur, cliquez sur Ajouter une balise
Nommez votre balise Webtrack – Panier
Cliquez sur Configuration de la balise, puis sélectionnez HTML personnalisé dans la liste
Dans l’éditeur de saisie, copiez le script de tracking des visites

Important : il est essentiel d’ajouter l’appel à la fonction dans le script de la balise. Pour cela, insérez Cartin(); avant la balise de fermeture </script>.

Cliquez sur Déclenchement, puis cliquez sur + pour configurer un nouveau déclencheur
Nommez votre déclencheur (par exemple : « Mise au panier »)
Cliquez sur Configuration du déclencheur, puis sélectionnez Clic > Tous les éléments dans la liste des types disponibles

Cochez l’option Certains clics.
Vous devez ensuite définir une condition pour restreindre le déclencheur aux seuls boutons d’ajout au panier. La condition à définir dépendra de la structure de votre site. Quelques exemples :
- Click Classes contient « add-to-cart »
- Click ID égal « addCartBtn »
- Click Text égal “Ajouter au panier”

Cliquez sur Enregistrer pour valider le déclencheur
Cliquez à nouveau sur Enregistrer pour valider la balise

5. Tester l’intégration

Cliquez sur Prévisualiser dans votre dashboard GTM. Une simulation de votre site web s’ouvrira dans une nouvelle page, ainsi que la page Tag assistant de google, qui vous permet de visualiser en temps réel les balises déclenchées.

Naviguez sur le site de test, en prenant soin de consulter des pages produit, et d’effectuer des ajouts au panier. Le Tag assistant doit afficher les résultats suivants :

Navigation :
- Balises déclenchées : Probance webtrack, Webtrack – visite
- Balises non déclenchées : Webtrack – panier
Clic sur l’ajout au panier :
- Balises déclenchées : Probance webtrack, Webtrack – visite, Webtrack – panier
- Balises non déclenchées : aucune

6. Déployer les balises

Dans le dashboard de votre conteneur, cliquez sur Envoyer
Nommez la version. Par exemple : Webtracker PONE.
Ajoutez une description de version. Par exemple: Ajout du tracking Probance et mise en place des tags visite et panier.
Cliquez sur Publier

Le webtracker de Probance sera alors déployé sur votre site web.

Vous pouvez vérifier qu’il fonctionne correctement en cliquant sur le bouton Test dans le menu dans le menu Administration > Technique > Tracker web : Cette interface affiche les 50 dernères actions trackées des 5 dernières minutes.

Mettre en place le webtracker sur votre site avec GTM

1. Mettre en place Google Tag Manager

2. Installer le script de tracking