SlideShare ist ein Scribd-Unternehmen logo
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
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
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
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
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
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
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
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

http://goo.gl/W9uBgp
www.netzkern.de
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

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
Vielen Dank! Fragen?

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

Unsichtbare Technologie. Sichtbare Kreativität. netzkern.

www.netzkern.de

Weitere ähnliche Inhalte

Andere mochten auch

Designkantine mobile first_pdf
Designkantine mobile first_pdfDesignkantine mobile first_pdf
Designkantine mobile first_pdf
Claus Medvesek
 
Trucages 13 t
Trucages 13 tTrucages 13 t
Trucages 13 t
maky65
 
DINOSAUROAK EGITASMOA
DINOSAUROAK EGITASMOADINOSAUROAK EGITASMOA
DINOSAUROAK EGITASMOA
geroahh
 
AdEffects Premium
AdEffects PremiumAdEffects Premium
AdEffects Premium
TOMORROW FOCUS AG
 
Mobile Effects September 2011 Highlights
Mobile Effects September 2011 HighlightsMobile Effects September 2011 Highlights
Mobile Effects September 2011 Highlights
TOMORROW FOCUS AG
 
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr  Shriniwas KashalikarSampurna Arogyasathi Namasmarn Marathi Bestseller Dr  Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr Shriniwas Kashalikar
banothkishan
 
Periodismo Impreso y Digital ORLANY GUEDEZ
Periodismo Impreso y Digital ORLANY GUEDEZPeriodismo Impreso y Digital ORLANY GUEDEZ
Periodismo Impreso y Digital ORLANY GUEDEZ
Lorenzo Pinto
 
Warum studiere ich Geschichte
Warum studiere ich GeschichteWarum studiere ich Geschichte
Warum studiere ich Geschichte
yoni456
 
Lernende Organisation - GPM
Lernende Organisation - GPMLernende Organisation - GPM
Lernende Organisation - GPM
GappBridging
 
Berner Fachhochschule
Berner FachhochschuleBerner Fachhochschule
Berner Fachhochschule
Atizo AG
 
Epochen
EpochenEpochen
Epochen
markar2
 
Ogia Egiten
Ogia EgitenOgia Egiten
Ogia Egiten
geroahh
 
Empfehlungsmarketing ! und was kommt danach?
Empfehlungsmarketing !  und was kommt danach?Empfehlungsmarketing !  und was kommt danach?
Empfehlungsmarketing ! und was kommt danach?
Slides aus der Zeit vor 42medien
 
NetHotels ReServer Portfolio 2012
NetHotels ReServer Portfolio 2012NetHotels ReServer Portfolio 2012
NetHotels ReServer Portfolio 2012
NetHotels.com
 

Andere mochten auch (16)

Designkantine mobile first_pdf
Designkantine mobile first_pdfDesignkantine mobile first_pdf
Designkantine mobile first_pdf
 
Ppt tabletpc-competitive-positioning-stylistic-de
Ppt tabletpc-competitive-positioning-stylistic-dePpt tabletpc-competitive-positioning-stylistic-de
Ppt tabletpc-competitive-positioning-stylistic-de
 
Trucages 13 t
Trucages 13 tTrucages 13 t
Trucages 13 t
 
DINOSAUROAK EGITASMOA
DINOSAUROAK EGITASMOADINOSAUROAK EGITASMOA
DINOSAUROAK EGITASMOA
 
AdEffects Premium
AdEffects PremiumAdEffects Premium
AdEffects Premium
 
Mobile Effects September 2011 Highlights
Mobile Effects September 2011 HighlightsMobile Effects September 2011 Highlights
Mobile Effects September 2011 Highlights
 
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr  Shriniwas KashalikarSampurna Arogyasathi Namasmarn Marathi Bestseller Dr  Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr Shriniwas Kashalikar
 
Periodismo Impreso y Digital ORLANY GUEDEZ
Periodismo Impreso y Digital ORLANY GUEDEZPeriodismo Impreso y Digital ORLANY GUEDEZ
Periodismo Impreso y Digital ORLANY GUEDEZ
 
Warum studiere ich Geschichte
Warum studiere ich GeschichteWarum studiere ich Geschichte
Warum studiere ich Geschichte
 
Lernende Organisation - GPM
Lernende Organisation - GPMLernende Organisation - GPM
Lernende Organisation - GPM
 
Berner Fachhochschule
Berner FachhochschuleBerner Fachhochschule
Berner Fachhochschule
 
Epochen
EpochenEpochen
Epochen
 
Ogia Egiten
Ogia EgitenOgia Egiten
Ogia Egiten
 
04092005
0409200504092005
04092005
 
Empfehlungsmarketing ! und was kommt danach?
Empfehlungsmarketing !  und was kommt danach?Empfehlungsmarketing !  und was kommt danach?
Empfehlungsmarketing ! und was kommt danach?
 
