Adding a Google Ads responsive ad unit to an Oxygen template

24 December 2018

Here's a 'gotcha' that caught me out when adding a Google Ads responsive ad unit to a template in Oxygen (the WordPress site builder).

When you create your ad unit in Google AdSense, you will be given a snippet of JavaScript. The obvious way to add this to your Oxygen site is using a 'code block'. That's fine, and if you're anything like me then you'll also wrap that code block with a <div>.

Wrap code block with div

About to wrap my code block with a<div>

However, the ad unit calculates its size based on the width of the parent element - in this case, the <div> that you have wrapped the code block in. So you will also need to give that <div> a width! If you don't do that, no ads will appear and you will be left scratching your head.

As I later found in the AdSense documentation:

There are some situations in which you’ll need to take extra action to make a responsive ad unit work correctly:

The parent container has no width set. If you place your responsive ad code within a parent container that doesn’t have an explicit width set, for example, within a floating element, then our ad code won’t be able to calculate the required size for the responsive ad unit. In this case, you’ll need to modify your code and use CSS media queries to set the size of the parent container. Find out how to modify your responsive ad unit.

So to recap, the correct approach is:

  1. Add the JavaScript snippet to the template in a code block
  2. Wrap the code block in a <div>
  3. Give that <div> a width! (Don't worry - you can use Oxygen's responsive controls to set different values for different browser viewport widths)

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram