Do A/B test on My Shots button

[ianb]

In this test we want to present the My Shots button in different ways, and test if people are more likely to click the button because of how it is presented.

First step is to collect a couple different presentation styles for My Shots.

[ianb]

I'll start the work by adding a class to the container (the element that contains My Shots) based on the A/B test and implement some placeholder style, then John can go in and do some styling.

[ianb]

@johngruen if you check out the ab-myshots-button branch you'll get the test.

You can edit server/src/ab-tests.js to change the available options for the test.

To force a test, start the server with something like:

$ FORCE_AB_TESTS='styleMyShotsButton=bright' ./bin/run-server

The name of the test gets added to the iframe document body, like .styleMyShotsButton-{testValue} so you can style things like:

.styleMyShotsButton-bright .pageshot-myshots {
  font-size: 200%;
}

(I've put that style into the commit as a placeholder)

Note you can put in entire new elements too, look in addon/data/selector-ui.js – there's a block of text in WholePageOverlay that includes the My Shots button. You can use class selectors to hide those elements for control (like .styleMyShotsButton-control .some-optional-element {display: none}). Ideally try to use the string styleMyShotsButton in any new things so it's easier to find and remove later.