NetHotels ReServer Portfolio 2012
NetHotels ReServer Portfolio 2012NetHotels ReServer Portfolio 2012
NetHotels ReServer Portfolio 2012
 

Ähnlich wie Responsive Tracking - DC13

Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics  - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...Mobile Analytics  - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
121WATT GmbH
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Digital design 2015 neue und alte entwicklungen - vortrag tourismuscamp 2015
Digital design 2015   neue und alte entwicklungen - vortrag tourismuscamp 2015Digital design 2015   neue und alte entwicklungen - vortrag tourismuscamp 2015
Digital design 2015 neue und alte entwicklungen - vortrag tourismuscamp 2015
Agentur und Beratung für digitale Umbrüche
 
Mobile Strategy - marketing on tour 2014
Mobile Strategy - marketing on tour 2014Mobile Strategy - marketing on tour 2014
Mobile Strategy - marketing on tour 2014
Carsten Lambrecht
 
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
Carsten Lambrecht
 
Mobile SEO Grundlagen
Mobile SEO GrundlagenMobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
Björn Wibben
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Jens Grochtdreis
 
Reality check
Reality checkReality check
Reality check
Thomas Bourne
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Augmented Reality - schnell und einfach wie nie zuvor
Augmented Reality - schnell und einfach wie nie zuvorAugmented Reality - schnell und einfach wie nie zuvor
Augmented Reality - schnell und einfach wie nie zuvor
Marcel Heße
 
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
e-dialog GmbH
 
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
 
Whitepaper Virtuelle Techniken im Handel
Whitepaper Virtuelle Techniken im HandelWhitepaper Virtuelle Techniken im Handel
Whitepaper Virtuelle Techniken im Handel
Virtual Dimension Center (VDC) Fellbach
 
NINC! - Presentation Papers 3D 2008
NINC! -  Presentation Papers 3D 2008NINC! -  Presentation Papers 3D 2008
NINC! - Presentation Papers 3D 2008
Philipp Hummer
 
Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008
kaeau
 
Presentation Papers 3D 2008
Presentation Papers 3D 2008Presentation Papers 3D 2008
Presentation Papers 3D 2008
kaeau
 
eStrategy Magazin 02 / 2014
eStrategy Magazin 02 / 2014eStrategy Magazin 02 / 2014
eStrategy Magazin 02 / 2014
TechDivision GmbH
 
Mobile Trends - Sich abzeichnende Mobile Trends
Mobile Trends - Sich abzeichnende Mobile TrendsMobile Trends - Sich abzeichnende Mobile Trends
Mobile Trends - Sich abzeichnende Mobile Trends
Milos Radovic
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 

Ähnlich wie Responsive Tracking - DC13 (20)

Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics  - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...Mobile Analytics  - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
Mobile Analytics - wie Sie Ihre mobilen Nutzer mit Google Analytics besser v...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Digital design 2015 neue und alte entwicklungen - vortrag tourismuscamp 2015
Digital design 2015   neue und alte entwicklungen - vortrag tourismuscamp 2015Digital design 2015   neue und alte entwicklungen - vortrag tourismuscamp 2015
Digital design 2015 neue und alte entwicklungen - vortrag tourismuscamp 2015
 
Mobile Strategy - marketing on tour 2014
Mobile Strategy - marketing on tour 2014Mobile Strategy - marketing on tour 2014
Mobile Strategy - marketing on tour 2014
 
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
 
Mobile SEO Grundlagen
Mobile SEO GrundlagenMobile SEO Grundlagen
Mobile SEO Grundlagen
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Reality check
Reality checkReality check
Reality check
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Augmented Reality - schnell und einfach wie nie zuvor
Augmented Reality - schnell und einfach wie nie zuvorAugmented Reality - schnell und einfach wie nie zuvor
Augmented Reality - schnell und einfach wie nie zuvor
 
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
Google Analytics Konferenz 2015: WORKSHOP: Enhanced ECommerce (Michaela Linha...
 
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
 
Whitepaper Virtuelle Techniken im Handel
Whitepaper Virtuelle Techniken im HandelWhitepaper Virtuelle Techniken im Handel
Whitepaper Virtuelle Techniken im Handel
 
NINC! - Presentation Papers 3D 2008
NINC! -  Presentation Papers 3D 2008NINC! -  Presentation Papers 3D 2008
NINC! - Presentation Papers 3D 2008
 
Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008
 
Presentation Papers 3D 2008
Presentation Papers 3D 2008Presentation Papers 3D 2008
Presentation Papers 3D 2008
 
eStrategy Magazin 02 / 2014
eStrategy Magazin 02 / 2014eStrategy Magazin 02 / 2014
eStrategy Magazin 02 / 2014
 
Mobile Trends - Sich abzeichnende Mobile Trends
Mobile Trends - Sich abzeichnende Mobile TrendsMobile Trends - Sich abzeichnende Mobile Trends
Mobile Trends - Sich abzeichnende Mobile Trends
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 

Responsive Tracking - DC13