Add optional check for experiment cookie to persist previously seen v…

…ariations (Fixes #93) (#100)

* Add optional check for experiment cookie to persist previously seen variations (Fixes #93)

CHANGELOG.md

@@ -1,17 +1,21 @@
+# HEAD
+
+- **js:** Add optional check for experiment cookie to persist previously seen variations (#93).
+
 # 3.0.0
 
--   **js:** Remove use of cookies (#56).
--   **js:** Migrate ESLint to use new flat config (#42).
--   **js:** Migrate JS tests to jasmine-browser-runner (#40).
+- **js:** Remove use of cookies (#56).
+- **js:** Migrate ESLint to use new flat config (#42).
+- **js:** Migrate JS tests to jasmine-browser-runner (#40).
 
 # 2.0.1
 
--   **js:** Update ESLint config to enforce common rules (#13).
--   **js:** Transpile code to ES5 before publishing (#12).
--   **demo:** Update demo pages to use `@mozmeao/cookie-helper` v1.1.0 (#10).
--   **docs:** Update docs import `@mozmeao/cookie-helper`.
+- **js:** Update ESLint config to enforce common rules (#13).
+- **js:** Transpile code to ES5 before publishing (#12).
+- **demo:** Update demo pages to use `@mozmeao/cookie-helper` v1.1.0 (#10).
+- **docs:** Update docs import `@mozmeao/cookie-helper`.
 
 # 2.0.0
 
--   **js:** Remove `Mozilla` JS namespace from library (#4).
--   **docs:** Update docs to have info about publishing to NPM
+- **js:** Remove `Mozilla` JS namespace from library (#4).
+- **docs:** Update docs to have info about publishing to NPM

README.md

@@ -10,9 +10,9 @@ Install via npm: `npm install @mozmeao/trafficcop`
 
 Import the library at your applications entrypoint via require, import or by using a global variable in your script tag:
 
--   `import TrafficCop from '@mozmeao/trafficcop';`
--   `const TrafficCop = require('@mozmeao/trafficcop');`
--   `const TrafficCop = window.TrafficCop;`
+- `import TrafficCop from '@mozmeao/trafficcop';`
+- `const TrafficCop = require('@mozmeao/trafficcop');`
+- `const TrafficCop = window.TrafficCop;`
 
 ### What does it do?
 
@@ -38,7 +38,7 @@ Most of the content experiments on [mozilla.org](https://www.mozilla.org) simply
 In contrast to third-party options (e.g. [Optimizely](https://www.optimizely.com/)), Traffic Cop offers:
 
 1. **Security** — Many third-party options require loading JS from their site, which is a potential [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vector. Traffic Cop can (and should) be served from your site/CDN.
-2. **Privacy** - Traffic Cop does not use cookies of any kind (unlike most third-party solutions), nor does it store or send any experiment data itself (that part is up to you and your consent management solution).
+2. **Privacy** - Traffic Cop does not set cookies of any kind (unlike most third-party solutions), nor does it store or send any experiment data itself (that part is up to you and your consent management solution).
 3. **Performance** — Traffic Cop is light and has zero dependencies, resulting in less than 2KB of JS when minified. (In our experience, Optimizely's JS bundle was regularly above 200KB.)
 4. **Your workflow** — Traffic Cop offers great flexibility in when and how you write and load variation code. No need to type jQuery in a text box on a third-party web page.
 5. **Savings** — No need to pay for a third-party service.
@@ -93,9 +93,9 @@ Check out [the docs](./documentation.md) for more complete information.
 
 ## Further Documentation
 
--   [Building the NPM package](docs/#building-the-npm-package)
--   [Running tests](docs/#running-tests)
--   [Publishing to NPM](docs/#publishing-to-npm)
+- [Building the NPM package](docs/#building-the-npm-package)
+- [Running tests](docs/#running-tests)
+- [Publishing to NPM](docs/#publishing-to-npm)
 
 ## License
 

demo/package.json

@@ -4,17 +4,21 @@
     "description": "Express app demonstrating usage of Traffic Cop.",
     "main": "index.js",
     "scripts": {
+        "prestart": "webpack --mode development --config webpack.config.js",
         "start": "nodemon src/index.js"
     },
     "author": "Mozilla",
     "license": "MPL-2.0",
     "dependencies": {
+        "@mozmeao/cookie-helper": "^1.1.0",
         "express": "^4.21.2",
         "nunjucks": "^3.2.4",
         "path": "^0.12.7",
         "serve-favicon": "^2.3.2"
     },
     "devDependencies": {
-        "nodemon": "^3.1.9"
+        "nodemon": "^3.1.9",
+        "webpack": "^5.97.1",
+        "webpack-cli": "^6.0.1"
     }
 }

demo/src/index.js

@@ -16,6 +16,7 @@ app.use(
     '/uncompressed-src',
     express.static(path.join(__dirname, '/../../src/'))
 );
+app.use('/libs', express.static(path.join(__dirname, '/../libs/')));
 
 nunjucks.configure('src/views', {
     autoescape: true,

demo/src/libs.js

@@ -0,0 +1,8 @@
+const CookieHelper = require('@mozmeao/cookie-helper');
+
+// create namespace
+if (typeof window.Mozilla === 'undefined') {
+    window.Mozilla = {};
+}
+
+window.Mozilla.Cookies = CookieHelper;

demo/src/public/experiment-page1.js

@@ -1,7 +1,25 @@
 (function () {
     'use strict';
 
-    var eddie = new window.TrafficCop({
+    function setVariationCookie(exp) {
+        // set cookie to expire in 24 hours
+        var date = new Date();
+        date.setTime(date.getTime() + 1 * 24 * 60 * 60 * 1000);
+        var expires = date.toUTCString();
+
+        window.Mozilla.Cookies.setItem(
+            exp.id,
+            exp.chosenVariation,
+            expires,
+            undefined,
+            undefined,
+            false,
+            'lax'
+        );
+    }
+
+    var cop = new window.TrafficCop({
+        id: 'my-experiment-id-1',
         variations: {
             'v=1': 40.5,
             'v=2': 20.3,
@@ -11,6 +29,7 @@
             'v=6': 0.1
         }
     });
+    cop.init();
 
-    eddie.init();
+    setVariationCookie(cop);
 })();

demo/src/public/experiment-page2.js

@@ -7,6 +7,23 @@
         c: 30
     };
 
+    function setVariationCookie(exp) {
+        // set cookie to expire in 24 hours
+        var date = new Date();
+        date.setTime(date.getTime() + 1 * 24 * 60 * 60 * 1000);
+        var expires = date.toUTCString();
+
+        window.Mozilla.Cookies.setItem(
+            exp.id,
+            exp.chosenVariation,
+            expires,
+            undefined,
+            undefined,
+            false,
+            'lax'
+        );
+    }
+
     function handleVariation(variation) {
         // wait until DOM is ready to be manipulated...
         domReady(function () {
@@ -28,9 +45,12 @@
     }
 
     var wiggum = new window.TrafficCop({
+        id: 'my-experiment-id-2',
         customCallback: handleVariation,
         variations: variants
     });
 
     wiggum.init();
+
+    setVariationCookie(wiggum);
 })();

demo/src/public/experiment-page3-customcallback.js

@@ -6,6 +6,23 @@
         b: 40
     };
 
+    function setVariationCookie(exp) {
+        // set cookie to expire in 24 hours
+        var date = new Date();
+        date.setTime(date.getTime() + 1 * 24 * 60 * 60 * 1000);
+        var expires = date.toUTCString();
+
+        window.Mozilla.Cookies.setItem(
+            exp.id,
+            exp.chosenVariation,
+            expires,
+            undefined,
+            undefined,
+            false,
+            'lax'
+        );
+    }
+
     function handleVariation(variation) {
         if (Object.prototype.hasOwnProperty.call(variants, variation)) {
             var target = document.getElementById('var-' + variation);
@@ -14,9 +31,12 @@
     }
 
     var wiggum = new window.TrafficCop({
+        id: 'my-experiment-id-3',
         customCallback: handleVariation,
         variations: variants
     });
 
     wiggum.init();
+
+    setVariationCookie(wiggum);
 })();

demo/src/public/experiment-page3-redirect.js

@@ -1,12 +1,32 @@
 (function () {
     'use strict';
 
+    function setVariationCookie(exp) {
+        // set cookie to expire in 24 hours
+        var date = new Date();
+        date.setTime(date.getTime() + 1 * 24 * 60 * 60 * 1000);
+        var expires = date.toUTCString();
+
+        window.Mozilla.Cookies.setItem(
+            exp.id,
+            exp.chosenVariation,
+            expires,
+            undefined,
+            undefined,
+            false,
+            'lax'
+        );
+    }
+
     var lou = new window.TrafficCop({
+        id: 'my-experiment-id-4',
         variations: {
             'v=a': 40,
             'v=b': 40
         }
     });
 
     lou.init();
+
+    setVariationCookie(lou);
 })();

demo/src/views/pages/page1.njk

@@ -1,6 +1,7 @@
 {% extends "../index.njk" %}
 
 {% block experiment_js %}
+    <script src="/libs/index.js"></script>
     <script src="/trafficcop/index.js"></script>
     <script src="/experiment-page1.js"></script>
 {% endblock %}
@@ -61,5 +62,9 @@
                 this line. If yes, do. I love you all.
             </p>
         </article>
+
+        <aside>
+            <p>Note: to clear the variation, you might need to clear cookies for this page and refresh.</p>
+        </aside>
     </div>
 {% endblock %}

demo/src/views/pages/page2.njk

@@ -1,6 +1,7 @@
 {% extends "../index.njk" %}
 
 {% block experiment_js %}
+    <script src="/libs/index.js"></script>
     <script src="/trafficcop/index.js"></script>
     <script src="/experiment-page2.js"></script>
 {% endblock %}
@@ -39,5 +40,9 @@
                 No.
             </p>
         </article>
+
+        <aside>
+            <p>Note: to clear the variation, you might need to clear cookies for this page and refresh.</p>
+        </aside>
     </div>
 {% endblock %}

demo/src/views/pages/page3.njk

@@ -1,6 +1,7 @@
 {% extends "../index.njk" %}
 
 {% block experiment_js %}
+    <script src="/libs/index.js"></script>
     <script src="/trafficcop/index.js"></script>
     <script src="/experiment-page3-redirect.js"></script>
 {% endblock %}
@@ -45,6 +46,10 @@
                 <span class="hidden" id="var-b">Herman Blume (customCallback b)</span>
             </p>
         </article>
+
+        <aside>
+            <p>Note: to clear the variation, you might need to clear cookies for this page and refresh.</p>
+        </aside>
     </div>
 {% endblock %}
 

demo/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: './src/libs.js',
+    output: {
+        filename: 'index.js',
+        path: path.resolve(__dirname, 'libs'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env']
+                    }
+                }
+            }
+        ]
+    },
+    performance: {
+        hints: 'warning'
+    },
+    optimization: {
+        minimize: false
+    },
+    plugins: [
+        // clean out ./demo/libs/ before building
+        new CleanWebpackPlugin(),
+    ]
+};

docs/README.md

@@ -3,9 +3,9 @@
 
 ### Contents
 
--   [Building the NPM package](#building-the-npm-package)
--   [Running tests](#running-tests)
--   [Publishing to NPM](#publishing-to-npm)
+- [Building the NPM package](#building-the-npm-package)
+- [Running tests](#running-tests)
+- [Publishing to NPM](#publishing-to-npm)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->