DieProduktMacher
Contact
DieProduktMacher GmbH
Daiserstr. 15
81371 Munich
www.DieProduktMacher.com
Tobias Kleyer
Chief Data Scientist
Tobia...
Contact
Toby Urff
Solutions Architect
toby@optimizely.com
www.optimizely.de
3	
  
4	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungswe...
5	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungswe...
6	
  
Was sind Single Page Apps?
Webapplikation mit Backend-Interaktion ausschließlich über
AJAX
Frontend Basis besteht au...
7
Warum gibt es Single Page Apps?
Userexperience einer „nativen“
Desktop/Mobil Applikation
Flüssige Usability
Nicht für Co...
8
Was ist AngularJS?
Open Source Framework unter
der Führung von Google
Frontend Model-View-
Controller Framework
Flexible...
9	
  
AngularJS nur HTML5
HTML5 URL erlauben eine Änderung der Adresszeile ohne
Page-Reload
SPAs können auf die URL-Änderu...
10	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsw...
11	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsw...
Optimizely wird beim Laden einer
Seite ausgeführt.
12	
  
Seite	
  lädt.	
  
Op4mizely	
  prü:	
  ob	
  
Experimente	
  fü...
Nach dem initialen Laden wurde
Optimizely ausgeführt
Warum wird Optimizely bei einer SPA
nicht ausgeführt?
Optimizely wird...
14	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsw...
15
Wie können wir dieses Problem fixen?
Keine Quellcode-Änderungen nötig wenn die Experiment ID
weggelassen wird.
Optimize...
16
Was muss ich in AngularJS machen?
In der selben Datei einfügen in der auch die App deklariert und die
Module geladen we...
17
Was passiert nun in der SPA?
Mit	
  jeder	
  URL	
  Änderung	
  wird	
  das	
  
ac4vate	
  ausgeführt	
  
Op4mizely	
  ...
18
Was muss ich in Optimizely machen?
Manuelle
Aktivierung in
allen Tests
auswählen
§ Finden einer geeigneten Stelle im JavaScript, die…
§  …bei jeder URL-Änderung aufgerufen wird und
§  …bei jeder Änder...
20	
  
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsw...
21
Showcase
Live-Beispiel auf MyTripMap
§ Optimizely Academy:
learn.optimizely.com
§ Optimizely Knowledge Base:
help.optimizely.com
§ Optimizely Blogs:
blog.op...
23
Fragen?
Nächste SlideShare
Wird geladen in …5
×

A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS

1.843 Aufrufe

Veröffentlicht am

Slides des Webinars mit DieProduktmacher, Optimizely Solutions Partner zum Thema 'A/B Tests in Single-Page Applications'

Inhalt des Webinars:

- Vorteile von Single Page Applications
- Erläuterung der Funktionsweise am Beispiel AngularJS
- Kurze Einführung zu Optimizely & AngularJS
- Herausforderungen beim Testen von Single Page Apps
- Wie man diese Probleme lösen kann
- Konkretes Beispiel inklusive Codeeinbau
- Demo von Mytripmap (DieProduktmacher)
- Fragerunde zu AngularJS

Möchten Sie mehr Infos zum Thema A/B tests in Single Page Apps erhalten?

http://www.learn.optimizely.com

http://www.help.optimizely.com

http://www.blog.optimizely.de

support@optimizely.com

Möchten Sie mehr über die Arbeit der ProduktMacher im Bereich A/B Testing und Conversion Optimierung erfahren?

Hier alle Infos: http://www.dieproduktmacher.com/

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.843
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
122
Aktionen
Geteilt
0
Downloads
10
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS

  1. 1. DieProduktMacher
  2. 2. Contact DieProduktMacher GmbH Daiserstr. 15 81371 Munich www.DieProduktMacher.com Tobias Kleyer Chief Data Scientist Tobias.Kleyer@DieProduktMacher.com 2  
  3. 3. Contact Toby Urff Solutions Architect toby@optimizely.com www.optimizely.de 3  
  4. 4. 4   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  5. 5. 5   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  6. 6. 6   Was sind Single Page Apps? Webapplikation mit Backend-Interaktion ausschließlich über AJAX Frontend Basis besteht aus HTML5/CSS3 und Javascript Kein kompletter Seiten Reload Backend Technologie beliebig, idealerweise RESTful
  7. 7. 7 Warum gibt es Single Page Apps? Userexperience einer „nativen“ Desktop/Mobil Applikation Flüssige Usability Nicht für Content getriebene Seiten geeignet Entkoppelung Backend und Frontend
  8. 8. 8 Was ist AngularJS? Open Source Framework unter der Führung von Google Frontend Model-View- Controller Framework Flexible Architektur Legt großen Wert auf Testability
  9. 9. 9   AngularJS nur HTML5 HTML5 URL erlauben eine Änderung der Adresszeile ohne Page-Reload SPAs können auf die URL-Änderung reagieren Verhalten wie „normale“ URLs, bookmarkbar, copy/paste
  10. 10. 10   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  11. 11. 11   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  12. 12. Optimizely wird beim Laden einer Seite ausgeführt. 12   Seite  lädt.   Op4mizely  prü:  ob   Experimente  für  die   Seite  verfügbar  sind.   Variantenänderungen   werden  durchgeführt.   Wie wird Optimizely in der Regel ausgeführt? Bei erfüllten Bedingungen: Variante anzeigen Experimente-Targeting wird gecheckt.
  13. 13. Nach dem initialen Laden wurde Optimizely ausgeführt Warum wird Optimizely bei einer SPA nicht ausgeführt? Optimizely wird nicht automatisch wieder aktiviert Kein Laden des Skriptes bei weiteren Interaktionen 13   LadeURL   Op4mizely   startet   Seite   vollständig   geladen   Lade  AJAX   Snippet  
  14. 14. 14   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  15. 15. 15 Wie können wir dieses Problem fixen? Keine Quellcode-Änderungen nötig wenn die Experiment ID weggelassen wird. Optimizely JavaScript-API-Schnittstelle ermöglicht manuelles Laden der Tests.
  16. 16. 16 Was muss ich in AngularJS machen? In der selben Datei einfügen in der auch die App deklariert und die Module geladen werden.
  17. 17. 17 Was passiert nun in der SPA? Mit  jeder  URL  Änderung  wird  das   ac4vate  ausgeführt   Op4mizely  checkt  ob  die  Experiment   Bedingungen  erfüllt  sind   LadeURL Optimizely startet Seite vollständig geladen Lade AJAX Snippet Änderung URL Variante geladen Optimizely startet activate
  18. 18. 18 Was muss ich in Optimizely machen? Manuelle Aktivierung in allen Tests auswählen
  19. 19. § Finden einer geeigneten Stelle im JavaScript, die… §  …bei jeder URL-Änderung aufgerufen wird und §  …bei jeder Änderung des Zustands („States“) einer Web-App (selbst wenn sich die URL nicht verändert). 19 Vorgehen in anderen Single Page Apps
  20. 20. 20   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  21. 21. 21 Showcase Live-Beispiel auf MyTripMap
  22. 22. § Optimizely Academy: learn.optimizely.com § Optimizely Knowledge Base: help.optimizely.com § Optimizely Blogs: blog.optimizely.de & blog.optimizely.com § Optiverse Forum: community.optimizely.com 22 Lernresourcen
  23. 23. 23 Fragen?

×