Ausgehende Klicks in Google Analytics mit jQuery verfolgen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ian Pitts hat mir diesen Trick vor einiger Zeit geschickt und ich komme gerade dazu, ihn zu veröffentlichen. Danke Ian!

Google Analytics (Einführungsvideo hier) ist leistungsstark, aber eine bemerkenswerte fehlende Funktion sind Daten zu ausgehenden Klicks. Wenn Sie jQuery verwenden, fügen Sie diesen Code auf Ihrer Seite ein und Sie werden ausgehende Klicks im Handumdrehen verfolgen.

<script type="text/javascript">
  // <![CDATA[
    $(document).ready(function() {
      $("a[@href^='http://']:not(.noAutoLink)").addClass("offSite").attr('target', '_blank').bind('click keypress', function(event) {

        var code=event.charCode || event.keyCode;

        if(!code || (code && code == 13)) {
          if(pageTracker){
            var fixedLink = this.href;
            fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
            fixedLink = '/outgoing/' + fixedLink;
            pageTracker._trackPageview(fixedLink);
          };
					
        };
    });
  // ]]>
</script>

Einfache (naja, fast) Sprache

  1. Zielt auf alle hrefs mit http:// (Vorausgesetzt, Ihre internen Links verwenden relative Dateipfade, wie sie sollten)
  2. Außer denen mit der Klasse .noAutoLink (Optional, aber nützlich, um Links gezielt auszuschließen, wenn Sie möchten)
  3. Es fügt dann die Klasse "offsite" hinzu (Ebenfalls optional, könnte aber als CSS-Hook verwendet werden, um eine Art "externer Link"-Symbol anzuzeigen, besonders wenn Sie target="&_blank" verwenden möchten)
  4. Dann fügt es ein target von _blank hinzu (Nicht XHTML-konform, aber da es bei Bedarf per Skript hinzugefügt wird, schadet es der Validierung nicht)
  5. Dann bindet es an Click- und Keypress-Events... sodass auch diejenigen, die die Tastatur anstelle der Maus verwenden, die Aktion erhalten
  6. Der if(pageTracker)-Teil ist das, was die GA-Objekte erkennt
  7. Dann wird einige reguläre Ausdruckmagie angewendet, um den href in etwas zu verwandeln, das in GA verfolgt werden kann
  8. Ein gefälschter Link wird erstellt, der in einem fiktiven /outgoing/-Verzeichnis erscheinen wird
  9. Und schließlich wird GA angewiesen, einen Seitenaufruf für diese neue gefälschte Ressource aufzuzeichnen

Sobald Sie dies eine Weile laufen gelassen haben (wahrscheinlich ein paar Tage, da Google Analytics nicht sehr in Echtzeit ist), können Sie zu Inhalt > Inhalt-Drilldown gehen und Ihr /outgoing/-Verzeichnis finden. Klicken Sie darauf, um Ihre beliebtesten ausgehenden Links zu sehen!

UPDATE
Ian hat ein Update/eine Verbesserung dieses Codes auf seinem Blog veröffentlicht. Der neue Code sucht nicht nur nach "http://", um festzustellen, ob es sich um einen ausgehenden Link handelt, sondern vergleicht die Hostnamen mit der aktuellen Website. Auf diese Weise werden interne Links mit voller URL nicht fälschlicherweise als externe Links angesehen.