/opticon-fs-odp-demo

Opticon 2022 Feature Experimentation + ODP Demo

This repository contains code and documentation for the Opticon "Peanut Butter and Jelly: Feature Experimentation & Optimizely Data Platform"

Demo Architecture

This Demo contains several components

Building and deploying this repository

In the /demo directory, use the following to build the demo javascript payload

npm install
npm run build

Deploy by committing the contents of /dist to the main branch of this repository and pushing to Github. Github will use a webhook to tell the Mosey Fashion backend to download the contents of this repository and serve them statically.

You can trigger a "deploy" manually with

./bin/deploy.sh

Demo Preparation Instructions

Open the following tabs:

  1. 2022-10-04 Opticon Full Stack + ODP Demo (Google Slides)

  2. Mosey Fashion (Foundation)

    • Use the chrome inspector to clear application storage

  3. Opticon 22 ODP Demo (FS) (Feature Experimentation)

  4. Optimizely Experimentation Demo (Data Platform)

  5. Opticon 22 ODP Demo (Web) (Web Experimentation)

  6. optimizely/opticon-fs-odp-demo (Github)

    • It's fine to use Visual Studio with a local clone of this repository instead

Demo Presentation instructions

  • [Slides 1-7] Title and Introduction - Present slides 1-6 directly

  • [Slide 8 - 11] Feature Flags - Do not present these slides, instead:

    1. Show Mosey Fashion

    2. Show the promo_hero flag and and walk through the concept of variables, and show the specific variable values in the 20 Percent Off variation

    3. Turn the promo_hero flag On in Production (not Development!)

    4. Show the decideAndRenderPromo() function in flags.js and explain how the flag implementation works, starting with the call to getOptimizelyUserContext and stopping after the call to renderHero

    5. Show Mosey Fashion and hard refresh. You should see the "promo hero" offering 20% off

  • [Slides 12-17] Feature Targeting Do not present these slides, instead:

    1. Show the promo_hero flag and target the Targeted Delivery rule to the Has Purchased (Local) audience

    2. Show the Has Purchased (Local) audience and explain how the has_purchased_local attribute is used to construct it.

    3. Show the instrumentAddToCart() function in [instrument.js](https://github.com/optimizely/opticon-fs-odp-demo/blob/main/demo/src/instrument.js) and explain how the has_purchased_local` attribute is set in localstorage

    4. Show the getOptimizelyUserContext() function in fullstack.js and explain how attributes are retrieved from local storage to create the UserContext object

    5. Show Mosey Fashion and hard refresh. You should NOT see the "promo hero" offer anymore

    6. Navigate to a Product Detail Page and add the item to your cart

    7. Navigate back to the Home Page. You should now see the "promo hero" offer again (because you just "purchased")

  • [Slides 18-25] Feature Targeting with ODP Present slides 19 and 20 directly, then

    1. Show ODP Real Time Segments and find the Has Purchased At Least Once RTS and explain what ODP attributes are, and how the Has Purchased attribute is used to build this audience

    2. Show the the [Has Purchased (ODP) audience] and explain how the ODP Audience Targeting works

    3. Show the promo_hero flag and remove the Has Purchased (Local) audience, and replace it with the Has Purchased (ODP) audience

    4. Show the instrumentAddToCart() function in [instrument.js](https://github.com/optimizely/opticon-fs-odp-demo/blob/main/demo/src/instrument.js) again and explain the window.odpClient.customercall for setting thehas_purchased` ODP attribute

    5. Show the getOptimizelyUserContext() again and explain the userCtx.fetchQualifiedSegments() call

    6. Show Mosey Fashion and hard refresh. You should still see the "promo hero" offer. Open up the chrome inspector, look at local storage, and copy the fs_user_id value.

    7. Open up an incognito window and load Mosey Fashion. You should not see the promo offer. Now, add a url parameter, ?userid=fs_user_id_XXXX, pasting in the value you copied from local storage. NOW you should see the promo offer. You can ham it up by incrementing the number and demonstrating that the offer goes away, and then decrementing it and bringing the offer back

    8. Show the Has Purchased (ODP) Optimizely Web audience while the speaker talks about audience portability

  • [Slides 26-28] Hybrid Local+ODP Feature Targeting Present slides 26 and 27 directly, then

    1. Show the promo_hero flag and add the Has Purchased (Local) audience to the rule so that both the Local and ODP audiences are being targeted

  • [Slides 29-31] Flag Observability don't present these slides, instead

    1. Show the Full Stack Flag Decisions Report

    2. Show the addNotificationListeners function in fs2odp.js and explain how it works

  • [Slides 32-37] Flag Dependencies do not present these slides directly

    1. Show the Has Seen Offer At Least Once RTS in ODP

    2. Show the decideAndRenderHeroPromo function in flags.js and explain the window.odpClient.customer call when hero_promo is enabled

    3. Turn the promo_banner flag On and explain the targeting

    4. Show Mosey Fashion and navigate to a product detail page, demonstrating that you in fact now see the banner. If you like you can change the user ID again and show how it goes away.

  • [Slides 38-39] Present the slides directly