This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

This article will help you:
  • Manage settings in the Implementations and JavaScript tabs of your Project Settings.
  • Change the version of jQuery included in the Optimizely Project Code
  • Use Project Javascript to insert custom JavaScript that runs before the Optimizely snippet, without having to make direct changes to your site's code

This article describes the jQuery and JavaScript settings you can adjust at the project level.

jQuery compatibility with JavaScript libraries

Optimizely does not conflict with any existing JavaScript on your site, like jQuery, Prototype, or MooTools. The copy of jQuery that's included in the snippet peacefully coexists with any existing versions of jQuery on your page and all versions of any other JavaScript framework.

How does this work? Optimizely avoids conflicting with existing JavaScript frameworks by using the jQuery method noConflict(), which removes our copy of jQuery and the $ symbol from the global scope. We only use the noConflict method when you include jQuery in your embed code (the default behavior). If you uncheck the box (do not include jQuery in your embed code), we don't remove jQuery from the global scope. Check out this article to learn more about jQuery and the $ variable in Optimizely X.

By default, Optimizely uses jQuery version 1.11.3 (trimmed). Legacy projects may still use jQuery version 1.6.4. You can also use Optimizely 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.

 
Important:

Legacy projects may use jQuery 1.6.4 instead of 1.11.3. If your project uses 1.6.4, we recommend upgrading to 1.11.3. After you upgrade, version 1.6.4 is no longer listed in the project settings.

Certain functions are not included in 1.11.3, most notably .live(). If you have tried using a function such as $().live("mousedown"...) or similar, try using $().on("mousedown) instead. For more information, see jQuery's update guide.

If you use your own version of jQuery instead of the version bundled in your Optimizely JavaScript file, version 1.4.2 or later is required for compatibility.

 
Tip:

Type window.$.fn.jquery in your browser console to verify that jQuery version 1.4.2 or later is running natively on the page.

Optimizely makes heavy use of jQuery in running experiments. Your Optimizely snippet points to a JavaScript file that comes bundled with a stripped-down version of jQuery. However, you might choose to have Optimizely use your own version of jQuery for a couple reasons:

  1. You are already using jQuery version 1.4.2 or later on your site and don't want to make your visitors download it twice

  2. You want to use jQuery functionality that isn't offered in Optimizely's stripped-down version, like .show() or.hide()

jQuery settings

Here's where to find jQuery project settings:

  1. Navigate to Settings > Implementation.

  2. Scroll down to jQuery Settings.

If you have the deprecated versions of jQuery 1.6.4 in your project, those options will show, and you'll see five jQuery Settings options. If you don't have jQuery 1.6.4 in your project, you'll only see three options.

Optimizely X doesn't require jQuery, as long as you're not writing your own jQuery code in Project JavaScript, shared (experiment) code, or variation code. Check out this article to learn more about how Optimizely X approaches jQuery and the $ variable.

See all functions available in your current Optimizely 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 that Lucas Swartsenburg wrote to find the list of functions included in the page's otherwise standard version of jQuery that aren't included in our 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 to use the version of jQuery running natively on your page. Make sure that it is loaded before Optimizely on the page. Here's an example of how to implement jQuery and the Optimizely 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'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. They are:

"$._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'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. They are:

"_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 available for select Optimizely plans only.

Project JavaScript is an advanced configuration setting that lets you run code before the Optimizely 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