Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Aktionen und Scroll-Verhalten auf einer Single Page mit Google Analytics überwachen

Zur Zeit sind die so genannten Single Pages ja wirklich schwer in Mode. Zum Beispiel gab es erst vor zwei Tagen beim seo-book.de einen spannenden Beitrag, der der Frage nachging, ob eine Single Page wohl besser für das Google Ranking sei? Auch ich habe Anfang dieser Woche den Relaunch meines Portfolios veröffentlicht und dabei wieder auf ein Single Page Webdesign gesetzt.

Ich möchte heute an dieser Stelle nicht der Frage nachgehen, ob und wann eine Single Page einer Variante mit mehreren Unterseite vorzuziehen ist oder welche Vor- und Nachteile im Bezug auf die Suchmaschinenoptimierung entstehen. Vielmehr möchte ich etwas in den Bereich Online Marketing und Besucher-Tracking abdriften.

Kein Google Analytics? Keine Informationen zum Besucherverhalten!

Viele Entscheider wird es wahrscheinlich abschrecken, dass man bei Single Pages keine echten Informationen über das Besucherverhalten erhält. Zwar kann man Google Analytics oder ein vergleichbares Tool natürlich einbetten, bekommt dann aber nur Kennzahlen über Verweildauer oder Absprungrate angezeigt.

Dabei wäre es für den Seitenbetreiber doch viel interessanter zu erfahren, wie der Nutzer auf der Seite scrollt, ob zum Beispiel das Kontaktformular angezeigt wird oder an welcher Stelle die meisten Nutzer die Seite verlassen. Gerade der letzte Punkt bietet eine hervorragende Möglichkeit, nach und nach die größten Schwachstellen auf der Single (Landing) Page zu identifizieren und zu optimieren.

Simples Script zum Erfassen des Scroll-Verhaltens

Die gute Nachricht: Das Erfassen des Scroll-Verhaltens der Nutzer ist nicht so komplex wie vielleicht vermutet. Auf Basis des jQuery-Frameworks und der Analytics Methode _gaq.push() habe ich ein kleines Script vorbereitet, welches ihr mit minimalem Anpassungen auf euren Single Pages verwenden könnt:

HTML-Quellcode im Detail

Der obere Abschnitt zeigt das stark vereinfachte HTML-Dokument der Single Page. Hier gibt es nicht besonders viel zu erklären. Von Zeile 7 bis 17 wird der normale Google Analytics Code eingebunden. Neben einigen kleinen CSS-Formatierungen von Zeile 19 bis 27 binden wir in Zeile 46 noch das jQuery-Framework in der aktuellsten Version ein. Eine Zeile dadrunter laden wir dann die script.js, in der die eigentliche Arbeit verrichtet wird.

Wichtig ist nur, dass man den Aufbau der section-Elemente versteht. Dies können natürlich auch div oder article – Elemente sein, wichtig ist nur, dass die Abschnitte auf eurer Single Page, die später getrackt werden sollen, auch über eindeutige Klassen verfügen. In unserem Beispiel sind das section-asection-bsection-c und section-d.

Javascript-Quellcode im Detail

Nun gucken wir uns die script.js im Detail an:

  • Zeile 1
    Wir verwenden die jQuery document.ready()-Funktion um sicherzustellen, dass das DOM komplett zur Verfügung steht.
  • Zeile 2
    Wir initialisieren eine leere Variable, in der wir später speichern, welcher Bereich auf der Single Page zuletzt angezeigt wurde. Dies ist wichtig, damit später nicht bei jedem Scrollen innerhalb eines Bereiches ein neuer Pageview an Google Analytics übermittelt wird.
  • Zeilen 3 bis 8
    Dieses Javascript-Objekt ist theoretisch der einzige Bereich, den ihr bei Verwendung des Script auf eure Bedürfnisse anpassen müsst. Die jeweiligen Schlüssel (z.B. section-b) stehen dabei für die Klassen der Elemente im HTML-Dokument. Die zugehörigen Wert (z.B. /bereich-b) bezeichnen hingegen die URL, welche als Pageview an Google Analytics übermittelt wird. Hier könnte man beispielsweise auch /kontakt.html eintragen, wichtig ist aber das führende „/„. Außerdem sollte das im HTML-Dokument letzte Element im Objekt zuerst genannt werden und so weiter.
  • Zeilen 28 bis 29
    Ein kleiner Sprung innerhalb des Dokuments. An dieser Stelle rufen wir anfangs die Funktion scrollTrackPageview() direkt auf. Dies ist empfehlenswert, um direkt zu Beginn die Variable tracking_active korrekt zu setzen. In Zeile 29 weisen wir den Aufruf der Funktion dem jQuery scroll-Event zu. Somit wird bei jedem Scroll-Vorgang des Nutzers unsere Funktion scrollTrackPageview() aufgerufen.
  • Zeilen 11 bis 17
    Innerhalb dieser Schleife gehen wir das tracking-Objekt durch und überprüfen, ob sich der Viewport aktuell auf dem entsprechenden Bereich befindet. Dazu nutzen wir die beiden jQuery-Funktionen scrollTop() und offset(). Das Ergebnis in Form der Pageview-URL speichern wir in der Variablen section.
  • Zeilen 19 bis 20
    An dieser Stelle überprüfen wir, ob die section-Variable korrekt ermittelt wurde und ob deren Wert ungleich mit tracking_active ist. Falls nicht, wird die Ausführung der weiteren Funktion unterbrochen und es passiert nichts.
  • Zeile 22
    Die wohl wichtigste Zeile. Wir werden _gaq.push() um den „virtuellen“ Pageview an Google Analytics zu übermitteln.
  • Zeile 23
    Wer die korrekte Funktionsweise des Script überprüfen möchte, kann diese Zeile entkommentieren. Dann wird bei jedem Aufruf von _gaq.push() auch ein Eintrag in die Browser-Konsole geschrieben.

Bonus 1: Pageview beim Abschicken eines AJAX-Kontaktformulares

Natürlich könnt ihr auch andere Events auf diese Weise erfassen, beispielsweise das Abschicken eines Kontaktformulares oder einer Registrierung per AJAX. Dies bietet sich vor allem an, um die Konversion-Rate des Vorgangs zu erfassen.

Im folgenden der diesmal unkommentiere Quellcode. Wer den Vorgang in der script.js verstanden hat, wird hiermit auch zurecht kommen ;-)

Bonus 2: Bestimmte Events in Google Analytics als Konversion kennzeichnen

Mit Google Analytics ist es sehr leicht möglich, aus den aufgezeichneten Pageviews ein simples Konversion-Tracking zu erstellen. Dazu wechselt man in der Analytics Navigation auf den Punkt „Conversions“, dann „Ziele“, dann „Übersicht“ und dann auf „Ziele definieren“. Hier nun ein weiterer Klick auf „Ziel erstellen“.

Den Namen des neuen Ziel kann man natürlich frei wählen, wie zum Beispiel „Kontaktformular abgeschickt“. Unter der Auswahl „Typ“ wählt man schließlich „Ziel“ aus.

analytics conversion tracking

Im nächsten Schritt trägt man nun unter „Ziel“ den URL-Part genau so ein, wie wir in vorhin im Script definiert haben. Also z.B. /section-b. Optional kann man noch Werte oder Trichter zuweisen und mit einem Klick auf „Ziel erstellen“ wurde das Konversion-Tracking auch schon angelegt.

Das ganze funktioniert natürlich wie erwähnt nicht nur für Events wie das Abschicken eines Formulares, sondern es kann auch ein Konversion-Tracking für das Scrollen an einen bestimmten Punkt aufgesetzt werden.

Ich hoffe der Beitrag hat euch gefallen. Falls etwas unverständlich ist, nutzt einfach die neue Google+ Kommentarfunktion :)

Dieser Artikel wurde am 14.06.2013 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?