read

This website serves ads using Google Adsense. 🙇‍♂️ This is the simplest way to pay for my coffee.

Using Adsense is really easy. Turn on Auto Ads, add the google tag script to head, and voila.

The next level of serving ads is to use Google Ad Manager (aka DoubleClick for Publisher/Google Publisher Tag). It gives you more control with actual ad units and placement, supports direct inventory sale, supports house ads, and can integrate 3rd party networks/exchanges (this requires high volume to access).

I am switching to Ad Manager primarily because of a direct inventory sale for one of my website. It is also a bonus to be able to serve my own house ads.

But Ad Manager is a beast compared to Adsense. Google has lots of articles and documentation, yet it is not clear on the best practices. It took me a while to figure out on my own.

Setting up parent ad unit

This is a good feature with hierarchy grouping, but it is confusing because there isn’t a guide on the standard practice of setting it up. This is what you should do:

• For each website, create 1 parent ad unit
• You don’t have to use this parent ad unit in code
• Create child ad units and use them instead

For example, in samwize.com, I created the parent samwize.com to use to group the children, which are top, bottom, anchor and others.

A full id will be eg. /1234/samwize.com/top (where 1234 is organization id).

Multiple responsive ads

Of course, we are good developers and our websites are all responsive, so the ads have to be responsive too.

But Google Ad Manager is not really responsive. You have to manually specify all the exact sizes that you may serve.. After studying the different codes, understanding the popular ad sizes, and trying them out, this is my tag script setup.

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    var topMapping = googletag.sizeMapping()
      .addSize([600, 0], [[728, 90], 'fluid'])
      .addSize([0, 0], ['fluid', [320, 100], [320, 50],  [300, 250], [728, 90]])
      .build();
    var bottomMapping = googletag.sizeMapping()
      .addSize([600, 0], [[300, 250], [336, 280], [320, 100], [728, 90], 'fluid'])
      .addSize([0, 0], [[300, 250], [320, 100], [320, 50], 'fluid'])
      .build();

    googletag.defineSlot('/21861557160/samwize.com/top', [], 'div-gpt-ad-top')
      .defineSizeMapping(topMapping)
      .addService(googletag.pubads());
    googletag.defineSlot('/21861557160/samwize.com/bottom', [], 'div-gpt-ad-bottom')
      .defineSizeMapping(bottomMapping)
      .addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().setCentering(true);
    googletag.enableServices();
  });
</script>

The code above setup for a top banner and a bottom banner. They have their own ad size mapping for viewports. This is because you won’t want to display a 728x90 leaderboard on a small mobile device. I use a simple handling based on the [600, 0] viewport:

• Viewport width > 600 are tablet, laptop and bigger
• Viewport width < 600 are mobile

A few other notes:

• The ordering is important. Eg. ['fluid', [320, 100], ...] will fetch fluid (native ads) first, if available to fill.
• The sizes are defined only at the sizeMapping, and you need NOT specify in the ad unit settings

Place the div

The second part of the code is to add the divs with the id div-gpt-ad-top and div-gpt-ad-bottom. It looks like this:

<div id='div-gpt-ad-top' style='min-height: 90px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-top'); });
  </script>
</div>

It is important to add the min-height style, so as to improve CLS score. For above the fold placement, you want to set it to the most likely height.

While for bottom placement, it is not so crucial so you can set to the minimum height eg. 90 (even though our bottom ad is likely 300x250).

Running Adsense Auto Ads

You can still run Adsense auto ads concurrently.

But if you want to serve anchor and vignette Adsense ads, you can’t do it from Ad Manager.

To be clear, you can add such ad units in Ad Manager, but they are for serving your house ads or direct inventory sales (not for serving Adsense).

I will cover anchor ads in another post.

UPDATE: Check out Part II anchor ad and Part III interstitial ad.