Upload
optimizely
View
643
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 [email protected] 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/
Citation preview
DieProduktMacher
Contact
DieProduktMacher GmbH Daiserstr. 15 81371 Munich www.DieProduktMacher.com
Tobias Kleyer Chief Data Scientist [email protected]
2
Contact Toby Urff Solutions Architect [email protected] www.optimizely.de
3
4
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
5
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
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
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
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
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
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
11
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
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.
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
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
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
Was muss ich in AngularJS machen?
In der selben Datei einfügen in der auch die App deklariert und die Module geladen werden.
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
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 Änderung des Zustands („States“) einer Web-App (selbst
wenn sich die URL nicht verändert).
19
Vorgehen in anderen Single Page Apps
20
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
21
Showcase
Live-Beispiel auf MyTripMap
§ 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
Fragen?