Project Settings: jQuery and Project JavaScript settings in Optimizely Web Experimentation and Optimizely Performance Edge

  • Updated
Relevant products:
  • Optimizely Web Experimentation
  • Optimizely Performance Edge
This topic describes how to:
  • Manage settings in the Implementations and JavaScript tabs of your Project Settings.
  • Change the version of jQuery included in the Optimizely Web Experimentation Project Code
  • Use Project Javascript to insert custom JavaScript that runs before the Optimizely Web Experimentation 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.

If you are using Optimizely Performance Edge, certain features described in this article will not be available to you. Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely Web Experimentation. It does this by relying on a streamlined "microsnippet" which limits the range of available features.

You will see this notation edge-info.jpg whenever the text describes a feature that is available in Optimizely Performance Edge.

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 that is 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 Web Experimentation 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. If you uncheck the box (do not include jQuery in your embed code), we do not remove jQuery from the global scope. Check out this article to learn more about jQuery and the $ variable in Optimizely.

edge-info.jpg jQuery is not bundled in Optimizely Performance Edge projects. If you wish to use jQuery in your custom code, you must ensure it is loaded 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 choose to 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.

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 Web Experimentation JavaScript file, version 1.4.2 or later is required 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:

jquery-settings.png

  1. Navigate to Settings Implementation.

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

  3. 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 will see five jQuery Settings options. If you do not have jQuery 1.6.4 in your project, you will only see three options.

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. Check out this article to learn more about how Optimizely Web Experimentation approaches jQuery and the $ variable.

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. 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 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. 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 edge-info.jpg

Project JavaScript is available for select Optimizely Web Experimentation packages only.

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:

project-javascript-2023.png

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