Skip to content

Commit

Permalink
Remove use of cookies (Fixes mozmeao#56)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexgibson committed Jan 12, 2024
1 parent b35e701 commit 5115ee4
Show file tree
Hide file tree
Showing 22 changed files with 218 additions and 3,607 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# HEAD

- **js:** Remove use of cookies (#56).
- **js:** Migrate ESLint to use new flat config (#42).
- **js:** Migrate JS tests to jasmine-browser-runner (#40).

Expand Down
32 changes: 14 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,22 @@ Import the library at your applications entrypoint via require, import or by usi
- `const TrafficCop= require('@mozmeao/trafficcop')`
- `const TrafficCop = window.TrafficCop;`

Note that Traffic Cop requires an additional Cookie Helper library to also be installed in order to work. Check out the
[implementation docs](https://github.com/mozmeao/trafficcop/blob/main/documentation.md#implementation) for more information.

### What does it do?

Traffic Cop is a small bit of JavaScript that decides if a visitor should participate in a variation of the current page. If so, a cookie is set and one of two things happens:
Traffic Cop is a small bit of JavaScript that decides if a visitor should see a variation of the current page. If so, one of two things happens:

1. a developer-specified JavaScript function is passed the chosen variation and executed
2. the user is redirected to the current URL with a developer-specified querystring parameter appended
1. A developer-specified JavaScript function is passed the chosen variation and executed.
2. The user is redirected to the current URL with a developer-specified query string parameter appended.

### Example flow

1. Visitor lands on `www.toohot.today/product`
1. Visitor lands on `www.example.com/product`
2. Visitor is chosen for variation 2
3. Visitor is issued a cookie and then either:
a. redirected to `www.toohot.today/product?v=2` _or_
3. Visitor is then either:
a. redirected to `www.example.com/product?v=2` _or_
b. a developer-specified JavaScript function is passed the value of `2` and executed

What happens on `www.toohot.today/product?v=2`, or in the JavaScript function, is completely up to the developer (possibly you, dear reader).
What happens on `www.example.com/product?v=2`, or in the JavaScript function, is completely up to the developer (possibly you, dear reader).

### Why did we build it?

Expand All @@ -41,22 +38,22 @@ 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. **Performance** — Traffic Cop is light and has only one dependency, resulting in less than 2KB of JS when minified. (In our experience, Optimizely's JS bundle was regularly above 200KB.)
3. **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.
4. **Savings** — No need to pay for a third-party service.
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).
3. **Performance** — Traffic Cop is light and has only one dependency, 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.

### How does it work?

A visitor hits a URL running an experiment (meaning the appropriate JS is loaded). Traffic Cop picks a random number, and, if that random number falls within the range specified by a variation (see below), either redirects the visitor to that variation or executes an arbitrary, developer-specified callback function.

For redirects, Traffic Cop assumes all variations are loaded through a querystring parameter appended to the original URL. This keeps things simple, as no new URL patterns need to be defined (and later removed) for each experiment. Simply check for the querystring parameter (wherever your application might do that sort of thing) and load different content accordingly.
For redirects, Traffic Cop assumes all variations are loaded through a query string parameter appended to the original URL. This keeps things simple, as no new URL patterns need to be defined (and later removed) for each experiment. Simply check for the query string parameter (wherever your application might do that sort of thing) and load different content accordingly.

Implementing Traffic Cop requires at least two other JavaScript files: one to configure the experiment, and [MDN’s handy cookie library](https://developer.mozilla.org/docs/Web/API/Document/cookie/Simple_document.cookie_framework). The configuration file is fairly straightforward. Simply instantiate a new Traffic Cop with your experiment configuration, and then initialize it.
The configuration file is fairly straightforward. Simply instantiate a new Traffic Cop with your experiment configuration, and then initialize it.

```javascript
// example configuration for a redirect experiment
var wiggum = new TrafficCop({
id: ‘experiment-promo-fall-2017’,
variations: {
‘v=1: 10.5,
‘v=2: 0.25
Expand All @@ -66,7 +63,7 @@ var wiggum = new TrafficCop({
wiggum.init();
```

In the above example, a visitor would have a 10.5% chance of being chosen for `v=1`, and a 0.25% chance for `v=2`. If the visitor is selected for a variation, a cookie with the key `experiment-promo-fall-2017` will be set to store the chosen variation, and the user redirected to the current URL with either `?v=1` or `?v=2` appended.
In the above example, a visitor would have a 10.5% chance of being chosen for `v=1`, and a 0.25% chance for `v=2`. If the visitor is selected for a variation, the user will be redirected to the current URL with either `?v=1` or `?v=2` appended.

**Note that Traffic Cop supports percentages into the hundredths, but no smaller.**

Expand All @@ -78,7 +75,6 @@ function myCallback(variation) {
}

var lou = new TrafficCop({
id: ‘experiment-button-color’,
customCallback: myCallback,
variations: {
‘a’: 25,
Expand Down
Loading

0 comments on commit 5115ee4

Please sign in to comment.