A/B-Testing mit Node.js

Slide 1

Slide 1 text

A/B-Testing mit Node Wolfgang Dirscherl / pixelio.de

Slide 2

Slide 2 text

Basti • Sebastian Springer • aus München • arbeite bei MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler

Slide 3

Slide 3 text

A/B-Testing Frontend-Testing ExpressAB Feature Flags Sixpack Agenda Rainer Sturm / pixelio.de

Slide 4

Slide 4 text

Thommy Weiss / pixelio.de A/B-Testing?

Slide 5

Slide 5 text

A/B-Testing? Von einem bestimmten Feature werden zwei unterschiedliche Versionen an Benutzer ausgespielt, um zu sehen, welche Variante das gewünschte Ziel besser erfüllt.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Multivarianten-Testing Beim Multivarianten-Testing werden parallel mehrere Versionen und eine Kontrollversion ausgespielt, um zu prüfen, welche besser performt. Vorteil: Das Ergebnis liegt wesentlich schneller vor als beim A/B-Testing Nachteil: es werden mehr Nutzer benötigt, um aussagekräftig zu sein

Slide 8

Slide 8 text

Was kann man testen? lichtkunst.73 / pixelio.de

Slide 9

Slide 9 text

Was kann man testen? Grundsätzlich kann nahezu jeder Aspekt einer Applikation getestet werden. Die Spanne reicht von angepassten Layouts über eine veränderte Seitenstruktur bis hin zu unterschiedlichen Workﬂows. Je nachdem, wie tief in die Applikation eingegriffen werden soll, müssen unterschiedliche Werkzeuge verwendet werden.

Slide 10

Slide 10 text

Vorgehensweise 1. Hypothese(n) 2. Umfang des Experiments festlegen 3. Unterschiedliche Varianten implementieren 4. Ausspielen 5. Tracken 6. Auswerten 7. Die bessere Version verwenden

Slide 11

Slide 11 text

Die Hypothese Wenn wir unsere Registrierung von einem großen Formular in mehrere Tabs aufteilen, werden innerhalb von 4 Wochen 20% mehr Felder ausgefüllt.

Slide 12

Slide 12 text

Die Hypothese Die Hypothese muss möglichst klar und messbar formuliert werden. Damit kann der Erfolg des Experiments gemessen werden.

Slide 13

Slide 13 text

Multivarianten Manchmal kann man keine konkrete Hypothese formulieren, sondern muss beispielsweise die Positionierung eines Buttons oder Formulars einfach ausprobieren. Hier kommen Multivarianten-Tests zum Einsatz.

Slide 14

Slide 14 text

Umfang festlegen Peter Reinäcker / pixelio.de

Slide 15

Slide 15 text

Den Umfang festlegen Experimente sollten immer zeitlich begrenzt werden. Je mehr parallele Tests laufen, desto unübersichtlicher wird die Situation. Außerdem können sich Experimente gegenseitig beeinﬂussen. Der Umfang muss so gewählt werden, dass aussagekräftige Daten geliefert werden.

Slide 16

Slide 16 text

Implementieren w.r.wagner / pixelio.de

Slide 17

Slide 17 text

Frontendbasierte Tests

Slide 18

Slide 18 text

Frontendbasierte Tests Die Seitenstruktur wird mit einem JavaScript-Framework entsprechend des Tests angepasst.

Slide 19

Slide 19 text

Was kann ich damit testen? Diese Art von Tests beschränkt sich vor allem auf strukturelle Manipulationen der Seite. Serverseitige Strukturen oder Datenbankanpassungen sind nicht möglich.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Optimizely Optimizely ist ein klassisches frontendbasiertes Werkzeug für A/B- und multivarianten-Tests. Es gibt sowohl eine (eingeschränkte) freie als auch eine kostenpﬂichtige Version. Mittlerweile gibt es auch Erweiterungen für andere Plattformen wie Node

Slide 22

Slide 22 text

