Ecouter un événement personnalisé sur mon site (3rd Party Events)

Ecouter un événement personnalisé sur mon site (3rd Party Events)

Les 3rd Party Events, qu'est ce que c'est ?

Les événements personnalisés, ou 3rd Party Events, vous permettent d'écouter une action sur votre site et d'envoyer des données en fonction de celle-ci pour pouvoir les retrouver sur votre interface de Call-tracking.
La seule chose dont vous avez besoin pour cela est Google Tag Manager installé sur votre site.

Prenons un exemple

Notre code

Dans cet exemple de démonstration, nous allons écouter le clic sur un bouton de notre site.
Imaginons une liste d'annonces immobilières. Pour chaque annonce, un bouton permet d'accéder au détail de celle-ci. Dans le code de notre site, chaque bouton est caractérisé par un ID et dispose d'un attribut "data-itemid" précisant l'identifiant de l'annonce. Notre but est d'ajouter cet identifiant au parcours utilisateur des visiteurs pour savoir sur quelles annonces ils ont cliqué.



Les déclencheurs

Rendons-nous ensuite sur le Google Tag Manager de notre site, dans la section Déclencheurs, où nous allons créer 2 déclencheurs.
Le premier, que nous appellerons "Onclick", va écouter l'événement de click sur notre bouton. Pour cela, choisissez le type de déclencheur "Clic - Tous les éléments", puis configurez le comme ci-dessous pour qu'il cible l'ID "myButton" de notre bouton (à noter que vous pouvez également le cibler avec une classe).




Le deuxième déclencheurs, que nous appellerons "mgtEvent" sera quand à lui un "Evénement personnalisé" et écoutera l'événement "mgtEvent" :




Les variables

Après avoir configuré les déclencheurs, nous devons préparer une variable qui nous servira à transporter les données avant de les envoyer. Pour cela, dans "Variables définies par l'utilisateur", créons une "Variable de couche de données" nommée "mgtData". Elle sera liée à la variable de couche de données (dataLayer) du même nom.




Aussi, activez les Variables intégrées "Event" et "Click Element" dont nous aurons besoin par la suite. Pour cela, toujours dans la section Variables, cliquez sur "Configurer" dans la partie Variables intégrées, puis cochez les cases correspondantes :




Les balises

Enfin, créons les balises qui lanceront notre 3rd party event.
La première balise, que nous appellerons "Onclick", se déclenchera au clic sur le bouton. Son déclencheur sera donc le déclencheur "Onclick" précédemment créé. Nous utiliserons le type de balise "HTML personnalisé" et y mettrons ce morceau de code : 
  1. <script>
  2.      var element = {{Click Element}};
  3.      dataLayer.push({'event': 'mgtEvent', 'mgtData': {'itemid': element.dataset.itemid}});
  4. </script>
Ici, nous récupérons l'élément sur lequel l'utilisateur a cliqué (notre bouton) et ajoutons à la couche de données (dataLayer) l'événement "mgtEvent", ce qui aura pour effet d'appeler le déclencheur du même nom, que nous avons créé en amont. Nous ajoutons aussi à la couche de données (dataLayer) la clé "mgtData" contenant notre valeur "itemid", récupérant la valeur de l'attribut "data-itemid" de notre bouton. La clé "mgtData" est automatiquement liée à la variable "mgtData" créée précédemment.
Selon vos besoins, vous pouvez évidemment remplacer "itemid" par l'attribut ou la clé que vous souhaitez collecter, ou en ajouter d'autres. Par exemple : 
  1. dataLayer.push({'event': 'mgtEvent', 'mgtData': {'itemid': element.dataset.itemid, 'itemtype': element.dataset.itemtype}});





