RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

This article will help you:
  • Determine how your code is affected by a change to Optimizely's approach to $ in jQuery in Optimizely X, if you've been using Optimizely Classic
  • Adjust custom code for affected projects

If you’re an Optimizely Classic user, 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 X, there’s no explicit dependency on jQuery, and the Visual Editor doesn’t generate editable code. Excluding jQuery by default reduces the snippet size, which improves page performance. We've also changed the way the $ variable behaves in all custom code boxes in Optimizely X, like conditional activation functions, shared code, and custom JavaScript editor changes.

These changes mean that in Optimizely X, you can:

  • Use Optimizely effectively without jQuery

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

  • If you don’t include jQuery in your snippet, $ will refer to window.$

The changes might affect you if you don’t bundle Optimizely’s jQuery in your projects. Read on to learn more.

jQuery behavior in Optimizely X versus Classic

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

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

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

Moving forward, here’s how that works in Optimizely X:

  • 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’s removed from the project

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

  • You’ll 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 X projects. If you’re transitioning from Optimizely Classic to Optimizely X, it’s important to understand how the $ variable works differently in Optimizely X.

The changes mainly affect projects that do not bundle Optimizely’s jQuery, but still reference $. Optimizely X 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, please contact your Customer Success Manager.