responsive tracking – responsive web design und dynamisches conversion-tracking mit google...
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.TRANSCRIPT
![Page 1: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/1.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
HENRY ZEITLERFrontendentwickler bei netzkern
Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics
![Page 2: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/2.jpg)
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.
![Page 3: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/3.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
PortraitLandscape
Conversion Button
Conversion Button
Beispiel: Produktseite in einem Online Shop
Produkt Produkt
The Fold----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
![Page 4: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/4.jpg)
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 ;)
+ +
![Page 5: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/5.jpg)
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.
![Page 6: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/6.jpg)
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. ✔
![Page 7: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/7.jpg)
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.
![Page 8: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/8.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Tracking Orientation Change
![Page 9: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/9.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Toggle Classes respClass
![Page 10: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/10.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Tracking Events mit click()
![Page 11: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/11.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
http://goo.gl/kr8mQS
Test Case online
![Page 12: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/12.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Debugging Browser Plugins
FireFox
http://goo.gl/W9uBgpChrome
http://goo.gl/0ZYq9
![Page 13: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/13.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Debugging Developer Tools
![Page 14: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics](https://reader038.vdocuments.net/reader038/viewer/2022102710/5482c25fb4af9f81098b4656/html5/thumbnails/15.jpg)
Unsichtbare Technologie. Sichtbare Kreativität. netzkern. www.netzkern.de
Vielen Dank! Fragen?
HENRY ZEITLERFrontendentwickler bei [email protected]+HenryZeitler@Freizeitler