Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

x
Optimizely Knowledge Base

Project Settings: JavaScript and jQuery settings

This article will help you:
  • Manage settings in the JavaScript subtab 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

In the Settings tab of the Home page, you're able to manage all settings for a given project. This article describes the JavaScript/jQuery settings available to you in the JavaScript subtab.

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 co-exists with any existing versions of jQuery on your page as well as all versions of any other javascript framework.

How does this work? Optimizely is able to avoid 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 have un-checked the box above we don't remove jQuery from the global scope.

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. At this point, you will no longer see 1.6.4 in the project settings.

Certain functions are not included in 1.11.3, most notably .live(). So 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 elect to 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. You may elect, however, to have Optimizely use your own version of jQuery for a number of 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 wish to use jQuery functionality not offered in Optimizely's stripped down version, like .show() or.hide()

jQuery Settings

In the JavaScript sub-tab under Advanced Configuration, you will be given three options:

If you are currently running a project that uses jQuery version 1.6.4, you will see two additional options:

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 whatever our version is:


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. It's important to 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 would like 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 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 would like 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 to select Enterprise plans.

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.

 

Some 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

Didn't find what you were looking for? Please see these related articles: