Slides vom Vortrag auf der DC13 in Hamburg. Responsive Web Design erfreut sich nun auch in Deutschland immer größerer Beliebtheit. Jedoch erfolgt das Conversion-Tracking noch eher im Blindflug. Durch die Neuanordnung oder Skalierung von Sektionen auf einer Webseite durch Media Queries können wichtige UI-Elemente den Fokus des Users verlieren. Google Analytics bietet in diesem Bereich zwar viele Möglichkeiten, stößt bei der Dynamisierung aber schnell an seine Grenzen.

1. RESPONSIVE TRACKING
Responsive Web Design und dynamisches Conversion-Tracking
mit Google Analytics
HENRY ZEITLER
Frontendentwickler bei netzkern
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

2. RWD Responsive Web Design
Alle relevanten Inhalte werden auf
dem Desktop, wie auch auf dem
mobilen Endgerät dargestellt.
Die Inhalte werden entsprechend des
Viewports neu arrangiert.
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

3. Landscape
Portrait
Conversion Button
Produkt
Produkt
The Fold
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Conversion Button
Beispiel: Produktseite in einem Online Shop
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

4. Google Analytics Mobile Tracking Features
Verwendete Endgeräte.
Auslesen des User Agents.
+
+
Orientation des Geräts.
Landscape oder Portrait.
Screensize und Viewportsize
des Besuchers.
…alles ermittelt beim initialen Laden ;)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

5. Der Google Analytics Tracking Code (GATC)
1. Seite wird besucht.
2. Array _gaq wird erzeugt.
Tracking Anweisungen werden
hier gespeichert.
3. Tracking Code (ga.js) wird
asynchron geladen und ausgeführt.
4. Gesammelte Daten werden mittels
_utm.gif und Request an GA übermittelt.
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

6. enquire.js Awesome Media Queries in JavaScript
0.8 KB.
Minified & gzipped.
✔
Natives JavaScript.
Arbeitet mit der matchMedia API
und Polyfills für ältere Browser.
✔
Benutzt die Syntax von CSS3
Media Queries.
✔
➜
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
✔
http://wicky.nillia.ms/enquire.js/
www.netzkern.de

7. Aufgabe: Was wollen wir tracken?
1. Wir wollen einen Orientation Change und eine Conversion
auf einem Tablet messen. Wir haben es mit einer
Viewportgröße von 1024 x 768px zu tun. Also setzen wir
einen Breakpoint mit einem Media Query bei 768px.
2. Wenn der Besucher der Seite von Landscape auf Portrait
und umgekehrt wechselt, unabhängig vom Conversion
Button.
3. Wenn der Button bei Viewportsize 768px geklickt wird soll
ein Event an Google Analytics geschickt werden.
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

8. Tracking Orientation Change
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

9. Toggle Classes respClass
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

10. Tracking Events mit click()
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

11. Test Case online
http://goo.gl/kr8mQS
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

12. Debugging Browser Plugins
Chrome
http://goo.gl/0ZYq9
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
FireFox
http://goo.gl/W9uBgp
www.netzkern.de

13. Debugging Developer Tools
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

14. Links zum Thema
Zum Nachlesen: Google Analytics and Responsive Web
Design - Introducing Responsive Tracking – Maigrün Blog
http://goo.gl/hftSYL
Tracking Mobile Visitors in Google Analytics: A Checklist
Guide for Mobile Insights
http://goo.gl/clFL3
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de

15. Vielen Dank! Fragen?
HENRY ZEITLER
Frontendentwickler bei netzkern
henry.zeitler@netzkern.de
+HenryZeitler
@Freizeitler
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.
www.netzkern.de