Suivre les commentaires sur un blog avec Universal Analytics

Le suivi des commentaires publiés sur un blog depuis Universal Analytics passe par l'utilisation d'une fonction liée à l'événement "submit".

Avec la plateforme Google Analytics, il est possible de suivre n'importe quel événement de votre site, même une validation de formulaire. On peut donc aussi par exemple utiliser ce système pour suivre les commentaires postés sur son blog.

Pour réaliser cette opération, il faut effectuer l'envoi des données au moment de la soumission du formulaire, grâce à une fonction liée à l'événement "submit". Si vous ajoutez le code directement dans la fonction, cela ne marchera pas, car le formulaire sera soumis avant que les données soient envoyées à Google Analytics. Les codes ci-dessous sont pour la version universal de Google Analytics (lire Quelles différences entre ga ou _gaq.push pour analyser des événements dans Google Analytics ?).
//Ce code ne fonctionnera pas (il nécessite la bibliothèque jQuery pour être valide).

$(document).ready(function(){
    $('#formulaireCommentaire').submit(function(){
        var titreCommentaire = $('h2.post-title').text();
        ga('send', 'event', 'Interactions', 'Commentaire', titreCommentaire);
});
});

La solution à ce problème consiste tout d'abord à empêcher le formulaire de se soumettre directement. Pour cela, nous allons ajouter l'instruction "return false;" à la fin de la méthode. Pour que le formulaire puisse être validé après l'envoi des données, la méthode "ga()" possède le paramètre "hitCallback". La fonction associée à ce paramètre sera exécutée après l'envoi des données à Google Analytics. Dans cette fonction, insérez les instructions permettant de valider le formulaire. Voici le code corrigé (ce code nécessite d'utiliser la version universal de Google Analytics, et la bibliothèque JavaScript jQuery, avec au moins la version 1.9) :

$(document).ready(function() {
    //Ce code sera exécuté lors de la soumission du formulaire.
    $(document).on( 'submit', 'form#formulaireCommentaire', function( e ) {
        var titreCommentaire = $('#post-title').text();
        ga( 'send', {
            'hitType': 'event',
            'eventCategory': 'Interactions',
            'eventAction': 'Commentaire',
            'eventLabel': titreCommentaire,
            'hitCallback': function() {
                //Code pour soumettre le formulaire
                $('#commentform').off('submit'); //Retire l'événement pour éviter que la fonction soit appelée une deuxième fois par un autre clic.
                $('#commentform')[0].submit(); //Soumet le formulaire.
            }
        });
        //On ajoute cette instruction pour éviter que le formulaire soit soumis directement
        return false;
    });
});

En complément, lire aussi 

Google Analytics lance un plugin pour simplifier des configurations avancées