AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

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

2 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.

 

Re: Adding an external script

Visitor ✭ ✭ ✭
# 8
Visitor ✭ ✭ ✭

Instead of opening a new topic on this, I wanted to follow up with a question on how this looks, as I'm relatively new to this kind of implementation.

 

I'm trying to test the placement of an AdSense code that looks like this:

 

<script async src="//example.com/adSource.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "xx-yyy-1234567890",
          enable_page_level_ads: true
     });
</script>

 

Creating the function for the first <script> seems simple enough, and I'm assuming I need to understand how to call the other function in the script, but I can't quite figure out where it should all go. Currently I've got this in the "Run Javascript" area of the <head> element, but I'm pretty certain it's not correct:

 

var script = document.createElement('script');
script.src='//example.com/adSource.js';
script.async = true;
script.addEventListener('load', function() {
  (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "xx-yyy-1234567890",
          enable_page_level_ads: true
     });
});
element.appendChild(script);

Any thoughts on improvement?

Adding an external script

Google Employee
# 9
Google Employee

Hi

 

Did you had any problems with the code above and adding in the "Run Javascript" of the <head> (CSS selector should be just: head)?

I can't see anything wrong with you approach.

 

A couple of things:

- Make sure that you follow the Adsense policies

- You could temporarily add a "debugger" statement and use "preview" to troubleshoot any issues (without adding the experiment for real on your site).

- Include your code in a  try / catch block and print any exceptions.

 

 

Adding an external script

Visitor ✭ ✭ ✭
# 10
Visitor ✭ ✭ ✭

Hello what about this type of situation: I have a script/noscript block that I want to add to the page, it looks like this:

 

<script>(function(h,o,t,j){a=o.getElementsByTagName("head")[0];r=o.createElement("script");r.async=1;r.src=t+j;r.onload=function(){formFrame.draw("abc&param=abc", "border: 0; overflow: hidden; height: 714px; width: 100%;", "render");};a.appendChild(r);})(window,document,"//forms.hyperia.sk/js/form.frame",".js");</script><noscript id="form-iframe"><iframe src="https://forms.hyperia.sk/form/render?id=abc&param=abc" style="border: 0; overflow: hidden; height: 714px; width: 100%;" frameBorder="0" border="0" width="100%" scrolling="no"></iframe></noscript>

 

How can I add it to page? The editor always returns an error  = Please remove script tags