Project Settings: jQuery and Project JavaScript settings

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.

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.

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:

1. Go to Settings > Implementation.

2. Click the name of the snippet whose jQuery settings you want to view.

3. Scroll down to jQuery Settings.

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)

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.