A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
-
Upload
optimizely -
Category
Internet
-
view
647 -
download
0
description
Transcript of A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS
![Page 1: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/1.jpg)
DieProduktMacher
![Page 2: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/2.jpg)
Contact
DieProduktMacher GmbH Daiserstr. 15 81371 Munich www.DieProduktMacher.com
Tobias Kleyer Chief Data Scientist [email protected]
2
![Page 4: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/4.jpg)
4
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 5: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/5.jpg)
5
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 6: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/6.jpg)
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
![Page 7: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/7.jpg)
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
![Page 8: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/8.jpg)
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
![Page 9: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/9.jpg)
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
![Page 10: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/10.jpg)
10
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 11: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/11.jpg)
11
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 12: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/12.jpg)
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.
![Page 13: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/13.jpg)
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
![Page 14: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/14.jpg)
14
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 15: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/15.jpg)
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.
![Page 16: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/16.jpg)
16
Was muss ich in AngularJS machen?
In der selben Datei einfügen in der auch die App deklariert und die Module geladen werden.
![Page 17: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/17.jpg)
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
![Page 18: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/18.jpg)
18
Was muss ich in Optimizely machen?
Manuelle Aktivierung in allen Tests auswählen
![Page 19: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/19.jpg)
§ 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
![Page 20: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/20.jpg)
20
Agenda Was sind Single Page Apps (SPA) und AngularJS?
Einblick Optimizely
Schwierigkeiten SPA & Optimizely
Lösungsweg
Anwendungsbeispiel
![Page 21: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/21.jpg)
21
Showcase
Live-Beispiel auf MyTripMap
![Page 22: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/22.jpg)
§ 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
![Page 23: A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022051515/554f1e4ab4c905723a8b4e26/html5/thumbnails/23.jpg)
23
Fragen?