ThirstyAffiliates: Ereignis-Tracking mit Google Analytics

Illustration von macrovector / Freepik

ThirstyAffiliates ist ein mächtiges WordPress Plugin, mit dem man Partner-Links Weiterleitungen erstellen kann. Mit diesem JavaScript Snippet überwachst du sämtliche Klicks auf diese Links und sendest die Daten an Google Analytics.

Wie funktioniert ein JavaScript EventListener?

google-analytics-auswertung-der-klicks-auf-affiliate-links
Google Analytics: Auswertung der Klicks auf Affiliate-Links

Während der Bedienung einer Website löst der Benutzer eine Vielzahl von Ereignissen aus. Er fährt mit dem Mauszeiger über Banner, klickt auf Links oder ist nach einer gewissen Zeit inaktiv.

Nicht jedes Event ist für dich als Seitenbetreiber relevant, deshalb kannst du ausgewählte Elemente überwachen. Tritt das gewünschte Ereignis ein, wird die dafür zuständige Methode aufgerufen.

So richtest du einen JavaScript EventListener ein

Zunächst registrierst du einen Event-Handler. Der Einfachheit halber werden in diesem Beispiel sämtliche Links auf der Website mithilfe der jQuery Bibliothek überwacht.

$( 'a' ).on( 'click', function ( event ) {
    // ...
} );

Wenn du möchtest, kannst du auch andere Ereignisse verwenden. Zur Überwachung von Werbebannern und Affiliate-Links empfehle ich die Events click und mouseenter.

  • click
  • mouseenter
  • mouseleave
  • mousedown
  • mouseup
  • hover

Danach fehlt nur noch die Übertragung der Daten an Google Analytics.

Der fertige ThirstyAffiliates Google Klick Tracker

$( "a[href*='/link/']" ).on( 'click', function ( event ) {
    ga( 'send', 'event', {
        eventCategory: 'affiliate',
        eventAction: event.type,
        eventLabel: this.title,
        transport: 'beacon'
    } );
} );

Mit diesem Snippet überwachst du ThirstyAffiliates Links mit dem folgenden URL-Schema:
https://deine-domain.de/link/affiliate-produkt/

Wenn du ein anderes ThirstyAffiliates Link Präfix als '/link/' verwendest, musst du diesen Teil des Selektors ersetzen. Danach kannst du den Code einfach in deine functions.js Datei kopieren.

Marvin Kronenfeld
Marvin Kronenfeld

Marvin arbeitet als Front End Developer, spricht fließend JavaScript und ist immer für eine BEM-Diskussion zu haben.