Visual A/B comparison of Optimizely tests
Add a bookmark, call it "Optimizely variation selector", and paste the code below in the URL field
javascript:(function()%7B(function () %7Bvar isResizing %3D false%3Bvar lastDownX %3D 0%3Bfunction initialise() %7BaddDialog()%3Bvar optimizely %3D window%5B"optimizely"%5D %26%26 typeof window%5B"optimizely"%5D.get %3D%3D%3D "function"%3Bvar experiments %3D optimizely %3F window%5B"optimizely"%5D.get("data").experiments %3A null%3Bvar experimentSelector %3D document.getElementById("experimentId")%3Bvar variationSelector %3D document.getElementById("variationId")%3Bvar includeDrafts %3D document.getElementById("include-drafts")%3Bvar viewVariationButton %3D document.getElementById("view-variation")%3Bvar compareVariationButton %3D document.getElementById("compare-variation")%3Bvar closeButton %3D document.getElementById("modal-experiment-dialog__close-button")%3BaddEventListeners()%3BcheckForOptimizely()%3Bfunction addDialog() %7Bvar modalDialog %3D document.createElement("div")%3BmodalDialog.id %3D "modal-experiment-dialog"%3BmodalDialog.className %3D "modal-experiment-dialog"%3Bdocument.body.appendChild(modalDialog)%3Bdocument.getElementById("modal-experiment-dialog").innerHTML %3D %60<div id%3D"modal-experiment-dialog-content"><div id%3D"modal-experiment-dialog__close-button">%26times%3B<%2Fdiv><h1>Optimizely experiment selector<%2Fh1><div id%3D"modal-experiment-dialog-form-wrapper"><form><label for%3D"experimentId">Experiment<%2Flabel><select id%3D"experimentId"><%2Fselect><div id%3D"variation-selection"><label for%3D"variationId">Variation<%2Flabel><select id%3D"variationId"><%2Fselect><%2Fdiv><div id%3D"include-drafts-container"><input id%3D"include-drafts" type%3D"checkbox"><label for%3D"include-drafts">Include drafts <span>(refreshes page)<%2Fspan><%2Flabel><%2Fdiv><button id%3D"view-variation" type%3D"button">View variation<%2Fbutton><button id%3D"compare-variation" type%3D"button">A%2FB comparison<%2Fbutton><%2Fform><%2Fdiv><%2Fdiv>%60%3BaddStyleString(styles)%3BsetTimeout(function () %7Bdocument.getElementById("modal-experiment-dialog-content").style.maxHeight %3D "1000px"%3B%7D%2C 0)%3B%7Dfunction checkForOptimizely() %7Bif (!optimizely) %7Bdocument.getElementById("modal-experiment-dialog-form-wrapper").innerHTML %3D "<p>Optimizely X not found<%2Fp>"%3B%7D else %7BcheckDraftExperimentsCookie()%3BpopulateExperimentList()%3BsetIncludeDraftsToggle()%3B%7D%7Dfunction checkDraftExperimentsCookie() %7Bif (window%5B"optimizely"%5D.get("data").groups %26%26 getCookie("show-optly-draft-experiments")) %7BtoggleDraftExperiments(true)%3B%7D%7Dfunction populateExperimentList() %7Bif (experiments) %7Bfor (var experiment in experiments) %7Bvar option %3D document.createElement("option")%3Boption.value %3D experiment%3Boption.text %3D experiments%5Bexperiment%5D.name.length > 100 %3F experiments%5Bexperiment%5D.name.substring(0%2C 50) %2B "..." %3A experiments%5Bexperiment%5D.name%3BexperimentSelector.add(option)%3B%7DsetCurrentExperiment()%3BpopulateVariationList(experimentSelector.options%5BexperimentSelector.selectedIndex%5D.value)%3B%7D else %7Bdocument.getElementById("modal-experiment-dialog-form-wrapper").innerHTML %3D "<p>No experiments found<%2Fp>"%3B%7D%7Dfunction setCurrentExperiment() %7Bvar variationId %3D getQueryStringValue("optimizely_x")%3Bif (variationId) %7Bvar experimentId%3Bfor (var experiment in experiments) %7Bvar variations %3D experiments%5Bexperiment%5D.variations%3Bfor (var i %3D 0%3B i < variations.length%3B i%2B%2B) %7Bif (variations%5Bi%5D.id %3D%3D%3D variationId) %7BexperimentId %3D experiment%3Bbreak%3B%7D%7D%7DsetSelectedIndex(experimentSelector%2C experimentId)%3B%7D%7Dfunction populateVariationList(variationId) %7BvariationSelector.options.length %3D 0%3Bvar variations %3D experiments%5BvariationId%5D.variations%3Bfor (var variation of variations) %7Bvar option %3D document.createElement("option")%3Boption.value %3D variation.id%3Boption.text %3D variation.name.length > 100 %3F variation.name.substring(0%2C 50) %2B "..." %3A variation.name%3BvariationSelector.add(option)%3B%7Ddocument.getElementById("variation-selection").style.display %3D "block"%3BsetSelectedIndex(variationSelector%2C getQueryStringValue("optimizely_x"))%3B%7Dfunction addEventListeners() %7BexperimentSelector.addEventListener("change"%2C function () %7BpopulateVariationList(experimentSelector.options%5BexperimentSelector.selectedIndex%5D.value)%3B%7D)%3BincludeDrafts.addEventListener("click"%2C function () %7BtoggleDraftExperiments(includeDrafts.checked)%3B%7D)%3BviewVariationButton.addEventListener("click"%2C function () %7BshowVariation(variationSelector.options%5BvariationSelector.selectedIndex%5D.value)%3B%7D)%3BcompareVariationButton.addEventListener("click"%2C function () %7BcompareVariation(variationSelector.options%5BvariationSelector.selectedIndex%5D.value)%3B%7D)%3BcloseButton.addEventListener("click"%2C function () %7Bdocument.getElementById("modal-experiment-dialog").style.display %3D "none"%3Bdocument.getElementById("modal-experiment-dialog-content").style.maxHeight %3D 0%3B%7D)%3Bwindow.onclick %3D function (event) %7Bif (event.target %3D%3D document.getElementById("modal-experiment-dialog")) %7Bdocument.getElementById("modal-experiment-dialog").style.display %3D "none"%3Bdocument.getElementById("modal-experiment-dialog-content").style.maxHeight %3D 0%3B%7D%7D%3Bdocument.onmousemove %3D function (e) %7Bif (!isResizing) %7Breturn%3B%7Dif (e.clientX >%3D 0 %26%26 e.clientX <%3D (document.documentElement.clientWidth - 20)) %7Bvar percentageWidth %3D ((e.clientX %2F window.innerWidth) * 100)%3Bvar iframeContainer %3D document.getElementById("experiment-iframe-container")%3BiframeContainer.style.left %3D percentageWidth %2B "%25"%3Bdocument.getElementById("experiment-iframe").style.transform %3D "translateX(" %2B -(iframeContainer.offsetLeft) %2B "px)"%3B%7D%7D%7Dfunction getQueryStringValue(key) %7Breturn decodeURIComponent(window.location.search.replace(new RegExp("%5E(%3F%3A.*%5B%26%5C%5C%3F%5D" %2B encodeURIComponent(key).replace(%2F%5B%5C.%5C%2B%5C*%5D%2Fg%2C "%5C%5C%24%26") %2B "(%3F%3A%5C%5C%3D(%5B%5E%26%5D*))%3F)%3F.*%24"%2C "i")%2C "%241"))%3B%7Dfunction setIncludeDraftsToggle() %7BincludeDrafts.checked %3D getQueryStringValue("optimizely_token") %7C%7C !window%5B"optimizely"%5D.get("data").groups%3B%7D%7Dfunction showVariation(variationId) %7Bwindow.location.replace(getRedirectUrl(variationId))%3B%7Dfunction compareVariation(variationId) %7Bvar redirectUrl %3D getRedirectUrl(variationId)%3Bvar iframeContainer %3D document.createElement("div")%3BiframeContainer.id %3D "experiment-iframe-container"%3Bvar iframeHandle %3D document.createElement("div")%3BiframeHandle.id %3D "experiment-iframe-handle"%3Bvar iframeHandleGrabber %3D document.createElement("span")%3BiframeHandleGrabber.innerHTML %3D "%26harr%3B"%3BiframeHandle.appendChild(iframeHandleGrabber)%3BiframeContainer.appendChild(iframeHandle)%3Bvar iframe %3D document.createElement("iframe")%3Biframe.id %3D "experiment-iframe"%3Biframe.className %3D "experiment-iframe"%3Biframe.src %3D redirectUrl%3BiframeContainer.appendChild(iframe)%3BiframeLoader %3D document.createElement("div")%3BiframeLoader.id %3D "experiment-iframe-loader"%3BiframeLoader.innerHTML %3D "Please wait%2C loading variation..."%3BiframeContainer.appendChild(iframeLoader)%3Bdocument.body.appendChild(iframeContainer)%3Bdocument.getElementById("modal-experiment-dialog").style.display %3D "none"%3Biframe.style.transform %3D "translateX(" %2B -(iframeContainer.offsetLeft) %2B "px)"%3BiframeHandle.onmousedown %3D function (e) %7BisResizing %3D true%3BlastDownX %3D e.clientX%3Bdocument.getElementById("experiment-iframe").style.pointerEvents %3D "none"%3B%7D%3BiframeHandle.onmouseup %3D function (e) %7BisResizing %3D false%3Bdocument.getElementById("experiment-iframe").style.pointerEvents %3D "auto"%3B%7D%3Biframe.onload %3D function () %7Btry %7Bvar iframeBody %3D document.getElementById("experiment-iframe").contentWindow.document%3Bdocument.getElementById("experiment-iframe").style.display %3D "block"%3B%7Dcatch (err) %7Bdocument.getElementById("experiment-iframe-loader").innerHTML %3D "Unable to load variation.<br>Check X-Frame-Options"%3B%7D%7D%3Bwindow.document.body.onscroll %3D function (e) %7Bdocument.getElementById("experiment-iframe").contentWindow.scrollTo(0%2C window.scrollY)%3B%7D%3Bwindow.document.body.onresize %3D function (e) %7Bdocument.getElementById("experiment-iframe").style.transform %3D "translateX(" %2B -(iframeContainer.offsetLeft) %2B "px)"%3B%7D%3B%7Dfunction getRedirectUrl(variationId) %7Bvar redirectUrl %3D window.location.href%3BredirectUrl %3D redirectUrl.replace("%23%3F"%2C "%3F%23")%3Bif (redirectUrl.indexOf("%3F") %3D%3D%3D -1) %7BredirectUrl %3D redirectUrl %2B "%3F" %2B "optimizely_x%3D" %2B variationId%3B%7D else if (redirectUrl.indexOf("optimizely_x%3D") %3D%3D%3D -1) %7BredirectUrl %3D redirectUrl.replace(%2F(%5B%5E%3F%5D%2B%5C%3F)%2Fgi%2C "%241optimizely_x%3D" %2B variationId %2B "%26")%3B%7D else %7BredirectUrl %3D redirectUrl.replace(%2Foptimizely_x%3D%5Cd%2B%2Fgi%2C "optimizely_x%3D" %2B variationId)%3B%7Dreturn redirectUrl%3B%7Dfunction toggleDraftExperiments(includeDrafts) %7Bvar redirectUrl %3D window.location.href%3Bdocument.getElementById("modal-experiment-dialog-form-wrapper").innerHTML %3D "<p>Please wait%2C reloading...<%2Fp>"%3Bif (includeDrafts) %7BsetCookie("show-optly-draft-experiments"%2C true%2C 10)%3Bif (redirectUrl.indexOf("%3F") %3D%3D%3D -1) %7BredirectUrl %3D redirectUrl %2B "%3F" %2B "optimizely_token%3Dpublic"%3B%7D else if (redirectUrl.indexOf("optimizely_token%3D") %3D%3D%3D -1) %7BredirectUrl %3D redirectUrl.replace(%2F(%5B%5E%3F%5D%2B%5C%3F)%2Fi%2C "%241optimizely_token%3Dpublic%26")%3B%7D%7D else %7BdeleteCookie("show-optly-draft-experiments")%3BredirectUrl %3D redirectUrl.replace(%2Foptimizely_token%3Dpublic%26%3F%2Fi%2C "").replace(%2F%5C%3F%24%2F%2C "")%3B%7Dwindow.location.replace(redirectUrl)%3B%7Dfunction setSelectedIndex(s%2C valsearch) %7Bfor (i %3D 0%3B i < s.options.length%3B i%2B%2B) %7Bif (s.options%5Bi%5D.value %3D%3D valsearch) %7Bs.options%5Bi%5D.selected %3D true%3Bbreak%3B%7D%7Dreturn%3B%7Dfunction addStyleString(str) %7Bvar node %3D document.createElement("style")%3Bnode.innerHTML %3D str%3Bdocument.body.appendChild(node)%3B%7Dfunction getCookie(name) %7Bvar v %3D document.cookie.match("(%5E%7C%3B) %3F" %2B name %2B "%3D(%5B%5E%3B%5D*)(%3B%7C%24)")%3Breturn v %3F v%5B2%5D %3A null%3B%7Dfunction setCookie(name%2C value%2C days) %7Bvar d %3D new Date%3Bd.setTime(d.getTime() %2B 24 * 60 * 60 * 1000 * days)%3Bdocument.cookie %3D name %2B "%3D" %2B value %2B "%3Bpath%3D%2F%3Bexpires%3D" %2B d.toGMTString()%3B%7Dfunction deleteCookie(name) %7B setCookie(name%2C ""%2C -1)%3B %7Dvar styles %3D %60body %7Bmax-width%3A 100%25 !important%3Boverflow-x%3A hidden !important%3B%7D%23modal-experiment-dialog %7Bposition%3A fixed%3Bz-index%3A 10000000000%3Bmargin%3A 0%3Bleft%3A 0%3Btop%3A 0%3Bwidth%3A 100%25%3Bheight%3A 100%25%3Boverflow%3A auto%3Bbackground-color%3A rgba(0%2C0%2C0%2C0.6)%3Bfont-family%3A "Open Sans"%2C"Helvetica Neue"%2CHelvetica%2CArial%2Csans-serif !important%3Bfont-weight%3A 300 !important%3B%7D%23modal-experiment-dialog h1 %7Bfont-size%3A 18px !important%3Bcolor%3A %23000 !important%3Bmargin%3A 0 !important%3Bpadding%3A 10px 0 20px 0 !important%3Bfont-weight%3A 300 !important%3Bfont-family%3A "Open Sans"%2C"Helvetica Neue"%2CHelvetica%2CArial%2Csans-serif !important%3B%7D%23modal-experiment-dialog %23modal-experiment-dialog-content %7Bbackground-color%3A %23FFF%3Bmargin%3A auto%3Bpadding%3A 15px 20px%3Bborder-radius%3A 0 0 5px 5px%3Bwidth%3A 80%25%3Bfont-size%3A 15px%3Bline-height%3A 1.42857%3Bcolor%3A %234e585c%3Bmax-width%3A 800px%3Bborder-bottom%3A 8px solid %23674186%3Boverflow%3A hidden%3Bmax-height%3A 0%3Btransition%3A max-height 1s ease-in-out%3B%7D%23modal-experiment-dialog select %7Bwidth%3A 100%25 !important%3Bfont-size%3A 13px !important%3Bpadding%3A 9px !important%3Bmargin-bottom%3A 20px !important%3Bbackground-color%3A %23FFF !important%3Bborder%3A 1px solid %23ccc%3B%7D%23modal-experiment-dialog label %7Bdisplay%3A inline-block%3Bfont-size%3A 15px%3Bfont-weight%3A 300 !important%3Bline-height%3A 1.42857%3Bcolor%3A %234e585c%3Bmargin-bottom%3A 5px%3B%7D%23modal-experiment-dialog button %7Bmargin%3A 10px 0 !important%3Bbackground-color%3A %23674186%3Bcolor%3A %23FFF%3Bborder%3A none%3Bpadding%3A 8px 28px !important%3Bborder-radius%3A 5px !important%3Bmargin%3A 20px auto 20px !important%3Bfont-size%3A 15px !important%3Bdisplay%3A block%3B%7D%23modal-experiment-dialog %23view-variation %7Bwidth%3A 60%25%3B%7D%23modal-experiment-dialog %23compare-variation %7Bdisplay%3A none%3Bbackground-color%3A %23FFF%3Bcolor%3A %23000%3Bborder%3A 1px solid %23000%3B%7D%23modal-experiment-dialog %23modal-experiment-dialog__close-button %7Bcolor%3A %23000%3Bfont-size%3A 28px%3Bfont-weight%3A bold%3Bwidth%3A 100%25%3Btext-align%3A right%3Bmargin-bottom%3A 10px%3Bline-height%3A 20px%3B%7D%23modal-experiment-dialog %23modal-experiment-dialog__close-button%3Ahover%2C%23modal-experiment-dialog %23modal-experiment-dialog__close-button%3Afocus %7Bcolor%3A %23000%3Btext-decoration%3A none%3Bcursor%3A pointer%3B%7D%23modal-experiment-dialog %23variation-selection %7Bdisplay%3A none%3B%7D%23modal-experiment-dialog %23include-drafts-container %7Bpadding%3A 8px 0 10px 0%3B%7D%23modal-experiment-dialog %23include-drafts-container span %7Bfont-size%3A 10px%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked)%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %7Bposition%3A absolute !important%3Bleft%3A -9999px !important%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked) %2B label%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label %7Bposition%3A relative !important%3Bpadding-left%3A 3.9em !important%3Bpadding-top%3A .25em !important%3Bcursor%3A pointer !important%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked) %2B label%3Abefore%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Abefore%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked) %2B label%3Aafter%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Aafter %7Bcontent%3A ""%3Bposition%3A absolute !important%3Bheight%3A 1.5em !important%3Btransition%3A all .5s ease !important%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked) %2B label%3Abefore%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Abefore %7Bleft%3A 0 !important%3Btop%3A 0 !important%3Bwidth%3A 3em !important%3Bborder%3A 2px solid %23dddddd !important%3Bbackground%3A %23dddddd !important%3Bborder-radius%3A 1.1em !important%3Bbox-sizing%3A initial !important%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Anot(%3Achecked) %2B label%3Aafter%2C %23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Aafter %7Bleft%3A 0.13em !important%3Btop%3A 0.16em !important%3Bbackground-color%3A %23fff !important%3Bborder-radius%3A 50%25 !important%3Bwidth%3A 1.5em !important%3B%7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Aafter %7B left%3A 1.6em !important%3B %7D%23modal-experiment-dialog %5Btype%3D%5C"checkbox%5C"%5D%3Achecked %2B label%3Abefore %7Bbackground-color%3A %2372da67 !important%3Bborder-color%3A %2372da67 !important%3B%7D%23experiment-iframe-container %7Bposition%3A fixed%3Btop%3A 0%3Bleft%3A 50%25%3Bwidth%3A 100%25%3Bheight%3A 100%25%3Boverflow-x%3A hidden%3Bz-index%3A 100000000000%3Bdisplay%3A none%3B%7D%23experiment-iframe %7Bwidth%3A 100vw%3Bheight%3A 100vh%3Bz-index%3A 100000%3Bposition%3A absolute%3Bborder%3A none%3Bdisplay%3A none%3B%7D%23experiment-iframe-handle %7Bwidth%3A 20px%3Bheight%3A 100%25%3Bposition%3A absolute%3Btop%3A 0%3Bleft%3A 0%3Bz-index%3A 10000000000%3Bbackground-color%3A green%3Bcursor%3A w-resize%3Bopacity%3A 0.8%3Bdisplay%3A flex%3Balign-items%3A center%3Bjustify-content%3A center%3Buser-select%3A none%3B%7D%23experiment-iframe-handle span %7Bcolor%3A %23FFF%3Buser-select%3A none%3Bfont-size%3A 14px%3B%7D%23experiment-iframe-loader %7Bdisplay%3A flex%3Bjustify-content%3A center%3Balign-items%3A center%3Bwidth%3A 50%25%3Bheight%3A 100%25%3Bbackground-color%3A %23AAA%3Bcolor%3A %23FFF%3B%7D%40media screen and (min-width%3A 480px) %7B%23modal-experiment-dialog h1 %7Bfont-size%3A 22px !important%3B%7D%23modal-experiment-dialog select %7Bheight%3A 36px%3B%7D%23modal-experiment-dialog %23compare-variation %7Bdisplay%3A block%3B%7D%23experiment-iframe-container %7Bdisplay%3A block%3B%7D%7D%60%3Binitialise()%3B%7D)()%7D)()