Digital Underwriting Overhaul

We just rolled out a new ad system, and nobody noticed. In this line of work, that means I did my job.

Our platform shift from Open Ad Stream (OAS) to DoubleClick For Publishers (DFP) went smoothly. From the business side of things, this resulted in improved content targeting and increased revenue for the company.

From the technical end, it meant improved performance for our readers, less maintenance , and greater reliability. Here’s a quick comparison of technical features:

Old Ad System

  1. Open Ad Stream Tags
  2. Outdated implementation
  3. Blocking document.write
  4. Inline Script Tags
  5. Ugly deployment structure
  6. Replicated code everywhere
  7. Limited Content Targeting
New Ad System

  1. Google Publisher Tags
  2. Modern development tools (console)
  3. Asynchronous Loading
  4. IFRAMEs injected to DOM
  5. Google Tag Manager
  6. Single code source
  7. Automated targeting with Meta tags

Our new DFP-based system is a step up from where we were previously. It’s better organized. It employs meta tags from our CMS for content targeting. The new code is also asynchronous, injected into the page by Google Tag Manager, with fewer HTTP requests to boot.

New Targeting System

Our new system targets single URLs or groups of content based meta tags included in the header. Our single Javascript tag executes, examines the page’s meta tags, and forms a targeted ad request based on those tags.

Example META Tags:

Why implement another tag standard? What about Opengraph Tags?

It was tempting to use many of our existing vendor-specific tags, such as Opengraph. We probably could have, and it’s possible that we might in the future. However, this is internal standard follows our own set of business rules, not the whim of Facebook and Twitter.

One Javascript tag to rule them all

The following Javascript library is loaded asynchronously via Google Tag Manager. I had to re-learn how to write Javascript without jQuery for this instance, so any suggestions for polish are welcome.

Meta tags are processed by the method this.getTag("mpr-content-topic"), then normalized and pushed to the ad-loading object.

Debug Tools

Targeted requests are formatted by the library in a request like this:

ibs.mpr.news/health_care
ibs.mpr.news/the_daily_circuit
ibs.mpr.news/issues/the_daily_circuit
ibs.mpr.news/health_care/the_daily_circuit

Our library comes with a couple of tools for debugging ad slots and requests. First, the global gptadslots tells us about our targeted request:

Ad Slot Debug with Chrome Devtools

We can also take advantage of the Google Publisher Console to gain an understanding load times and other performance metrics. For example, see the Page Request tab:

adslot debug with publisher console 1

Ad Units Console:

adslot debug with publisher console 2

Perceived Performance Gains

It’s a challenge to precisely measure performance gains of the new system. I can say for sure that perceived load time has been greatly improved by asynchronous loading of ads. Google Publisher Tags come with the added benefit of single request mode to reduce the number of HTTP requests required to render ads. Things feel faster.

Measurable Performance Gains

I have been able to measure improved DOM rendering time after the new system went live. However, I can’t tell if the change is due to ads loading in iframes yet or not. Time will tell. We will be working to improve page load times later this year, using Pingdom Real User Monitoring to measure our progress. Here’s one report:

Pingdom  Aggregate Render Times

Summary

Overall, the system launched with an improved developer toolset, more options for revenue growth, and for our readers, improved page load times.

For more on the jargon behind advertising platforms, see this Metafilter article, What is the difference between DART, Open Adstream, and AdSense?.

Hat tip to Will Johnston and Will Lager for all their help on migration day.