Google Analytics einbinden

Wenn Sie Ihre Seite mit Google Analytics tracken wollen, müssen Sie zunächst in Ihrem Google-Konto einige Einstellungen vornehmen. Am Ende des Prozeses erhalten Sie von Google einen JavaScript-Fragment, welches Sie in Ihre Website einbinden sollen.

Die Besonderheit bei Tracking-Skripten gegenüber sonstigens JavaScript-Dateien ist der, dass Tracking-Skripte in der Regel als letztes vor dem schließenden <body>-Tag eingebunden werden sollen. Alle anderen JavaScript-Dateien finden sich im Allgemeinen im <head>-Bereich der Seite.

Vorgehensweise

Wir werden im folgenden das JavaScript-Fragment von Google in eine eigene Methode auslagern. Diese wird dann vor dem schließenden <body>-Tag über einen c.literalCall() eingebunden.

Methode »googleAnalytics«

Erstellen Sie eine literale Methode »googleAnalytics« auf einem möglichst allgemeinen Datentyp. Dies hat den Vorteil, dass die Methode allgemeingültig ist. Da wir ja keine seitenspezifischen Inhalte einfügen wollen, können Sie die Datensicht »no-data« eintragen. Der Zugriffsschutz kann »Intern« bleiben.

Nun kopieren Sie den JavaScript-Schnipsel von Google, inklusive der <script>-Tags in die Methode. Diese sieht dann in etwa so aus:

	<xsl:stylesheet

	  version="1.0"

	  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

	>

	  <xsl:output method="xml" omit-xml-declaration="yes" indent="no" />

	  

	  <xsl:template match="/">

	    <script type="text/javascript">

	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

	    </script>

	    <script type="text/javascript">

	try{

	var pageTracker = _gat._getTracker("UA-xxxxxx-x");

	pageTracker._trackPageview();

	} catch(err) {}

	    </script>    

	  </xsl:template>

	</xsl:stylesheet>

Um Seiteneffekte in Browsern zu vermeiden, bei denen JavaScript deaktiviert ist, fügt man in der Regel zwischen die <script>-Tags und den eigentlichen JavaScript-Code noch HTML-Kommentare ein. Um einen solchen HTML-Kommentar in der generierten Website zu erzeugen, muss in XSLT das <xsl:comment>-Element genutzt werden. Sie müssen darauf acht geben, dass das Javascript-Fragment die Wohlgeformtheit des Xml-Dokuments einhält. Viel einfacher geht es mit der Angabe eines CDATA-Abschnitts. Jedes Skript kann dadurch ohne weitere Anpassungen eingefügt werden.

Die Methode sieht nun folgendermaßen aus.

	<xsl:stylesheet

	  version="1.0"

	  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

	>

	  <xsl:output method="xml" omit-xml-declaration="yes" indent="no" />

	  

	  <xsl:template match="/">

	    <script type="text/javascript">

	      <xsl:comment>

	//<![CDATA[

	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

	//]]>

	      </xsl:comment>

	    </script>

	    <script type="text/javascript">

	      <xsl:comment>

	//<![CDATA[

	try{

	var pageTracker = _gat._getTracker("UA-xxxxxx-x");

	pageTracker._trackPageview();

	} catch(err) {}

	//]]>

	      </xsl:comment>

	    </script>    

	  </xsl:template>

	</xsl:stylesheet>

Nur in Live-RenderEngine

Wenn Sie unterschiedliche RenderEngines für Ihre Vorschau- und Live-Seite konfiguriert haben, dann wollen Sie in der Regel nur die Zugriffe auf die Live-Seite tracken. Alles, was auf der Vorschau passiert, ist in der Regel uninteressant für die Auswertungen. Momentan würde das Script aber überall eingebunden.

Um die beiden <script>-Tags samt Inhalt in der Live-Umgebung auszublenden, kann auf die Editing-Extension zurückgegriffen werden. Fügen Sie den Namensraum »http://onionworks.net/2006/data/editing« hinzu und erweitern Sie die beiden öffnenden <script>-Tags um das Attribut

	edit:ifEnabled="removeNode"

Einbinden in HTML-Gerüst

Da nun alles vorbereitet ist, muss das Skript nur noch vor dem schließenden <body>-Tag in das HTML eingebunden werden. Fügen Sie hierzu an genau dieser Stelle folgenden Code ein:

	<c.literalCall method="googleAnalytics" />

Wenn Sie die Methode nicht auf jeder Seite, sondern auf einer ganz bestimmten ID aufrufen möchten, müssen Sie diese über das Attribut »id« an den literalCall übergeben.

Wenn Sie das Grundgerüst Ihrer Seite in eine einzigen default()-Methode aufbauen, müssen Sie die Zeile nur ein einziges Mal einbinden. Ansonsten sollten Sie den Aufruf in jeder Methode einfügen, die ein HTML-Gerüst enthält und von Google analysiert werden soll.

Praxis-Tipps Eigene Fehlerseiten einbinden