|
| 1 | +# Target feature flag sample |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +For this sample, we first created two simple AB activities. One to represent feature flags for engineering purposes and another for marketing purposes. Each activity has two experiences that have JSON offer content. The JSON holds unique key value pairs that are used by the sample app to determine what engineering systems to use and marketing content to show. |
| 6 | + |
| 7 | +### Engineering Feature Flags Activity |
| 8 | +mbox: `demo-engineering-flags` |
| 9 | + |
| 10 | +#### Experience A |
| 11 | +```json |
| 12 | +{ |
| 13 | + "cdnHostname": "cdn.cloud.corp.net", |
| 14 | + "searchProviderId": "starwars", |
| 15 | + "hasLegacyAccess": false |
| 16 | +} |
| 17 | +``` |
| 18 | + |
| 19 | +#### Experience B |
| 20 | +```json |
| 21 | +{ |
| 22 | + "cdnHostname": "cdn.megacloud.corp.com", |
| 23 | + "searchProviderId":"startrek", |
| 24 | + "hasLegacyAccess": true |
| 25 | +} |
| 26 | +``` |
| 27 | + |
| 28 | +### Marketing Activity |
| 29 | +mbox: `demo-marketing-offer1` |
| 30 | + |
| 31 | +### Experience A |
| 32 | +```json |
| 33 | +{ |
| 34 | + "experience": "A", |
| 35 | + "asset": "demo-marketing-offer1-exp-A.png" |
| 36 | +} |
| 37 | +``` |
| 38 | +### Experience B |
| 39 | + |
| 40 | +```json |
| 41 | +{ |
| 42 | + "experience": "B", |
| 43 | + "asset": "demo-marketing-offer1-exp-B.png" |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +When run, the sample app displays a marketing banner and a search box. The marketing banner is different depending on the `asset` value of the `demo-marketing-offer1` mbox. And the search experience differs depending on the `searchProviderId` value of the `demo-engineering-flags` mbox. If the value is `starwars`,a [Star Wars API](https://swapi.co/) is used to search for characters. If the value is `startrek`, a [Star Trek API](http://stapi.co/) is used to search for characters. |
| 48 | + |
| 49 | +In this sample, the `getAttributes` call is used to greatly simplify accessing the JSON offer. Typically, a developer would need to find the JSON offer object in the response of the `getOffers` call. This is done in other samples. It is straightforward, but can be cumbersome -- and it requires developers to be intimately familiar with the SDK response object. |
| 50 | + |
| 51 | +Instead, this sample uses the `getAttributes` call to get the offer instead. It then looks up the value of each attribute using one of the helper methods. |
| 52 | + |
| 53 | +## Running the sample |
| 54 | +1. Install dependencies: `npm i` |
| 55 | +2. Start: `npm start` |
| 56 | +3. Point a browser to http://127.0.0.1:3000 |
| 57 | + |
| 58 | + |
| 59 | +## How it works |
| 60 | + |
| 61 | +In the code sample below, take a look at the `getAttributes` call. An array of mbox names and an options object is passed in. The result is an attributes object with a few methods that can be used to get offer details. |
| 62 | + |
| 63 | +The `getValue` method is used to get the `searchProviderId` from the `demo-engineering-flags` mbox offer. |
| 64 | + |
| 65 | +And the `asObject` method is used to get a plain old JSON representation of the `demo-marketing-offer1` mbox offer. |
| 66 | + |
| 67 | +```js |
| 68 | + const targetClient = TargetClient.create(CONFIG); |
| 69 | + const offerAttributes = await targetClient.getAttributes([ |
| 70 | + "demo-engineering-flags", |
| 71 | + "demo-marketing-offer1", |
| 72 | + ], { targetCookie }); |
| 73 | + |
| 74 | + |
| 75 | + //returns just the value of searchProviderId from the mbox offer |
| 76 | + const searchProviderId = offerAttributes.getValue("demo-engineering-flags", "searchProviderId"); |
| 77 | + |
| 78 | + //returns a simple JSON object representing the mbox offer |
| 79 | + const marketingOffer = offerAttributes.asObject("demo-marketing-offer1"); |
| 80 | + |
| 81 | + // the value of marketingOffer looks like this |
| 82 | + // { |
| 83 | + // "experience": "A", |
| 84 | + // "asset": "demo-marketing-offer1-exp-A.png" |
| 85 | + // } |
| 86 | + |
| 87 | +``` |
| 88 | + |
| 89 | +Note: This sample uses on-device decisioning method. But the `getAttributes` method can be used in any decisioning method. |
0 commit comments