Optimize
3.6K members online now
3.6K members online now
Everything you need to know about setting up Optimize including creating your account and container, linking to Google Analytics and how to tag your site.
Guide Me
star_border
Reply

Custom JS

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭
I'm using the free trial of Google Optimise and cannot find out where to add my own custom javascript, avoiding using the WYSIWYG editor. Is this a paid feature?
 
Also for sites without jQuery, what is the best way to implement it into the experiment?
 
 
1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Ryan C
August

Custom JS

Google Employee
# 4
Google Employee

You can certainly import any script dynamically, see more details at:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

 

Inside an optimize javascript change (right click or use the "Edit element" menu from the editor palette and use the  "Add javascript" option), you could paste the importScript method implemented in the page above.

Then you could just use it, i.e.

importScript("jquery.js", function () {
// Code that uses jQuery
); });


Implementing a modal dialog is also easy with pure HTML and just using some js event handlers.

There is even an interesting technique to create them without even using any javascript at all,
using the HTML5 target CSS pseudo class.

Have a look at:

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

If you paste the code at:

view-source:netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

inside an Optimize "Insert HTML" dialog that you may find in the "Edit element" menu
(just strip out the <html> <head> and <body> tags), you could get a simple modal.

 

View solution in original post

Custom JS

Google Employee
# 2
Google Employee

You can click on any element (body is selected initially) and either do a right click or use the "Edit element" menu from the editor palette to "Add javascript".

 

Google Optimize is not based or using jQuery. The best way to implement an experiment is using the functionality of the editor (palette, edit menu, drag elements).

 

More technical users could use the CSS code dialog in the editor, or create individual "changes" of any type using the Selection dialog (rectangle in the beginning of the hierarchy bar).

You don't need to know jQuery or javascript to use those advanced features, but some basic knowledge of CSS and HTML would be required.

 

https://support.google.com/360suite/optimize/answer/6369964?hl=en

 

Custom JS

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Thanks for your reply. I guess launching a custom modal on the page without any modal functionality would not be possible with the current setup?

Marked as Best Answer.
Solution
Accepted by topic author Ryan C
August

Custom JS

Google Employee
# 4
Google Employee

You can certainly import any script dynamically, see more details at:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

 

Inside an optimize javascript change (right click or use the "Edit element" menu from the editor palette and use the  "Add javascript" option), you could paste the importScript method implemented in the page above.

Then you could just use it, i.e.

importScript("jquery.js", function () {
// Code that uses jQuery
); });


Implementing a modal dialog is also easy with pure HTML and just using some js event handlers.

There is even an interesting technique to create them without even using any javascript at all,
using the HTML5 target CSS pseudo class.

Have a look at:

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

If you paste the code at:

view-source:netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

inside an Optimize "Insert HTML" dialog that you may find in the "Edit element" menu
(just strip out the <html> <head> and <body> tags), you could get a simple modal.

 

Custom JS

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

I was able to set up an A/B test with an HTML5/CSS3 modal based off of this code: https://codepen.io/spenceroreilly/pen/ezpdYX. (this one is open on page load)

 

I used "insert HTML" and included both the css and the lightbox HTML within it.

 

hope that helps!