Optimize
4.1K members online now
4.1K members online now
Learn how to create your first experiment and get tips on creating A/B, redirect, and multivariate tests.
Guide Me
star_border
Reply

Custom jQuery - Is This Possible?

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Other A/B testing platforms give you the ability to modify the jquery directly. In my experience this is nice to have an many visual editors make mistakes or can not do specific actions. 

 

I was not able to find this feature in Google Optimize. Is this a possibility with Google Optimize?

1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by Jason O (Community Manager)
December 2016

Custom jQuery - Is This Possible?

Google Employee
# 2
Google Employee

Google Optimize doesn't require or use jQuery.

 

You may use a Google Optimize Javascript change to implement custom behavior and you may use jQuery in your javascript code, as long as jQuery is loaded synchronously in the head above the Google Optimize snippet. 

View solution in original post

Marked as Best Answer.
Solution
Accepted by Jason O (Community Manager)
December 2016

Custom jQuery - Is This Possible?

Google Employee
# 2
Google Employee

Google Optimize doesn't require or use jQuery.

 

You may use a Google Optimize Javascript change to implement custom behavior and you may use jQuery in your javascript code, as long as jQuery is loaded synchronously in the head above the Google Optimize snippet. 

Custom jQuery - Is This Possible?

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

What does Google Optimize use then if not jQuery?

Re: Custom jQuery - Is This Possible?

Visitor ✭ ✭ ✭
# 4
Visitor ✭ ✭ ✭

Many services that you're likely already using (e.g. GTM) employ jQuery, so there's a good chance you're safe using it. Still, it's a good idea to check.

 

You can include this as JS on you page or use directly in the console:

var loaded = typeof jQuery!=='undefined'?"is":"isn't"; console.log("jQuery "+loaded+" loaded");

It'll tell you in the console if jQuery is loaded, and thus if you're able to use it on the page as is, will need to load it, or use vanilla JavaScript.

 

Hope that helps.

Custom jQuery - Is This Possible?

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

Hi,

 

We are used to using VWO but are trialling Google Optimize (Free version).  We prefer not to use the WYSIWYG editor to implement changes, rather to use Javascript entirely to process all changes to a page.  So I need to know the best place to add javascript that will run when the page loads.  At present I am adding javascript to the BODY tag - is there a batter way?

 

Thanks

 

Mike

Custom jQuery - Is This Possible?

Google Employee
# 6
Google Employee

A javascript on the BODY (keeping the default option "After closing tag") will always work, since the Optimize runtime will run it only after the closing tag of the body element tag has been parsed in the DOM - which is effectively after DOM ready.

 

It will not be the best experience for your users though: the runtime will keep the whole body hidden until then (until DOM ready) to avoid flickering (showing the original content).

 

The best option (if possible), is to add the javascript after selecting the smaller container of all the elements that you are going to touch in that javascript.

 

If your code touches just a single element, then best option is to add a Javascript change after selecting only that element (alternatively you may also split your code in multiple Javascript changes on different elements).

 

Then the runtime will keep only that element hidden (to avoid flickering) and your users will be able to interact with the rest of the page - even before DOM ready.

 

Just be aware though that any js libraries that you may want to use (i.e. jQuery) may not be available - if for example the page is following the common practice of adding these at the bottom of the body: your javascript code may run before these are loaded and parsed by the browser.

 

In that case you may either move these libraries in the head, or not use them (just use plain js).

 

If none of these is possible then best option is probably to keep what you are doing by adding the javascript after selecting the whole BODY.