La deuxième et dernière balise que nous allons créer se nommera "Push click event" et s'occupera de récupérer les données contenues dans "mgtData" et de les envoyer pour les ajouter au parcours visiteur de notre l'utilisateur.
Le déclencheur de cette balise sera notre premier déclencheur "mgtEvent", qui se déclenche dès qu'une modification de la couche de données (dataLayer) est détectée. Elle lancera elle aussi un morceau de code. Sélectionnez donc le type "HTML personnalisé" et saisissez le code suivant en remplaçant "[votreApk]" (ligne 6) par l'APK trouvable dans votre compte de Call-tracking, onglet "Module web/Connecteurs" : 


  2. <script>
  3.   var mgtData = {{mgtData}};
  4.   var resetData = {};
  5.   
  6.   var pushUrl = "//call.mgtmod01.com/mgtct.v7.3rdparty.min.js?Apk=[votreApk]&event=" + {{Event}};
  7.   Object.keys(mgtData).forEach(function(key) {
  8.     if(mgtData[key] != false) {
  9.        pushUrl = pushUrl + "&" + key + "=" + mgtData[key];
  10.        resetData[key] = false;
  11.     }
  12.   });
  13.   
  14.   (function (i,s, o, g, r, a, m) {
  15.   i[r] = i[r] || [], i["cttime"] = 1 * new Date();
  16.   a = s.createElement(o),
  17.   m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  18.   })(window, document, "script", pushUrl, "_mgt");
  19.   
  20.   dataLayer.push({'mgtData': resetData});
  21. </script>
Ce morceau de code va envoyer à nos systèmes les informations collectées lors de l'action de l'utilisateur (ici l'attribut "data-itemid" du bouton sur lequel il a cliqué). Vous pourrez ensuite retrouver cette information dans votre interface de Call-tracking.



Activer la collecte des données

Plus qu'une étape pour commencer à collecter vos données personnalisées !
Rendez-vous dans votre compte de Call-tracking, onglet "Module web/Connecteurs". En bas de la page, vous trouverez la configuration des "3rd Party events". Vous n'avez plus qu'à activer la remontée et entrer le nom des clés que vous souhaitez enregistrer. Dans notre exemple, nous écrirons "itemid" ou "data-itemid" (les deux fonctionnent).




Et voilà ! A présent lorsqu'un visiteur clique sur notre bouton, un événement est lancé et la valeur de l'attribut "data-itemid" est collecté et retrouvable dans le parcours utilisateur du visiteur. 
Si l'exemple pris ici a pour but de présenter les bases des 3rd Party events, vous pouvez bien sûr adapter cette méthode à vos besoins, pour écouter d'autres événements que le clic et/ou collecter une ou plusieurs informations.
En cas de besoin spécifique, n'hésitez pas à contacter votre Account Manager !

    • Related Articles

    • Comment tester la rotation des numéros sur mon site internet ?

      Tester la rotation des numéros sur mon site internet Après avoir paramétré et installé votre module de call-tracking, il est possible de tester la rotation des numéros sur votre site internet. C’est-à-dire vérifier que le module installé permet bien ...

    • Comment installer le module de call-tracking sur mon site (code, GoogleTagManager)?

      L'intégration du module de call-tracking à votre site vous permet d'accéder aux fonctionnalités de suivi des visiteurs et d'affichage dynamique de numéros en fonction de leur origine. Vous disposez ainsi d'un accès au suivi par source de trafic (site ...

    • Comment déployer le call-tracking sur un site d’annonces ?

      Déployer le call-tracking sur un site d’annonces Lorsque vous utilisez le call-tracking, vous avez la possibilité de le déployer sur plusieurs types de supports. Vous pouvez notamment le faire via les sites d’annonces. Lorsque vous êtes une agence ...

    • Comment vérifier la présence du module web sur mon site internet ?

      Le module web doit être installé sur le site internet pour que les numéros trackés puissent se dynamiser en fonction du canal d'origine de l'internaute.  Vous devez vous rendre dans les paramètres du navigateur, puis cliquer sur "Plus d'outils" puis ...

    • Comment configurer mon module de call-tracking ?

      Configurer mon module de call tracking Après avoir choisi votre forfait et avoir ajouté vos numéros trackés, vous pouvez installer le module de call-tracking sur votre site internet. L’intégration du module de call-tracking à votre site vous permet ...