web-dev-qa-db-fra.com

Envoi d'événements de clic à Google Analytics dans WordPress: le moyen le plus simple

J'essaye d'installer un suivi de lien sur WordPress. Il existe plusieurs liens vers le même site, ils partagent tous la même classe:

<a class="gaClickTrack" href="https://www.Amazon.es/Heromask-HeroMask-Aprende-idiomas-jugando/dp/B06XWHZ5Q4" target="_blank" rel="noopener">Buy Now Securely On Amazon!</a>

<img class="gaClickTrack wp-image-3372 size-medium" src="https://www.edinventa.com/wp-content/uploads/2018/07/buy-now-300x207.png" alt="Buy Now" width="300" height="207" />

Nous utilisons le plug-in "En-tête de page", qui vous permet d'ajouter du contenu dans la section d'une page spécifique, telle que JS personnalisé ou HTML personnalisé. C'est le code personnalisé ajouté:

<script>
jQuery('.gaClickTrack').on('click', function() {
    ga('send', 'event', 'button', 'click', 'Amazon-button-clicked');
});
</script>

Remarque: si nous utilisons $ à la place de JQuery, cela ne semble pas fonctionner: la console renvoie une erreur.

Nous utilisons l'extension Google Analytics Debugger de Google Chrome, mais nous ne savons pas comment l'utiliser ou rien ne le détecte.

Je peux voir sur Google Analytics - Real time - General Vision qu'il détecte qu'il y a quelqu'un sur la page, mais je ne vois nulle part l'événement click (j'imagine qu'il devrait apparaître sur Real time - Events.

Où est notre erreur ??

jqueryjavascriptgoogle-analytics
1
chelder

Cela fonctionne dans mon site WordPress. N'oubliez pas que nous utilisons le plug-in "En-tête de page", qui vous permet d'ajouter du contenu dans la section d'une page spécifique, telle que JS personnalisé ou HTML personnalisé. C'est le code personnalisé ajouté:

<script>// <![CDATA[
jQuery(document).ready(function($){ 

$('.class-name-of-the-button').click(function() {  

  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href,
    transport: 'beacon'
  });

});

});
// ]]></script>

Explication:

  • Nous devons ajouter une jQuery(document).ready(function($){ au début
  • Remarque: Je pense que // <![CDATA[ et // ]]> ne sont pas nécessaires
  • Lorsque le bouton nous dirige vers un site Web externe, nous devrions ajouter eventLabel: event.target.href comme expliqué ici: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
  • Bien sûr, nous pouvons remplacer .class-name-of-the-button par et ajouter au bouton un identifiant comme Push me, ce serait donc $('#mybutton999').click(function() {
  • transport: "beacon" retarde le chargement de l'URL externe jusqu'à son envoi à Google Analytics. Mais ce n'est pas compatible avec tous les navigateurs Internet.
  • Encore une fois, pour plus d’informations sur eventCategory, eventAction, transport, etc., cliquez ici: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Enfin, remarquez que j'ai vu en temps réel dans Google Analytics (on Real time - Events) lorsque j'ai appuyé sur le bouton pour le tester.

0
chelder