dokuwiki

L'objectif est de remonter les intentions d'appel, autrement dit, le nombre de personnes ayant manifesté l'intention d'afficher le numéro de téléphone de votre société. Actuellement, ce numéro est visible sur votre site. Or, pour que cette action ait un véritable intérêt, il est impératif de masquer votre numéro de téléphone (sur toutes les pages, dans le contenu, le footer et le header) via un bouton d'incitation au clic (Call-to-action). Ainsi, au clic de l'internaute, nous pourrons remonter la conversion dans Analytics pour effectuer le suivi des intentions d'appel et attribuer la source à l'origine de cette conversion (SEO, accès direct, referral…), ce qui permettra de savoir d'où venait l'internaute avant d'effectuer une intention d'appel sur votre site. Comment mettre en place le tracking des intentions d'appel ?

  Masquer le numéro de téléphone via un bouton CTA sur l’ensemble des pages et ajouter un event ayant l’intitulé suivant :
  

ga('send', 'event', 'clic-intention-appel', 'clic-ia');

Au clic sur le bouton “Afficher le numéro”, le numéro apparaît. Il faut alors activer le tracking du numéro via un event qui se traduit par les codes JS ci-dessus (le libellé est à adapter selon l'emplacement du bouton sur la page) :

A noter : il est recommandé d’éviter au maximum l’utilisation des caractères spéciaux. Remplacez l’espace par un tiret « - » et évitez les caractères accentués. De plus, ce bouton est à adapter à la charte graphique et ne constitue pas un élément graphique à intégrer tel que suggéré ici. Au clic sur le bouton « Afficher le numéro », le numéro apparaît et sera donc comptabilisé comme une intention d’appel dans Analytics, après paramétrage des objectifs dans Google Analytics.

Au même titre ques les intentions d'appel, là l'objectif est de remonter le nombre d'internautes ayant cliqué sur le bouton Call-to-action dédié à l'affichage de votre mail, sous-entendu ceux qui ont une intention de vous écrire via leur logiciel de messagerie.

Comment mettre en place le tracking des intentions d'email ?

Masquer l'email sur l’ensemble des pages via un bouton CTA et ajouter un event ayant l’intitulé suivant :

Bouton du footer :

ga('send', 'event', 'clic-intention-email', 'clic-ie'');

Le formulaire de contact sur la page Contact (/contact) n’a pas de page de confirmation avec une URL distincte. Afin de suivre le nombre de contacts via ce formulaire, il faut lancer la fonction suivante uniquement lorsqu’un formulaire est rempli et envoyé avec succès (ne pas le déclencher si un champ obligatoire n’est pas rempli par exemple) :

ga('send', 'pageview', '/confirmation-contact');

Ces éléments sont des exemples, il faudra mettre en place la forme qui convient en fonction de votre tag analytics.

    /* 20200708 - Julien G.
     Gestion des CTA via un code ayant la structure suivante :     
     <span class="gaEvt" data-name="appel" data-value="clic-ia">
        <span>Afficher le numéro de téléphone</span>
        <a href="tel:+33240173577">02 40 17 35 77</a>
     </span>
    */
    $('.gaEvt').on('click', function (e) {
        //console.log(gtag, $(e.target.parentNode).data('name'), e);
        //ga('send', 'event', $(e.target).data('name'), $(e.target).data('value'));        
        if (e.target.nodeName != 'A' && $(e.target.parentNode).data('name')) {
            $('a', e.target.parentNode).show();
            if (typeof gtag != 'undefined') {
                gtag('event', $(e.target.parentNode).data('name'), {
                    'event_category': 'intention',
                    'event_label': $('a', e.target.parentNode).attr('href'), //$('a', e.target).text(),
                    //'non_interaction': true
                });
            }
            $(e.target).remove();
        }
    });
    $('.gaEvt a').on('click', function (e) {
        //console.log(gtag, $(e.target.parentNode).data('name'), e);
        //ga('send', 'event', $(e.target).data('name'), $(e.target).data('value'));        
        if (e.target.href) {
            if (typeof gtag != 'undefined') {
                gtag('event', $(e.target.parentNode).data('name'), {
                    'event_category': $(e.target).data('value'),
                    'event_label': e.target.href,
                    //'non_interaction': true
                });
            }
        }
    });

Liens CTA, on peut les intégrer directement dans les contenus avec une structure bien propre. Exemple avec le code suivant pour le coup du numéro de téléphone (intention d'appel & “click to call”) :

     <span class="gaEvt" data-name="appel" data-value="clic-ia">
        <span>Afficher le numéro de téléphone</span>
        <a href="tel:+33240173577">02 40 17 35 77</a>
     </span>

J'ai ajouté un événement sur la class CSS gaEvt qui permet de gérer le remplacement d'un texte par un autre et le déclenchement d'événements au clic. L'attribut data-name correspond au type d'événement traqué. Le premier clic, la catégorie d'événement lié est intention, le 2e clic, sur l'élément A est de catégorie indiqué dans data-value.

Il n'y a plus qu'à modifier l'intégration des différents éléments à traquer (dans les contenus et sur le template).