Embed Size (px)
DESCRIPTION
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.
Citation preview
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
HENRY ZEITLERFrontendentwickler bei netzkern
Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
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
PortraitLandscape
Conversion Button
Conversion Button
Beispiel: Produktseite in einem Online Shop
Produkt Produkt
The Fold----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Verwendete Endgeräte. Auslesen des User
Agents.
Google Analytics Mobile Tracking Features
Screensize und Viewportsize des
Besuchers.
Orientation des Geräts. Landscape
oder Portrait.
…alles ermittelt beim initialen Laden ;)
+ +
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
1. Seite wird besucht.
Der Google Analytics Tracking Code (GATC)
3. Tracking Code (ga.js) wird asynchron geladen und
ausgeführt.
2. Array _gaq wird erzeugt. Tracking Anweisungen
werden hier gespeichert.
4. Gesammelte Daten werden mittels _utm.gif und Request an GA
übermittelt.
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
0.8 KB. Minified & gzipped.
enquire.js Awesome Media Queries in JavaScript
Arbeitet mit der matchMedia API und Polyfills für ältere
Browser.
Natives JavaScript.
http://wicky.nillia.ms/enquire.js/
✔✔
✔
➜
Benutzt die Syntax von CSS3 Media Queries. ✔
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
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.
Aufgabe: Was wollen wir tracken?
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
Tracking Orientation Change
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Toggle Classes respClass
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Tracking Events mit click()
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
http://goo.gl/kr8mQS
Test Case online
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Debugging Browser Plugins
FireFox
http://goo.gl/W9uBgpChrome
http://goo.gl/0ZYq9
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Debugging Developer Tools
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Zum Nachlesen: Google Analytics and Responsive Web Design - Introducing Responsive Tracking – Maigrün Blog
http://goo.gl/hftSYL
Links zum Thema
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
Vielen Dank! Fragen?
HENRY ZEITLERFrontendentwickler bei [email protected]+HenryZeitler@Freizeitler
