Project Settings: jQuery and Project JavaScript settings
- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization
You can adjust jQuery and JavaScript settings at the project level, such as changing the version of jQuery included in the project code and inserting custom JavaScript that runs before the snippet.
jQuery compatibility with JavaScript libraries
Optimizely Web Experimentation does not conflict with any existing JavaScript on your site, like jQuery, Prototype, or MooTools. The copy of jQuery in the snippet coexists with any existing versions of jQuery on your page and all versions of JavaScript framework. Optimizely Web Experimentation uses the jQuery method noConflict(), which removes Optimizely's copy of jQuery and the $ symbol from the global scope. Optimizely uses the noConflict method when you include jQuery in your embed code. If you uncheck the box (do not include jQuery in your embed code), the jQuery from the global scope remains. See jQuery and the $ variable to learn more.
Optimizely Performance Edge projects do not have jQuery. To use jQuery in your custom code, load it on the page outside of Optimizely Experimentation above the <script> element whose src attribute is your first-party Edge Decider URL.
By default, Optimizely Experimentation does not use jQuery. If you include it in the snippet, Optimizely Web Experimentation uses jQuery version 1.11.3 (trimmed). Legacy projects may still use jQuery version 1.6.4. You can also use Optimizely Web Experimentation with your own copy of jQuery.
Version 1.11.3 is the latest release in the 1.x "compatibility" branch of jQuery, which retains support for Internet Explorer 8 and includes significant speed improvements.
Warning
Legacy projects may use jQuery 1.6.4 instead of 1.11.3. If your project uses 1.6.4, you should upgrade to 1.11.3. After you upgrade, the project settings no longer lists version 1.6.4.
Certain functions are not included in 1.11.3, like .live(). If you have tried using a function such as $().live("mousedown"...), try using $().on("mousedown) instead. See jQuery's update guide for more information.
If you use your own version of jQuery instead of the version bundled in your Optimizely Web Experimentation JavaScript file, you must use version 1.4.2 or later for compatibility. Type window.$.fn.jquery in your browser console to verify that jQuery version 1.4.2 or later is running natively on the page.
jQuery settings
Here is how to find jQuery project settings, with step-by-step instructions below:
- Go to Settings > Implementation.
- Click the name of the snippet whose jQuery settings you want to view.
- Scroll down to jQuery Settings.
Note
If you have the deprecated versions of jQuery 1.6.4 in your project, those options show, and you see five jQuery Settings options. If you do not have jQuery 1.6.4 in your project, you only see three.
Optimizely Web Experimentation does not require jQuery, as long as you are not writing your own jQuery code in Project JavaScript, shared (experiment) code, or variation code. See jQuery and the $ variable for more information.
See all functions available in your current Optimizely Web Experimentation version of jQuery by entering the following code in your browser console:
var optimizely_functions = []
for(var f in optimizely.$) {
optimizely_functions.push("$." + f);
}
l = Object.getPrototypeOf(optimizely.$("body"))
for(var g in l){
optimizely_functions.push(g)
}
console.log(optimizely_functions)For a slightly different approach, you can run this code to find the list of functions included in the page's otherwise standard version of jQuery that is not included in the Optimizely Web Experimentation version:
var optimizely_functions = []
for(var f in optimizely.$) {
optimizely_functions.push("$." + f);
}
l = Object.getPrototypeOf(optimizely.$("body"))
for(var g in l){
optimizely_functions.push(g);
}
var jquery_functions = []
for(var f in $) {
jquery_functions.push("$." + f);
}
l = Object.getPrototypeOf($("body"))
for(var g in l){
jquery_functions.push(g);
}
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
jquery_functions.diff(optimizely_functions);Do not include jQuery in project code
Select this option when you want Optimizely Web Experimentation to use the version of jQuery running natively on your page. Make sure that it is loaded before Optimizely Experimentation on the page. Here is an example of how to implement jQuery and the Optimizely Web Experimentation snippet in the head of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.optimizely.com/js/21882493.js"></script>Include trimmed jQuery 1.11.3 in project code
This default option contains 196 core methods from jQuery 1.11.3. Search the following list to see whether a given function is included:
"$._data", "$._queueHooks", "$._removeData", "$.acceptData", "$.access", "$.attr", "$.attrHooks", "$.buildFragment", "$.cache", "$.Callbacks", "$.camelCase", "$.cleanData", "$.clone", "$.contains", "$.css", "$.cssHooks", "$.cssNumber", "$.cssProps", "$.data", "$.Deferred", "$.dequeue", "$.dir", "$.each", "$.error", "$.event", "$.Event", "$.expando", "$.expr", "$.extend", "$.filter", "$.find", "$.fn", "$.globalEval", "$.grep", "$.guid", "$.hasData", "$.holdReady", "$.inArray", "$.isArray", "$.isEmptyObject", "$.isFunction", "$.isNumeric", "$.isPlainObject", "$.isReady", "$.isWindow", "$.isXMLDoc", "$.makeArray", "$.map", "$.merge", "$.noConflict", "$.noData", "$.nodeName", "$.noop", "$.now", "$.param", "$.parseHTML", "$.prop", "$.propFix", "$.propHooks", "$.proxy", "$.queue", "$.ready", "$.readyWait", "$.removeAttr", "$.removeData", "$.removeEvent", "$.sibling", "$.style", "$.support", "$.swap", "$.text", "$.trim", "$.type", "$.unique", "$.valHooks", "$.when", "$a", "add", "addBack", "addClass", "after", "append", "appendTo", "attr", "before", "bind", "blur", "change", "children", "clearQueue", "click", "clone", "closest", "constructor", "contents", "contextmenu", "css", "data", "dblclick", "delay", "delegate", "dequeue", "detach", "domManip", "each", "empty", "end", "eq", "error", "extend", "filter", "find", "first", "focus", "focusin", "focusout", "get", "has", "hasClass", "hide", "hover", "html", "index", "init", "insertAfter", "insertBefore", "is", "jquery", "keydown", "keypress", "keyup", "last", "length", "load", "map", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "next", "nextAll", "nextUntil", "not", "off", "on", "one", "parent", "parents", "parentsUntil", "prepend", "prependTo", "prev", "prevAll", "prevUntil", "promise", "prop", "push", "pushStack", "queue", "ready", "remove", "removeAttr", "removeClass", "removeData", "removeProp", "replaceAll", "replaceWith", "resize", "scroll", "select", "selector", "serialize", "serializeArray", "show", "siblings", "slice", "sort", "splice", "submit", "text", "toArray", "toggle", "toggleClass", "trigger", "triggerHandler", "unbind", "undelegate", "unload", "unwrap", "val", "wrap", "wrapAll", "wrapInner"Include full jQuery 1.11.3 in project code
If you want to use Optimizely Web Experimentation's jQuery and have access to certain functions not included in the trimmed library (such as "animate" or "ajaxComplete") you might want to include the full library. This setting contains the methods above and 51 more.
"$._evalUrl", "$.active", "$.ajax", "$.ajaxPrefilter", "$.ajaxSettings", "$.ajaxSetup", "$.ajaxTransport", "$.Animation", "$.easing", "$.etag", "$.fx", "$.get", "$.getJSON", "$.getScript", "$.lastModified", "$.offset", "$.parseJSON", "$.parseXML", "$.post", "$.speed", "$.timers", "$.Tween", "ajaxComplete", "ajaxError", "ajaxSend", "ajaxStart", "ajaxStop", "ajaxSuccess", "andSelf", "animate", "fadeIn", "fadeOut", "fadeTo", "fadeToggle", "finish", "height", "innerHeight", "innerWidth", "offset", "offsetParent", "outerHeight", "outerWidth", "position", "scrollLeft", "scrollTop", "size", "slideDown", "slideToggle", "slideUp", "stop", "width"Include trimmed jQuery 1.6.4 in project code
If you have a legacy project using jQuery 1.6.4, you will see this option. The trimmed version of jQuery 1.6.4 contains 216 core methods. Search the following list to see whether a given function is included:
"$._data", "$._Deferred", "$._mark", "$._unmark", "$.acceptData", "$.access", "$.attr", "$.attrFix", "$.attrFn", "$.attrHooks", "$.bindReady", "$.boxModel", "$.browser", "$.buildFragment", "$.cache", "$.callBaseMethod", "$.camelCase", "$.clean", "$.cleanData", "$.clone", "$.contains", "$.css", "$.cssHooks", "$.cssNumber", "$.cssProps", "$.curCSS", "$.data", "$.Deferred", "$.dequeue", "$.dir", "$.each", "$.error", "$.event", "$.Event", "$.expando", "$.expr", "$.extend", "$.filter", "$.find", "$.fn", "$.fragments", "$.getBaseMethod", "$.getBaseType", "$.getInterfaces", "$.getName", "$.globalEval", "$.grep", "$.guid", "$.hasData", "$.holdReady", "$.implementsInterface", "$.inArray", "$.inheritsFrom", "$.initializeBase", "$.isArray", "$.isEmptyObject", "$.isFunction", "$.isImplementedBy", "$.isInstanceOfType", "$.isNaN", "$.isPlainObject", "$.isReady", "$.isWindow", "$.isXMLDoc", "$.makeArray", "$.map", "$.merge", "$.noConflict", "$.noData", "$.nodeName", "$.noop", "$.now", "$.nth", "$.parseJSON", "$.parseXML", "$.prop", "$.propFix", "$.propHooks", "$.proxy", "$.queue", "$.ready", "$.readyWait", "$.registerClass", "$.registerEnum", "$.registerInterface", "$.removeAttr", "$.removeData", "$.removeEvent", "$.resolveInheritance", "$.sibling", "$.style", "$.sub", "$.support", "$.swap", "$.text", "$.trim", "$.type", "$.uaMatch", "$.unique", "$.uuid", "$.valHooks", "$.when", "$a", "add", "addClass", "after", "andSelf", "append", "appendTo", "attr", "before", "bind", "blur", "change", "children", "clearQueue", "click", "clone", "closest", "constructor", "contents", "css", "data", "dblclick", "delay", "delegate", "dequeue", "detach", "die", "domManip", "each", "empty", "end", "eq", "error", "extend", "filter", "find", "first", "focus", "focusin", "focusout", "get", "has", "hasClass", "hover", "html", "index", "init", "insertAfter", "insertBefore", "is", "jquery", "keydown", "keypress", "keyup", "last", "length", "live", "load", "map", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "next", "nextAll", "nextUntil", "not", "one", "parent", "parents", "parentsUntil", "prepend", "prependTo", "prev", "prevAll", "prevUntil", "promise", "prop", "push", "pushStack", "queue", "ready", "remove", "removeAttr", "removeClass", "removeData", "removeProp", "replaceAll", "replaceWith", "resize", "scroll", "select", "selector", "siblings", "size", "slice", "sort", "splice", "submit", "text", "toArray", "toggle", "toggleClass", "trigger", "triggerHandler", "unbind", "undelegate", "unload", "unwrap", "val", "wrap", "wrapAll", "wrapInner"Include full jQuery 1.6.4 in project code
If you have a legacy project using jQuery 1.6.4, you will see this option. If you want to use Optimizely Web Experimentation's jQuery and have access to certain functions not included in the trimmed library (such as "animate" or "ajaxComplete") you may find it useful to include the full library. This setting contains the methods above and 48 more.
"_toggle", "$.active", "$.ajax", "$.ajaxPrefilter", "$.ajaxSettings", "$.ajaxSetup", "$.ajaxTransport", "$.easing", "$.etag", "$.fx", "$.get", "$.getJSON", "$.getScript", "$.lastModified", "$.offset", "$.param", "$.post", "$.speed", "$.timers", "ajaxComplete", "ajaxError", "ajaxSend", "ajaxStart", "ajaxStop", "ajaxSuccess", "animate", "fadeIn", "fadeOut", "fadeTo", "fadeToggle", "height", "hide", "innerHeight", "innerWidth", "offsetParent", "outerHeight", "outerWidth", "position", "scrollLeft", "scrollTop", "serialize", "serializeArray", "show", "slideDown", "slideToggle", "slideUp", "stop", "width"Project JavaScript
Project JavaScript is an advanced configuration setting that lets you run code before the Optimizely Web Experimentation code snippet without having to change your native site's code. With Project JavaScript, you can run more advanced experiments that depend on reusable variables, targeting conditions, and API calls with ease and efficiency.
Project JavaScript is at Settings > JavaScript:
Common use cases for Project JavaScript include:
- Tracking unique custom events, such as scroll depth and mouse hover.
- Reusing custom modules, such as lightboxes and banners, across multiple experiments.
- Running experiments on single-page apps that happen without reloading the page.
- Managing multiple analytics integrations on the same page.
- Targeting more than one experiment to the same audience.