Optimize
2K members online now
2K 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

Adding an external script

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I'm on to my third experiment in Optimize, but this one is a lot more complicated.

 

The variants I'm running require the loading of an external script--usually this is done via a script tag in the head. However, since inserting script tags is not allowed in Optimize, can anyone recommend a method to call and execute a JS file?

 

Thanks.

1 Expert replyverified_user

Adding an external script

Google Employee
# 2
Google Employee

You could perhaps use the "Run Javascript" option and add the script programmatically i.e.:

 

var script = document.createElement('script');

script.src='<script url>';
document.body.appendChild(script);

 

But be aware that the script will be loaded asynchronously and the behavior will not be the same to a script tag in the head (will run later and can't use document.write).

 

Adding an external script

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

The problem with this solution is that if you want to use some functions from the external script you cant, because they are unkown to the editor.

Adding an external script

Google Employee
# 4
Google Employee

What about this:

 

var script = document.createElement('script');

script.src='<script url>';

script.addEventListener('load', function() {

  // Use the functions you want here.

});
document.body.appendChild(script);

 

Depending on what you do, you may or may not have flicker problems (if you change pre-existing content). What you could do in this case, is to identify the CSS selector of the container element affected, and use it as the CSS selector for your script change (so the container remains hidden until the javascript runs.

Then you could do (the container is passed as the element parameter in your function):

 

var script = document.createElement('script');

script.src='<script url>';

element.style.visibility = 'hidden';

script.addEventListener('load', function() {

  // Use the functions you want here.

  element.style.visibility = 'visible';

});
document.body.appendChild(script);

Adding an external script

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

This worked perfectly for me. Thank you!

Adding an external script

Visitor ✭ ✭ ✭
# 6
Visitor ✭ ✭ ✭

This just stopped working for some reason. Any other ideas of how to implement this?

Adding an external script

Google Employee
# 7
Google Employee

Some ideas:

- Check that the experiment is still running (at the experiment details page)

- Check that the targeted element still exists. Open the variant of your running experiment on the Optimize editor and look for diagnostic warnings at the top right.

- Have a look at the targeting conditions (if you have anything advanced).

- Check that the URL of the script that you are trying to load still exists.

- Check the chrome devtools console for any errors.

 

If you still can't figure out what is happening, please share your container ID.