Verteilung • Prozentuale Verteilung • Browser • Sources • Cookies • Request Parameters • Geo/Language

Slide 23

Slide 23 text

Arbeitsweise https://help.optimizely.com/Build_Campaigns_and_Experiments/How_Optimizely_Works%3A_Snippet_order_of_execution_and_JavaScript_evaluation_timing

Slide 24

Slide 24 text

Code Snippet function callbackFn(activate, options) { var utils = window.optimizely.get('utils'); var $ = window.optimizely.get('jquery'); utils.waitForElement('button').then(function(el) { if ($('button').length > 0) { activate(); } }); }

Slide 25

Slide 25 text

Optimizely

Slide 26

Slide 26 text

Vorteile Leichtgewichtig und schnell umzusetzen Kann auch von Frontend- Entwicklern  durchgeführt werden Unabhängig vom Backend Änderungen sind nicht persistent Nicht versioniert Quellcode wird nach der Auslieferung manipuliert Zusätzlicher Overhead Nachteile

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Tests mit Node.js In einer Node.js-Webapplikation können A/B-Tests direkt integriert werden. Das hat den Vorteil dass bereits auf dem Server entschieden werden kann, welche Variante ausgespielt wird.

Slide 29

Slide 29 text

A/B-Tests mit Express https://github.com/omichelsen/express-ab Für das Web Application Framework Express gibt es eine Middleware, die die Steuerung der Experimente übernimmt. Diese Experimente basieren auf den Routen der Applikation.

Slide 30

Slide 30 text

A/B-Tests mit Express npm5 install --save express express-ab cookie-parser Als Middleware kann express-ab jederzeit auch in eine bestehende Express-Applikation integriert werden.

Slide 31

Slide 31 text

const express = require('express'); const cookieParser = require('cookie-parser'); const ab = require('express-ab'); const app = express(); app.use(cookieParser()); const profileTest = ab.test('Profile Test'); app.get('/', profileTest(), (req, res) => { res.send('variant A'); }); app.get('/', profileTest(), (req, res) => { res.send('variant B'); }); app.listen(8080);

Slide 32

Slide 32 text

Express-ab Über die Informationen im Cookie des Benutzers wird die jeweilige Variante zugeordnet, sodass ein Benutzer stets die selbe Variante erhält.

Slide 33

Slide 33 text

Verteilung Die Varianten eines Experiments können unterschiedlich gewichtet werden: profileTest(null, 0.2) Dieses Experiment wird in 20% der Anfragen ausgespielt. Insgesamt sollte die Summe der Varianten 1 Ergeben.

Slide 34

Slide 34 text

Experiments

Slide 35

Slide 35 text

Google Experiments Express-ab kann auch mit Google Experiments verwendet werden. Dabei handelt es sich um einen Teil von Google Analytics, der dazu verwendet werden kann Multivarianten- Tests durchzuführen. Mit express-ab kann man sowohl auf die Experiment-ID als auch auf die jeweilige Variante zugreifen und diese auch an den Browser fürs Tracking weiterreichen.

Slide 36

Slide 36 text

Google Experiments

Slide 37

Slide 37 text

