Website-Performance: Google Analytics mit jQuery einbinden

Der Aufruf der ausgelagerten CSS-Dateien gehört im Quelltext einer Webseite in den HEAD-Bereich, JavaScript wird dagegen vor abschließendem BODY-Tag inkludiert, um das Laden der Darstellung nicht zu beeinträchtigen. Diese Technik hat sich in der Praxis bewährt, auch WebEntwickler und Blogger befolgen die Regel größtenteils korrekt. Die Einbindung von Google Analytics lässt sich mit jQuery leicht verfeinern und einem eventuellen Ausfall der Google-Server zuverlässig vorbeugen.

Analytics laden mit nur einem Befehl
jQuery versteht sich als ein mächtiges Werkzeug und erledigt allerlei Aufgaben rund um JavaScript und CSS. Dazu gehört auch die Einbindung der externen Skripte in die laufende Anwendung, sprich in die aktuell aufgerufene Webseite.

Dreamteam: Analytics via jQuery eingebunden

Das Laden einer JS-Datei übernimmt die simple Funktion getScript(), die nach außen unkompliziert ausschaut, im Hintergrund jedoch die komplette Abwicklung, Prüfung und Ausgabe der angeforderten Datei steuert. Übrigens ist jQuery in der Lage, Kommunikation zu externen Quellen herzustellen und entfernte Scriptdateien zu laden, wie es beim Tracking-Code von Google Analytics der Fall ist.

Vorteile durch die Einbindung mittels jQuery
jQuery-Aufrufe können so gestartet werden, dass sie erst dann ausgeführt werden, wenn die angeforderten DOM-Komponente einer Webseite vollständig vom Server ausgegeben und vom Browser fehlerfrei empfangen wurden – verständlicher ausgedrückt: Wenn das Grundgerüst komplett steht.

Nicht anders wird auch der angekündigte Aufruf von Google Analytics aufgebaut: Der Abruf der Datei ga.js und die Initialisierung der Tracking-Funktionen sollen erst dann im Hintergrund angestoßen werden, wenn der primäre Ladevorgang der Seite abgeschlossen ist.

Einen weiteren Pluspunkt kann die alternative Methode ebenso vorweisen: Sind Google-Server mal nicht erreichbar (vor Wochen kam es zum solchen Vorfall), gerät der Ladevorgang der Seiten nie ins Stocken, da der Zugriff auf Google’s Rechner erst zum Schluss kommt. Intelligent gelöst: Kann eine externe Datei nicht geholt werden, so führt jQuery die hinterlegte Funktion mit weiteren Befehlen schlicht nicht aus und macht eine Fehlerbehandlung via try … catch überflüssig.

Google Analytics mittels jQuery einbinden

<script type="text/javascript">
  $(document).ready(
    function() {
      $.getScript(
        'http://www.google-analytics.com/ga.js',
        function() {
          var pageTracker = _gat._getTracker('UA-XXXXXXX-X');
          pageTracker._trackPageview();
        }
      );
    }
  );
</script>

Alternative mit Cache-Funktion des jQuery (danke an Patrick Bisenius)

<script type="text/javascript">
  $(document).ready(
    function() {
      $.ajax(
        {
          type: 'GET',
          url: 'http://www.google-analytics.com/ga.js',
          success:
            function() {
              var pageTracker = _gat._getTracker('UA-XXXXXXX-X');
              pageTracker._trackPageview();
            },
          dataType: 'script',
          cache: true
        }
      );
    }
  );
</script>

Hinweis
Die beschriebene Strategie zur Einbindung zahlt sich nur dann aus, wenn jQuery als unterstützendes Framework im Projekt sowieso Verwendung findet und nicht extra referenziert werden muss.