RESPONSIVE TRACKING
Responsive Web Design und dynamisches Conversion-Tracking
mit Google Analytics

HENRY ZEITLER

Fronten...
RWD Responsive Web Design

Alle relevanten Inhalte werden auf
dem Desktop, wie auch auf dem
mobilen Endgerät dargestellt.
...
Landscape

Portrait

Conversion Button

Produkt

Produkt

The Fold

------------------------------------------------------...
Google Analytics Mobile Tracking Features

Verwendete Endgeräte.
Auslesen des User Agents.

+

+

Orientation des Geräts.
...
Der Google Analytics Tracking Code (GATC)

1. Seite wird besucht.

2. Array _gaq wird erzeugt.
Tracking Anweisungen werden...
enquire.js Awesome Media Queries in JavaScript
0.8 KB.
Minified & gzipped.

✔

Natives JavaScript.

Arbeitet mit der match...
Aufgabe: Was wollen wir tracken?
1. Wir wollen einen Orientation Change und eine Conversion
auf einem Tablet messen. Wir h...
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
Test Case online

http://goo.gl/kr8mQS

Unsichtbare Technologie. Sichtbare Kreativität. netzkern.

www.netzkern.de
Debugging Browser Plugins

Chrome

http://goo.gl/0ZYq9
Unsichtbare Technologie. Sichtbare Kreativität. netzkern.

FireFox
...
Debugging Developer Tools

Unsichtbare Technologie. Sichtbare Kreativität. netzkern.

www.netzkern.de
Links zum Thema
Zum Nachlesen: Google Analytics and Responsive Web
Design - Introducing Responsive Tracking – Maigrün Blog...
Vielen Dank! Fragen?

HENRY ZEITLER
Frontendentwickler bei netzkern
henry.zeitler@netzkern.de
+HenryZeitler
@Freizeitler

...
Nächste SlideShare
Wird geladen in …5
×

Responsive Tracking - DC13

277 Aufrufe

Veröffentlicht am

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.

An wen ist die Session gerichet?
Der Vortrag richtet sich an Marketers und Frontender.

Veröffentlicht in: Marketing
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
277
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Tracking - DC13

  1. 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. 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. 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. 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. 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. 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. 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. 8. Tracking Orientation Change Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
  9. 9. Toggle Classes respClass Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
  10. 10. Tracking Events mit click() Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
  11. 11. Test Case online http://goo.gl/kr8mQS Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
  12. 12. Debugging Browser Plugins Chrome http://goo.gl/0ZYq9 Unsichtbare Technologie. Sichtbare Kreativität. netzkern. FireFox http://goo.gl/W9uBgp www.netzkern.de
  13. 13. Debugging Developer Tools Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
  14. 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. 15. Vielen Dank! Fragen? HENRY ZEITLER Frontendentwickler bei netzkern henry.zeitler@netzkern.de +HenryZeitler @Freizeitler Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de

×