jQuery and the $ variable

  • Updated
  • Optimizely Web Experimentation

You might be accustomed to bundling jQuery in the snippet, loading your own jQuery library on pages, and editing jQuery variation code in the Visual Editor (or writing your own variation code). Optimizely Web Experimentation is not dependent on jQuery, and the Visual Editor does not generate editable code. Excluding jQuery by default reduces the snippet size, which improves page performance. Optimizely Web Experimentation has also changed how the $ variable behaves in all custom code boxes, like conditional activation functions, shared code, and custom JavaScript editor changes. You can:

  • Use Optimizely Web Experimentation effectively without jQuery.

  • Consistently reference your project’s library definition of jQuery in custom code boxes via the $ variable.

If you do not include jQuery in your snippet, $ refers to window.$

The changes might affect you if you do not bundle Optimizely Web Experimentation’s jQuery in your projects. 

jQuery behavior in Optimizely Web Experimentation

Previously, when jQuery was not bundled in your project, Optimizely Web Experimentation resolved references to $ like this:

  • If window.jQuery is defined, then $ = window.jQuery

  • If window.jQuery is not defined, then $ = window.$

Here is how that works in Optimizely Web Experimentation now:

  • New projects do not include jQuery in the snippet by default.

  • The $ variable always refers to the project’s library definition of jQuery. $ refers to the library that you included in your snippet (if any). Otherwise, $ refers to window.$

This approach to the $ variable has the following effects:

  • New conditional activation function code include a third parameter for the autogenerated example code: function(activate, options, $) {}.

  • $ resolves to the jQuery library included in the project. Otherwise, it resolves to window.$ but never window.jQuery.

  • The .get(‘jquery’) API method follows the current pattern: first the library included in the project, otherwise window.$. This means existing code using .get(‘jquery’) can fall back to window.$ if it is removed from the project.

  • Custom code boxes indicate the project’s jQuery snippet settings.

  • A warning displays when someone removes jQuery from a project.

How should I adjust my code?

The changes automatically apply for all new Optimizely Web Experimentation projects. It is important to understand how the $ variable works in Optimizely Web Experimentation.

The changes mainly affect projects that do not bundle Optimizely Web Experimentation’s jQuery but still reference $. Optimizely Web Experimentation projects that meet all three of the following criteria are affected:

  1. Project does not include jQuery.

  2. Code includes references to $.

  3. window.$ != window.jQuery on the web page.

In this case, the code reference to $ no longer references window.jQuery. Instead, $ references whatever window.$ is defined as. It could be undefined, or it could point to another $ library like prototype.js. If you want $to refer to window.jQuery , you can explicitly assignvar $ = window.jQuery in your custom code.

If you have questions or need help with this change, contact your Customer Success Manager.