A/B-Testing mit Node.js

A/B-Testing mit Node.js

Features einer Applikation werden häufig implementiert, weil die Verantwortlichen vermuten, dass diese Funktionalitäten einen Mehrwert für die Benutzer der Applikation bieten. Je nach Umfang wird mehr oder weniger Geld investiert. Ohne weitere Unterstützung sind und bleiben es jedoch Vermutungen. Eine bessere Lösung bieten hier A/B-Tests. Features werden kostengünstig in einer oder mehreren Varianten umgesetzt und mit einer Kontrollimplementierung verglichen. Die Umsetzung, die sich als die beste herausstellt, wird überarbeitet und bleibt in der Applikation erhalten. Diese Vorgehensweise lässt sich sehr gut in Node.js-Applikationen integrieren. Mithilfe von A/B-Tests können Sie Ihre Applikation an den Anforderungen Ihrer Benutzer ausrichten.

9fd17a38660f0c98089a65c0a7da65d1?s=128

Sebastian Springer

June 01, 2017
Tweet

Transcript

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

  2. Basti • Sebastian Springer • aus München • arbeite bei

    MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler
  3. A/B-Testing Frontend-Testing ExpressAB Feature Flags Sixpack Agenda Rainer Sturm /

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

  5. 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.
  6. None
  7. 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
  8. Was kann man testen? lichtkunst.73 / pixelio.de

  9. 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 Workflows. Je nachdem, wie tief in die Applikation eingegriffen werden soll, müssen unterschiedliche Werkzeuge verwendet werden.
  10. Vorgehensweise 1. Hypothese(n) 2. Umfang des Experiments festlegen 3. Unterschiedliche

    Varianten implementieren 4. Ausspielen 5. Tracken 6. Auswerten 7. Die bessere Version verwenden
  11. 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.
  12. Die Hypothese Die Hypothese muss möglichst klar und messbar formuliert

    werden. Damit kann der Erfolg des Experiments gemessen werden.
  13. 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.
  14. Umfang festlegen Peter Reinäcker / pixelio.de

  15. 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 beeinflussen. Der Umfang muss so gewählt werden, dass aussagekräftige Daten geliefert werden.
  16. Implementieren w.r.wagner / pixelio.de

  17. Frontendbasierte Tests

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

    Tests angepasst.
  19. 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.
  20. None
  21. Optimizely Optimizely ist ein klassisches frontendbasiertes Werkzeug für A/B- und

    multivarianten-Tests. Es gibt sowohl eine (eingeschränkte) freie als auch eine kostenpflichtige Version. Mittlerweile gibt es auch Erweiterungen für andere Plattformen wie Node
  22. Verteilung • Prozentuale Verteilung • Browser • Sources • Cookies

    • Request Parameters • Geo/Language
  23. Arbeitsweise https://help.optimizely.com/Build_Campaigns_and_Experiments/How_Optimizely_Works%3A_Snippet_order_of_execution_and_JavaScript_evaluation_timing

  24. 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(); } }); }
  25. Optimizely

  26. 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
  27. None
  28. 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.
  29. 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.
  30. 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.
  31. 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);
  32. Express-ab Über die Informationen im Cookie des Benutzers wird die

    jeweilige Variante zugeordnet, sodass ein Benutzer stets die selbe Variante erhält.
  33. 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.
  34. Experiments

  35. 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.
  36. Google Experiments

  37. 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'); });
  38. Feature Flags S. Hofschlaeger / pixelio.de

  39. 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 Konfiguration den Code-Block ausführt oder nicht.
  40. Feature Flags app.get('/profile', (req, res) => { const data =

    {}; if (config.isEnabled('newConfig')) { res.render('newProfile.ejs', data); } else { res.render('profile.ejs', data); } });
  41. Feature Flags Nachdem ein Feature Flag nicht mehr benötigt wird,

    sollte zumindest die Abfrage entfernt werden.
  42. Sixpack Alexander Klaus / pixelio.de

  43. 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.
  44. Sixpack Web UI

  45. 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); } });
  46. None
  47. 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
  48. 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);
  49. Auswertung S. Hofschlaeger / pixelio.de

  50. 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 grafische Oberfläche.
  51. Fallstricke Kurt Michel / pixelio.de

  52. Fallstricke Komplexität Laufzeit Teilnehmer Zeitraum

  53. 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 beeinflussen und verfälschen unter Umständen die Ergebnisse.
  54. 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.
  55. 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.
  56. Zeitraum Experimente sollten in einem möglichst neutralen Zeitraum stattfinden. In

    einem Online-Shop ist der Traffic in der Weihnachtszeit am höchsten. Diese Zeit ist auch nicht immer repräsentativ.
  57. Fragen? Rainer Sturm / pixelio.de

  58. KONTAKT Sebastian Springer sebastian.springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe 13 80339 München

    @basti_springer https://github.com/sspringer82