I am currently creating automatic tests for our Google Ad Manager integration to catch bugs and make releases more reliable.
To set up the tests, I am using the great low-code options provided by Ghost Inspector. I created different creatives in GAM for each case and now wanted to check on my test site if the appropriate ads appeared.
There are some things to consider when looking into the content of Google Ad Manager ad units using JavaScript. Follow this tutorial if you ever are in need to do the same.
My use case is related to automatically testing our GAM integration. You could also use the information below to build more magic, like adding or removing certain information on your page if a certain creative is or isn’t delivered.
The Use Case
I created a line item with custom targeting for various key-value combinations. You can see them in the screenshot below. I combined multiple key-values in one test, hence the long list of elements like the post ID, post type, URL slug, etc.
The Google Ad Manager WordPress integration by Advanced Ads adds the correct values automatically when the ad unit is set up with the following options in the plugin settings.
If the above targeting criteria are fulfilled and Advanced Ads creates the correct ad unit code with key-values targeting, the following creative should appear on my test site.
The order for this line item is highly prioritized to be delivered before any other line items in the GAM account. Hence, something is wrong with my setups when this creative is not showing up.
The creative above is an HTML5 ad, so my automatic test should look into its source code to see if the correct ad is delivered.
Looking into iframes
Google Ad Manager uses iframes to deliver ads on a website.
Experienced web developers know that iframes are not always easy to manipulate due to the Same-origin policy. In the case of Google Ad Manager, HTML 5 ads use the Same-origin policy by default.
You can verify if a line item is delivered using a safe frame using the Google Ad Manager Publisher Console.
In the example below, the “Iframe type” is set to “Friendlyframe”, which allows access to the iframe content.
This means that the following JavaScript code would give you access to the Google Ad Manager ad unit content, e.g., for custom analysis or checks like for automated testing.
document.querySelector('iframe[id^="google_ads_iframe"]').contentDocument;
Code language: JavaScript (javascript)
This code does not work when your HTML5 uses the iframe type “SafeFrame”, like the test ad I created below. Your JavaScript code would return null
instead of the document’s content using JavaScript.
Changing the SafeFrame option for HTML5 ads
As mentioned above, Google Ad Manager automatically uses SafeFrame for HTML5 ads.
If you want to access specific HTML5 creatives, you need to disable that option.
Just find the “Serve into a SafeFrame” option in the creative settings and disable it.
After a few minutes, the iframe type for the creative will change into “Friendlyframe”.
At this point, you can use
document.querySelector('iframe[id^="google_ads_iframe"]').contentDocument;
Code language: JavaScript (javascript)
to access the content of the HTML5 ad.
In my case, I used that snippet to create specific tests in Ghost Inspector. You can do a lot more. If you implement some cool ideas, then please let me know.