Google Experiments const profileTest = ab.test('Profile Test', { id: '123456789' }); app.get('/', profileTest(), (req, res) => { // res.locals.ab.name - 'Profile Test' // res.locals.ab.id - '123456789' // res.locals.ab.variantId - 0 res.send('variant A'); });

Slide 38

Slide 38 text

Feature Flags S. Hofschlaeger / pixelio.de

Slide 39

Slide 39 text

Feature Flags Feature Flags sind eine weitere Variante, um unter anderem A/ B-Tests durchzuführen. Im einfachsten Fall ist ein solches Feature-Flag eine Abfrage im Code, die anhand einer Konﬁguration den Code-Block ausführt oder nicht.

Slide 40

Slide 40 text

Feature Flags app.get('/profile', (req, res) => { const data = {}; if (config.isEnabled('newConfig')) { res.render('newProfile.ejs', data); } else { res.render('profile.ejs', data); } });

Slide 41

Slide 41 text

Feature Flags Nachdem ein Feature Flag nicht mehr benötigt wird, sollte zumindest die Abfrage entfernt werden.

Slide 42

Slide 42 text

Sixpack Alexander Klaus / pixelio.de

Slide 43

Slide 43 text

Sixpack Sixpack ist ein Open Source A/B-Testing-Framework das unabhängig von Sprache und Plattform ist. Die Server- Komponente ist in Python geschrieben. Es gibt Client- Bibliotheken unter anderem auch für Node.

Slide 44

Slide 44 text

Sixpack Web UI

Slide 45

Slide 45 text

Sixpack const sixpack = require('sixpack-client'); const session = new sixpack.Session(); session.participate('test-exp', ['alt-one', 'alt-two'], (err, res) => { if (err) { throw err; } let alt = res.alternative.name if (alt == 'alt-one') { console.log('default: ' + alt); } else { console.log(alt); } });

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Optimizely Optimizely bietet nicht nur die Möglichkeit das Frontend zu “verbiegen”, sondern stellt auch APIs für verschiedene Sprachen und Plattformen wie Node.js zur Verfügung. npm install —-save optimizely-server-sdk

Slide 48

Slide 48 text

Optimizely const optimizely = require('optimizely-server-sdk'); const optimizelyClient = optimizely.createInstance({ datafile: datafile }); const variation = optimizelyClient.activate(‘profile', userId); if (variation === 'variant A') { // Execute code for variation A } else if (variation === 'variant B') { // Execute code for variation B } else { // Execute default code } optimizelyClient.track("my_conversion", userId);

Slide 49

Slide 49 text

Auswertung S. Hofschlaeger / pixelio.de

Slide 50

Slide 50 text

Tracking und Auswertung Der mitunter wichtigste Teil eines Experiments ist seine Auswertung. Zu diesem Zweck bieten die verschiedenen Werkzeuge Möglichkeiten zur Auswertung. Sowohl Optimizely als auch Sixpack und Google Experiments verfügen über eine graﬁsche Oberﬂäche.

Slide 51

Slide 51 text

Fallstricke Kurt Michel / pixelio.de

Slide 52

Slide 52 text

Fallstricke Komplexität Laufzeit Teilnehmer Zeitraum

Slide 53

Slide 53 text

Komplexität Einzelne A/B- oder Multivarianten-Tests sind relativ gut kontrollierbar. Sind viele Experimente in einer großen Applikation parallel aktiv, sollten diese an einer zentralen Stelle verwaltet werden. Wenn möglich sollten verschachtelte Experimente vermieden werden. Derartige Konstellationen können sich gegenseitig beeinﬂussen und verfälschen unter Umständen die Ergebnisse.

Slide 54

Slide 54 text

Laufzeit Die Laufzeit muss so gewählt werden, dass die Ergebnisse aussagekräftig sind. Werden mehrere Experimente hintereinander geschaltet, sollten Sie auch über die gleiche Laufzeit verfügen.

Slide 55

Slide 55 text

Teilnehmer Damit ein Experiment ausgewertet werden kann, müssen genügend Benutzer die an den verschiedenen Varianten teilnehmen. Dies ist wichtig, damit nicht wenige Teilnehmer das Ergebnis verfälschen.

Slide 56

Slide 56 text

Zeitraum Experimente sollten in einem möglichst neutralen Zeitraum stattﬁnden. In einem Online-Shop ist der Trafﬁc in der Weihnachtszeit am höchsten. Diese Zeit ist auch nicht immer repräsentativ.

Slide 57

Slide 57 text

Fragen? Rainer Sturm / pixelio.de

Slide 58

Slide 58 text

KONTAKT Sebastian Springer [email protected] MaibornWolff GmbH Theresienhöhe 13 80339 München @basti_springer https://github.com/sspringer82