Rich-text Reply

Optimizely Bookmarklet - Show Experiment/Variation Information

seanemmel_ba 05-13-15

Optimizely Bookmarklet - Show Experiment/Variation Information

[ Edited ]

I recently created a bookmarklet for use at work internally on our Optimization team. Optimizely provides a number of ways to discover which experiments are currently active on a site with Optimizely implemented as well as other information, like which variation(s) you are currently mapped to (via name, index, or ID), your Account ID, and your Project ID. However, to retrieve this information, you need to open your browser console and run some basic JavaScript. There is also other useful information stored in various 1st and 3rd party cookies, but reading this information requires a knowledge of how to locate these cookies using your browser's developer tools (or by using JavaScript in the console). For our non-developer and less savvy technical people, I wanted to give them a way to retrieve this information easily, without using JavaScript or developer tools, and in a presentable and aesthetically pleasing format. Therefore, I wrote a bookmarklet using plain ("vanilla") JavaScript that does just that. By clicking on the bookmarklet, you will be presented with a modal full of checkboxes wherein you can select the different pieces of information you'd like to see. This information is then retrieved and presented right there in the modal. You can easily close the modal and relaunch it again, or simply "start over" via different buttons. I have also added a link to Optimizely's documentation for deciphering the cookies themselves. Finally, there is an initial check to see if Optimizely is implemented on the page, and if it's not, you will be alerted that Optimizely is not loaded on the page, and the JavaScript will exit. So you can even use this bookmarklet as a simple test as to whether or not Optimizely is even active on a webpage. 

 

I've made some modifications to it over the past week or so, but at this point, I feel it's ready to be shared to the Optiverse community in the hopes that this provides help to both developers and non-developers alike. You can download the source code for the bookmarklet here: Optimizely Debugger/Cookies Bookmarklet GIST

 

From there, you'll need to copy the raw source code and paste it into the URL/URI field of a bookmark that you create (this is how you create a bookmarklet). Then, navigate to your site/page in question and click on your bookmark to engage the functionality. 

 

Any comments/suggestions are welcome! And again, please note that this bookmarklet uses plain JavaScript--no jQuery or other library dependency! Therefore, it should work in all modern browsers regardless of what JS libraries are or are not loaded on the site in question.

 

And finally, for anyone not familiar with creating bookmarklets, here are the basic steps:

 

1) Bookmark any page... literally any page will do. Give your bookmark a name and save it somewhere easily accessible!

 

2) Copy all of the raw source code from the GIST linked to above.

 

3) Find the bookmark you just created in your browser and right-click it to Edit it (this will vary by browser: you might need to go into the Bookmark Manager for some browsers in order to be able to edit the bookmark).

 

4) Locate the URL or URI field (varies by browser), which will contain the address of the site you bookmarked in Step #1.

 

5) Replace the address in the URL/URI field with the code from the GIST 

 

6) Save your bookmark. You should now have a bookmark that no longer points to a page on the internet but rather contains the JavaScript code from the GIST. You've just created a bookmarklet!

 

7) Navigate to the page where you want to use this bookmarklet, and then simply click on the bookmarklet that you just created to execute the code.

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification

Re: Optimizely Bookmarklet - Show Experiment/Variation Information

This is fantastic. Thanks so much for putting this together. The number of times I've typed "optimizely.activeExperiments" into the console...

Re: Optimizely Bookmarklet - Show Experiment/Variation Information

This is amazing work @seanemmel_ba ! We actually have an internal tool we use that has some of the same functionality and it is currently being rolled into a chrome extension that will be open sourced! We will be sure the keep you updated once released so you can contribute. Great work!!
Optimizely

Re: Optimizely Bookmarklet - Show Experiment/Variation Information

Thanks, sounds great! I'll keep an eye out.
-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
robertchan 03-14-16
 

Optiverse posted my response to the wrong thread

[ Edited ]
 
Robert Chan

Experimentation Hero