SlideShare ist ein Scribd-Unternehmen logo
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?

Weitere ähnliche Inhalte

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

Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
Matthias Jauernig
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
Nico Orschel
 
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
Nico Orschel
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian BlochGoogle - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Maximilian Bloch
 
Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!
takevalue Consulting GmbH
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
Christian Heilmann
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
inovex GmbH
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
OPITZ CONSULTING Deutschland
 
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesModern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
Riccardo Massera
 
Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020
Ingo Steinke
 
AngularJS
AngularJSAngularJS
AngularJS
gedoplan
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
OPITZ CONSULTING Deutschland
 
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
Nico Orschel
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
Manfred Steyer
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 

Ähnlich wie A/B Tests mit Optimizely in Single Page Apps - Beispiel AngularJS (20)

Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
UI Testautomation in der Praxis ... von Lokalisierung bis Nachhaltigkeit (Cod...
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian BlochGoogle - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
 
Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!Google Search Console für SEO einsetzen!
Google Search Console für SEO einsetzen!
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
 
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesModern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
 
Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020Cologne Web Performance Meetup 29.04.2020
Cologne Web Performance Meetup 29.04.2020
 
AngularJS
AngularJSAngularJS
AngularJS
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
 
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 

Mehr von Optimizely

Clover Rings Up Digital Growth to Drive Experimentation
Clover Rings Up Digital Growth to Drive ExperimentationClover Rings Up Digital Growth to Drive Experimentation
Clover Rings Up Digital Growth to Drive Experimentation
Optimizely
 
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
Optimizely
 
The Science of Getting Testing Right
The Science of Getting Testing RightThe Science of Getting Testing Right
The Science of Getting Testing Right
Optimizely
 
Atlassian's Mystique CLI, Minimizing the Experiment Development Cycle
Atlassian's Mystique CLI, Minimizing the Experiment Development CycleAtlassian's Mystique CLI, Minimizing the Experiment Development Cycle
Atlassian's Mystique CLI, Minimizing the Experiment Development Cycle
Optimizely
 
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
Optimizely
 
Zillow + Optimizely: Building the Bridge to $20 Billion Revenue
Zillow + Optimizely: Building the Bridge to $20 Billion RevenueZillow + Optimizely: Building the Bridge to $20 Billion Revenue
Zillow + Optimizely: Building the Bridge to $20 Billion Revenue
Optimizely
 
The Future of Optimizely for Technical Teams
The Future of Optimizely for Technical TeamsThe Future of Optimizely for Technical Teams
The Future of Optimizely for Technical Teams
Optimizely
 
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
Optimizely
 
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
Optimizely
 
Building an Experiment Pipeline for GitHub’s New Free Team Offering
Building an Experiment Pipeline for GitHub’s New Free Team OfferingBuilding an Experiment Pipeline for GitHub’s New Free Team Offering
Building an Experiment Pipeline for GitHub’s New Free Team Offering
Optimizely
 
AMC Networks Experiments Faster on the Server Side
AMC Networks Experiments Faster on the Server SideAMC Networks Experiments Faster on the Server Side
AMC Networks Experiments Faster on the Server Side
Optimizely
 
Evolving Experimentation from CRO to Product Development
Evolving Experimentation from CRO to Product DevelopmentEvolving Experimentation from CRO to Product Development
Evolving Experimentation from CRO to Product Development
Optimizely
 
Overcoming the Challenges of Experimentation on a Service Oriented Architecture
Overcoming the Challenges of Experimentation on a Service Oriented ArchitectureOvercoming the Challenges of Experimentation on a Service Oriented Architecture
Overcoming the Challenges of Experimentation on a Service Oriented Architecture
Optimizely
 
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
Optimizely
 
Making Your Hypothesis Work Harder to Inform Future Product Strategy
Making Your Hypothesis Work Harder to Inform Future Product StrategyMaking Your Hypothesis Work Harder to Inform Future Product Strategy
Making Your Hypothesis Work Harder to Inform Future Product Strategy
Optimizely
 
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives RevenueKick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
Optimizely
 
Experimentation through Clients' Eyes
Experimentation through Clients' EyesExperimentation through Clients' Eyes
Experimentation through Clients' Eyes
Optimizely
 
Shipping to Learn and Accelerate Growth with GitHub
Shipping to Learn and Accelerate Growth with GitHubShipping to Learn and Accelerate Growth with GitHub
Shipping to Learn and Accelerate Growth with GitHub
Optimizely
 
Test Everything: TrustRadius Delivers Customer Value with Experimentation
Test Everything: TrustRadius Delivers Customer Value with ExperimentationTest Everything: TrustRadius Delivers Customer Value with Experimentation
Test Everything: TrustRadius Delivers Customer Value with Experimentation
Optimizely
 
Optimizely Agent: Scaling Resilient Feature Delivery
Optimizely Agent: Scaling Resilient Feature DeliveryOptimizely Agent: Scaling Resilient Feature Delivery
Optimizely Agent: Scaling Resilient Feature Delivery
Optimizely
 

Mehr von Optimizely (20)

Clover Rings Up Digital Growth to Drive Experimentation
Clover Rings Up Digital Growth to Drive ExperimentationClover Rings Up Digital Growth to Drive Experimentation
Clover Rings Up Digital Growth to Drive Experimentation
 
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
Make Every Touchpoint Count: How to Drive Revenue in an Increasingly Online W...
 
The Science of Getting Testing Right
The Science of Getting Testing RightThe Science of Getting Testing Right
The Science of Getting Testing Right
 
Atlassian's Mystique CLI, Minimizing the Experiment Development Cycle
Atlassian's Mystique CLI, Minimizing the Experiment Development CycleAtlassian's Mystique CLI, Minimizing the Experiment Development Cycle
Atlassian's Mystique CLI, Minimizing the Experiment Development Cycle
 
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
Autotrader Case Study: Migrating from Home-Grown Testing to Best-in-Class Too...
 
Zillow + Optimizely: Building the Bridge to $20 Billion Revenue
Zillow + Optimizely: Building the Bridge to $20 Billion RevenueZillow + Optimizely: Building the Bridge to $20 Billion Revenue
Zillow + Optimizely: Building the Bridge to $20 Billion Revenue
 
The Future of Optimizely for Technical Teams
The Future of Optimizely for Technical TeamsThe Future of Optimizely for Technical Teams
The Future of Optimizely for Technical Teams
 
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
Empowering Agents to Provide Service from Anywhere: Contact Centers in the Ti...
 
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
Experimentation Everywhere: Create Exceptional Online Shopping Experiences an...
 
Building an Experiment Pipeline for GitHub’s New Free Team Offering
Building an Experiment Pipeline for GitHub’s New Free Team OfferingBuilding an Experiment Pipeline for GitHub’s New Free Team Offering
Building an Experiment Pipeline for GitHub’s New Free Team Offering
 
AMC Networks Experiments Faster on the Server Side
AMC Networks Experiments Faster on the Server SideAMC Networks Experiments Faster on the Server Side
AMC Networks Experiments Faster on the Server Side
 
Evolving Experimentation from CRO to Product Development
Evolving Experimentation from CRO to Product DevelopmentEvolving Experimentation from CRO to Product Development
Evolving Experimentation from CRO to Product Development
 
Overcoming the Challenges of Experimentation on a Service Oriented Architecture
Overcoming the Challenges of Experimentation on a Service Oriented ArchitectureOvercoming the Challenges of Experimentation on a Service Oriented Architecture
Overcoming the Challenges of Experimentation on a Service Oriented Architecture
 
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
How The Zebra Utilized Feature Experiments To Increase Carrier Card Engagemen...
 
Making Your Hypothesis Work Harder to Inform Future Product Strategy
Making Your Hypothesis Work Harder to Inform Future Product StrategyMaking Your Hypothesis Work Harder to Inform Future Product Strategy
Making Your Hypothesis Work Harder to Inform Future Product Strategy
 
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives RevenueKick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
Kick Your Assumptions: How Scholl's Test-Everything Culture Drives Revenue
 
Experimentation through Clients' Eyes
Experimentation through Clients' EyesExperimentation through Clients' Eyes
Experimentation through Clients' Eyes
 
Shipping to Learn and Accelerate Growth with GitHub
Shipping to Learn and Accelerate Growth with GitHubShipping to Learn and Accelerate Growth with GitHub
Shipping to Learn and Accelerate Growth with GitHub
 
Test Everything: TrustRadius Delivers Customer Value with Experimentation
Test Everything: TrustRadius Delivers Customer Value with ExperimentationTest Everything: TrustRadius Delivers Customer Value with Experimentation
Test Everything: TrustRadius Delivers Customer Value with Experimentation
 
Optimizely Agent: Scaling Resilient Feature Delivery
Optimizely Agent: Scaling Resilient Feature DeliveryOptimizely Agent: Scaling Resilient Feature Delivery
Optimizely Agent: Scaling Resilient Feature Delivery
 

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

  • 2. Contact DieProduktMacher GmbH Daiserstr. 15 81371 Munich www.DieProduktMacher.com Tobias Kleyer Chief Data Scientist Tobias.Kleyer@DieProduktMacher.com 2  
  • 4. 4   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 5. 5   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 6. 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. 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. 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. 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. 10   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 11. 11   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 12. 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.
  • 13. 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. 14   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 15. 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. 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. 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. 18 Was muss ich in Optimizely machen? Manuelle Aktivierung in allen Tests auswählen
  • 19. § 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. 20   Agenda Was sind Single Page Apps (SPA) und AngularJS? Einblick Optimizely Schwierigkeiten SPA & Optimizely Lösungsweg Anwendungsbeispiel
  • 22. § 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