Verwenden Sie jQuery, um Google Analytics-Ereignisverfolgung für jeden Klick zu überwachen und weiterzugeben

jQuery Listen for Clicks to Pass Google Analytics Event Tracking

Ich bin überrascht, dass mehr Integrationen und Systeme nicht automatisch enthalten sind Google Analytics-Ereignisverfolgung auf ihren Plattformen. Ein Großteil meiner Zeit, die ich auf den Websites von Kunden arbeite, besteht darin, Tracking für Ereignisse zu entwickeln, um dem Kunden die Informationen zu liefern, die er darüber benötigt, welches Benutzerverhalten auf der Website funktioniert oder nicht funktioniert.

Zuletzt habe ich darüber geschrieben, wie man nachverfolgt Mailto-Klicks, Tel klicktund Elementor-Formulareinreichungen. Ich werde weiterhin die Lösungen, die ich schreibe, teilen, in der Hoffnung, dass sie Ihnen helfen, die Leistung Ihrer Website oder Webanwendung besser zu analysieren.

Dieses Beispiel bietet eine sehr einfache Möglichkeit, das Google Analytics-Ereignis-Tracking in ein beliebiges Anker-Tag zu integrieren, indem ein Datenelement hinzugefügt wird, das die Google Analytics-Ereigniskategorie, die Google Analytics-Ereignisaktion und das Google Analytics-Ereignislabel enthält. Hier ist ein Beispiel für einen Link, der das Datenelement enthält, genannt gaevent:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Eine Voraussetzung für Ihre Website ist das Einfügen von jQuery, mit dem dieses Skript betrieben wird. Sobald Ihre Seite geladen ist, fügt dieses Skript Ihrer Seite einen Listener für jeden hinzu, der auf ein Element klickt gaevent data… dann erfasst und analysiert es die Kategorie, Aktion und Bezeichnung, die Sie im Feld angeben.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Hinweis: Ich habe eine Warnung eingefügt (auskommentiert), damit Sie testen können, was tatsächlich bestanden wurde.

Wenn Sie jQuery auf WordPress ausführen, sollten Sie den Code nur ein wenig ändern, da WordPress die $-Verknüpfung nicht schätzt:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Es ist nicht das robusteste Skript und Sie müssen möglicherweise einige zusätzliche Aufräumarbeiten durchführen, aber es sollte Ihnen den Einstieg erleichtern!