jQuery and the $ variable in Optimizely Web Experimentation

  • Updated
This topic describes how to:
  • Determine how your code is affected by a change to Optimizely Web Experimentation's approach to $ in jQuery in Optimizely Web Experimentation
  • Adjust custom code for affected projects

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).

In Optimizely Web Experimentation, there is no explicit dependency on jQuery, and the Visual Editor does not generate editable code. Excluding jQuery by default reduces the snippet size, which improves page performance. We have also changed the way the $ variable behaves in all custom code boxes in Optimizely Web Experimentation, like conditional activation functions, shared code, and custom JavaScript editor changes.

These changes mean that in Optimizely Web Experimentation, 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, $ will refer to window.$

The changes might affect you if you do not bundle Optimizely Web Experimentation’s jQuery in your projects. Read on to learn more.

 

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.$

Moving forward, here is how that works in Optimizely Web Experimentation:

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

  • The $ variable always refers to the project’s library definition of jQuery. This means that $ will refer to the library that you included in your snippet (if any). If no library is included, $will refer to window.$

This approach to the $ variable has the following effects:

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

  • $ will resolve to the jQuery library included in the project. If no jQuery library is included, it will resolve to window.$ but never window.jQuery

  • The .get(‘jquery’) API method will continue to follow the current pattern (first the library included in the project if any, otherwise window.$)

    • This means existing code using .get(‘jquery’) can fall back to window.$ if it is removed from the project

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

  • You will see a warning when someone removes jQuery from a project

How should I adjust my code?

The changes will 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 $ will no longer reference window.jQuery. Instead, $ will reference 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.