Suivi des événements avec Google Analytics et WordPress

Si vous lisez ceci, vous devriez déjà avoir configuré Google Analytics sur votre site WordPress. Si vous ne l'avez pas encore fait, faites-le maintenant ! Je vais attendre ici.

…

Ok, alors maintenant que vous avez terminé cette étape, nous devons parler du suivi des événements. Le suivi des événements peut être n'importe quelle sorte de chose que vous voulez savoir sur ce qui se passe sur votre site. Voulez-vous savoir quand quelqu'un a ajouté un produit à son panier sur votre boutique ? Super! Quand ils se sont inscrits à une newsletter ? Ça a du sens. Soumis une entrée de formulaire? Bonne idée! Passé leur souris sur cette photo de votre cousin au troisième degré deux fois supprimée ? Je veux dire, pourquoi pas ? Allons-y !

Selon la manière dont vous avez configuré Analytics sur votre site, un certain nombre d'événements peuvent être automatiquement suivis pour vous. Analytify, par exemple, fait un excellent travail de suivi du commerce électronique et de nombreuses soumissions de plugins de formulaire. Mais que faites-vous si vous voulez suivre quelque chose que votre intégration Analytics de choix ne fait pas suivi automatiquement ? Eh bien, nous pouvons construire une solution qui le fait. Cela prendra un peu de Javascript / jQuery, mais c'est beaucoup plus facile que vous ne le pensez.

Examinons les bases de la soumission d'un événement Google Analytics. Tout d'abord, la forme longue :

ga('send', {  
  hitType: 'event',
  eventCategory: 'UserAction',
  eventAction: 'Clicked',
  eventLabel: 'TheBlueButton'
});

Cela semble beaucoup trop long et fastidieux, vous pouvez donc le raccourcir comme ceci :

ga('send', 'event', 'UserAction', 'Clicked', 'TheButton');

C'est ça; si vous l'insérez dans la console de votre navigateur, il enverra l'événement à Analytics et il apparaîtra dans votre tableau de bord là-bas. Il ne nous reste plus qu'à le déclencher. Nous avons besoin d'un événement.

Événements ou "Quelque chose vient-il de se produire ?"

Des événements se produisent tout le temps lorsque vos utilisateurs utilisent votre site. Chaque passage de la souris, défilement, clic, tout est un événement que vous pouvez déclencher si vous le souhaitez. Certains événements sont intégrés, d'autres sont inclus dans les bibliothèques Javascript de WordPress, et d'autres encore peuvent être créés manuellement (mais c'est un article différent à écrire).

Commençons par une base; un bouton avec lequel vous voulez faire quelque chose. Disons que vous avez un bouton.

je suis un bouton.

Voilà, c'est un joli bouton ! Maintenant que vous avez le bouton, vous voulez savoir chaque fois que quelqu'un clique dessus. Regardons le code composant ce bouton ;

<div id="theButton" class="wp-block-button"><a class="wp-block-button__link">I am a button.</a></div>

Maintenant, nous pouvons voir comment il est structuré, nous pouvons le cibler avec du Javascript. Je préfère ne pas réinventer la roue, donc je vais utiliser jQuery (car il est de toute façon inclus dans WordPress)

jQuery("div#theButton a").click(function() {
   ga('send','event','UserAction','Clicked','TheButton');
});

Avec ce code en place sur la page (n'oubliez pas de l'envelopper dans des balises