Mesurer le remplissage des formulaires avec Google Analytics (via les événements) ?

Suivre une soumission de formulaire peut être compliqué lorsqu'elle envoie sur une autre page avant que Google Analytics ait pu être appelé. Voici comment résoudre le problèlme.

Le code de suivi fourni par Google Analytics peut être utilisé pour suivre les événements, par exemple un clic sur un bouton. Il est plus compliqué de suivre une soumission de formulaire qui envoie l'internaute sur une autre page ou un autre domaine, car l'appel AJAX envoyé par le tracker n'a pas le temps d'être envoyé que la nouvelle page se charge dans le navigateur.

Une première solution à ce problème consiste à retarder la soumission du formulaire. On utilise pour cela la fonction JavaScript "setTimeOut()", qui permet d'exécuter du code après un certain délai d'attente. La fonction JavaScript est appelée avec l'événement "onSubmit" du formulaire. Attention : le code diffère selon la version de Google Analytics utilisée : la plus récente, appelée Universal Analytics, utilise la méthode "ga()".

<!-- Formulaire à remplir -->
<form action="http://monsite.fr/recherche" onsubmit="return detecterSoumission()" id="frm">
    <input type="submit">Valider</input>
</form>

<script type="text/javascript">
function detecterSoumission() {
    var frm = document.getElementById('frm');
    //Code Google Analytics (Ancienne version)
    _gaq.push('_trackEvent', 'Formulaire', 'Formulaire frm soumis');
    //Code Universal Analytics
    ga('send', 'event', 'Formulaire', 'Formulaire frm soumis');
    setTimeout(function(){
        //On soumet le formulaire après une seconde d'attente.
        frm.submit();
    }, 1000);
    return false;
}
</script>

Ce code est cependant incertain, car il ne fonctionnera pas si l'appel à la plateforme Google Analytics n'a pas eu le temps de se mettre en place. Google a créé une propriété pour pallier ce problème : la propriété "hitCallback".

Le paramètre "hitCallback" permet d'ajouter une fonction qui sera exécutée juste après l'appel à Google Analytics. Si vous utilisez l'ancienne version de Google Analytics, il faut utiliser la méthode "_gaq.push()" avec la commande "set" pour définir la propriété.

function detecterSoumission() {
    var _this = this; // On stocke l'input cliqué dans une variable pour le conserver dans le contexte de la fonction appelée avec la propriété "hitCallback".
    //On définit la fonction appelée après l'envoi des données à Google Analytics.
    _gaq.push(['_set','hitCallback',function() {
        $(_this).parents('form').first().submit(); // Soumission du formulaire
    }]);
    //On envoie l'événement.
    _gaq.push(['_trackEvent', 'Formulaire', 'Formulaire frm soumis']);
    return !window._gat; // Ce code assure que le formulaire est soumis, même si l'envoi des données à Google n'a pas fonctionné.
}

Si vous utilisez la nouvelle version de Google Analytics (Universal Analytics), le paramètre "hitCallback" a été directement intégré à la commande "send" de la fonction "ga()" :

function detecterSoumission() {
    var _this = this; ga('send', 'event', 'Formulaire', 'Formulaire frm soumis', {
        'hitCallback': function() {
            $(_this).parents('form').first().submit();
        }
    });
    return !window.ga;// Ce code assure que le formulaire est soumis, même si l'envoi des données à Google n'a pas fonctionné.
}

Pour les deux versions, ce code est appelé lors du clic sur le bouton de soumission :

<form action="http://monsite.fr/recherche">
    <input type="submit" onclick="return detecterSoumission()" >Valider</input>
</form>

Lire aussi :
- Bien faire apparaître un événement dans Universal Analytics : un clic par exemple
-Quel code ajouter pour suivre les événements dans Google Analytics ?

Tutoriels Analytics