- Use jQuery to create variations in Optimizely Web Experimentation
- Make simple changes in the Optimizely Web Experimentation Code Editor
- Use jQuery to manually identify and change elements that you have moved
This article will show you some common jQuery functions that you can use in the Optimizely Code Editor, even if you are primarily a Visual Editor user.
If you are looking for Optimizely Web Experimentation's jQuery or JavaScript Settings, please see the linked article.
What is jQuery and how does Optimizely Web Experimentation use it?
Optimizely Web Experimentation runs variations on your page by modifying the elements on the page. To do this, it needs a way to execute the changes. Optimizely Web Experimentation does this through jQuery, a JavaScript library.
This article describes how to read a line of jQuery and the common methods used by the Editor.
You will need to enable jQuery in project settings or include it in your code. Check out this article to learn more about jQuery and the $ variable in Optimizely Web Experimentation.
A basic line of jQuery looks like this:
$("#selector").html("Hello World");The first part before the period is the selector, which specifies the element, ID, or class that will be modified.
$("#selector")The Editor will attempt to identify elements with IDs first because they tend to be the most unique. As in CSS, IDs are identified by the pound or hashtag symbol (#), and classes are identified by a leading period (.).
The second part after the period is called the “method.”
.html("Hello World");The method will make the changes to our selector. In our sample code above, the html() method changes the HTML contents of our selected element to the text "Hello World".
You commonly use the Editor to change the style of an element. This makes use of the css()method, which changes the CSS properties of the selected element. Suppose you want to change the color of our 'Hello World' text to blue (hex value: #1964af). The selector is the same and thehtml() method is replaced with css(). The line of code would look like this:
$("#selector").css({"color":"#1964af"});The two items inside the curly braces { } and double quotes "
" are the CSS property and value that we want our element to take on. A full list of methods are available in jQuery's documentation here.
Common jQuery Methods
In this section, we will show you several different methods that you will see when you use the Visual Editor to make changes, or that you can use to make simple changes yourself.
$(“#selector”).attr({“src”: “image.png”}); $(“#selector”).attr({“href”: “example.com”});The .attr() method will “Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element” See more documentation on the jQuery site.
In the first case, the selector is getting an image source assigned as an attribute, therefore changing an existing image or adding one to the selected element. In the second case, the selector is turned into a hyperlink that directs to the url in quotes. An .attr() method call is most commonly generated when using Change Image or Make Hyperlink features.
$(“#selector”).replaceWith(“<div>Hello World</div>”);The .replaceWith() method will “Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed” See more documentation on the jQuery site.
In this case, any selector with id “selector” will have its contents replaced with a division, inside of which will be the phrase “Hello World.” In the WYSIWYG Editor, this method is most commonly generated when using “Edit HTML.”
$(“#selector”).detach().insertBefore(“.class1”);The .detach().insertBefore() method (actually methods) will literally remove the selected element from its parents and children elements on the DOM and insert it before the element of class “class1”. On the html tree, it will be on the same “level” as the element it is inserted before. That is, it is neither child nor parent of $(“.class1”). In the editor, you will see these methods generated when using the Rearrange feature.
$(“#selector”).detach().insertAfter()Same as above except it will insert after, rather than before. The Rearrange feature will call these methods as well.
$(“#selector”).prepend(“#snazzy”);The .prepend() method will add the selector before the element #snazzy. Like .insertBefore(), it will be on the same level as the #snazzy. That is, it is neither child nor parent of #snazzy.
$(“#selector”).append()Same as above except after. Oftentimes, an .append() method call will be generated when inserting an element such as an image.
Manually find jQuery selectors on your page
Sometimes you will want to make changes to an element in a variation as well as move it around on the page. When you move an element, Optimizely Web Experimentation may essentially not know where to look for it, but you can use a jQuery selector to manually identify it and make your changes.
A jQuery selector - an identifier used to apply a jQuery method to an element - can be an element’s ID, Class, Tag or CSS Path.
IDs are unique and can only be associated with one element.
Classes are not unique and can be applied across a group of elements that will have similar attributes.
HTML Tags are the hidden keywords within a web page that define how the browser must format and display the content. Classes and IDs, if present, are attributes of HTML tags.
For example, the <p> tag defines a paragraph is denoted as follows:
<p> This is paragraph text residing within paragraph HTML tags. </p>Adding a class as an attribute would then look like:
<p class=”your-class-name”> This is paragraph text residing within paragraph HTML tags. </p>For more information on HTML and HTML tags, check here.
CSS Paths indicate the placement of an element on the page (or, “DOM” - which stands for “Document Object Model” and is another way of referring to the HTML page structure). Normally, the Visual Editor will use an ID or Class to identify an element and apply changes to it. If an ID or Class hasn't been identified, the Editor will use a CSS path instead.
Navigation menus, search result pages, and dropdown menus are examples of elements that may sort and display information differently. If you wanted to test the order of your nav elements or highlight some menu option by moving it to the left-most position, you would not want to use CSS paths as your jQuery selectors - if these elements' CSS paths change, then the Editor may not point to the correct path.
Manually Finding jQuery Selectors
To make changes to elements independent of their position, try using a jQuery method that manually finds elements within (or “traverses”) the DOM. The jQuery “contains” method is one method of how to traverse the DOM, as it simply allows a user to search for elements that contain specific text.
To target specific nav elements -- for example, the “Where We Are” link -- you would want to traverse the DOM using a:contains('Where We Are'). In this case, the appropriate selector would then be $(“main_nav > .horizontal”).contains(“Where We Are”)
For a full list of jQuery traversal methods, check here.
<%= heading %>