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

DieProduktMacher

Contact

DieProduktMacher GmbH Daiserstr. 15 81371 Munich www.DieProduktMacher.com

Tobias Kleyer Chief Data Scientist Tobias.Kleyer@DieProduktMacher.com

2  

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