Rich-text Reply

Bookmarklets

JDahlinANF 10-27-15

Bookmarklets

[ Edited ]

Share your bookmarklets! Here are mine 

 

NOTE: replace @: with :

 

Experiments and Variations running on current page

For example, on this page, right now, it alerts:

[Community] New Here (All traffic to Variation) - Variation #1

 

 

javascript: (function(){var pgExp = "";try{$(optimizely.activeExperiments).each(function(i,d){var experiment = optimizely.allExperiments[d].name;var variation = optimizely.variationNamesMap[d];pgExp += experiment + ' - ' + variation + '\n' ;});}catch(e){;}alert(pgExp)})() 

 

Optimizely's jQuery methods (code mostly stolen from @Ehsan's article):

 

 

javascript:l = Object.getPrototypeOf(optimizely.$("body"));var optimizely_functions = [];for(var g in l){optimizely_functions.push(g);}alert(optimizely_functions.sort().toString().replace(/,/g,'\n')); 

 

 

YOUR jQuery methods not included in Optimizely's version (code mostly stolen from @Ehsan's article):

javascript&colon;1 = Object.getPrototypeOf(optimizely.$("body")); var optimizely_functions = []; for(var g in l){   optimizely_functions.push(g); }   l = Object.getPrototypeOf($("body")); var jquery_functions = []; for(var g in l){   jquery_functions.push(g); } Array.prototype.diff = function(a) {     return this.filter(function(i) {return a.indexOf(i) < 0;}); }; alert(jquery_functions.diff(optimizely_functions).sort().toString().replace(/,/g,'\n'));

 

 

  

 

Joel_Balmer 10-28-15
 

Re: Bookmarklets

What a great idea, to have a library of open source bookmarklets!

Re: Bookmarklets

[ Edited ]

Great idea, @nap0leon! Here are a few of my favorites!

 

 

Add jQuery to a page that doesn't have it:

 

Quickly add the full version of jQuery 1.6.4 (the version Optimizely users) to a page that doesn't have it! Great for debugging and creating proof of concepts.

  

javascript:(function() {    var fileRef = document.createElement('script');    fileRef.setAttribute("type", "text/javascript");    fileRef.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js");    document.head.appendChild(fileRef);})();

   

CSS Magic:

 

I created this bookmarklet to protype CSS changes to websites in Google Chrome's Developer Tools then quickly turn them into jQuery that can be put into Optimizely. Watch the video for more info (hint: add styles to the "element.style" rule of the Styles panel in Chrome Dev Tools).

 

 

javascript:(function(){if (typeof $ == 'undefined') {      var js = document.createElement('script');    js.setAttribute("type", "text/javascript");    js.setAttribute("src", "//code.jquery.com/jquery-1.7.1.js");    document.head.appendChild(js);}function cssMagic() {var selector = prompt("Using the Elements panel in the Chrome Console, right click the styled element, copy the CSS Path, and paste it here.");if(!selector){alert("No CSS selector entered. Please try again.");} else if (typeof($(selector).attr("style")) !== "undefined"){var styleAttrText = $(selector).attr("style");var styleAttrs = styleAttrText.split(";");var stylesArray = [];for (var i = 0; i < styleAttrs.length; i++) {var propertyValuePair = styleAttrs[i].split(":");if(typeof(propertyValuePair[2]) !== "undefined" && propertyValuePair[2].indexOf("//") === 0) {propertyValuePair[1] += ":" + propertyValuePair.pop();stylesArray.push(propertyValuePair);} else {stylesArray.push(propertyValuePair);};};stylesArray.pop();var cssMagic = '$("'+ selector +'").css({"'+ stylesArray[0][0] +'":"'+ stylesArray[0][1] +'"';for(var j = 1; j < stylesArray.length; j++) {cssMagic += ',"'+ stylesArray[j][0] +'":"'+ stylesArray[j][1] +'"';};cssMagic += '});';for (var k = 0;k < stylesArray.length;k++){cssMagic = cssMagic.replace(/\n/g,"").replace(/\s{5}|\s{4}/g,"");cssMagic = cssMagic.replace(/\:\"\s/,':"');cssMagic = cssMagic.replace(/\,\"\s/,',"');};prompt("Copy this to your clipboard and paste it in the console:", cssMagic);console.log("Copy this to your clipboard and paste it in the console:");console.log(cssMagic);} else if (typeof($(selector).attr("style")) === "undefined") {alert("No styles found for that selector. Please try again.");} else {alert("No element found for that CSS selector found. Please try again.");};};cssMagic();})();