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/

1. DieProduktMacher

2. Contact
DieProduktMacher GmbH
Daiserstr. 15
81371 Munich
www.DieProduktMacher.com
Tobias Kleyer
Chief Data Scientist
Tobias.Kleyer@DieProduktMacher.com
2

3. Contact
Toby Urff
Solutions Architect
toby@optimizely.com
www.optimizely.de
3

4. 4
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

5. 5
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

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
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
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
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
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

11. 11
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

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. 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
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

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
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
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
Was muss ich in Optimizely machen?
Manuelle
Aktivierung in
allen Tests
auswählen

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
Agenda
Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel

21. 21
Showcase
Live-Beispiel auf MyTripMap

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
Fragen?