GPT and more

And exploration and explanation of Google's GPT tags, IMA SDK, and related subjects.

Presented by Joe Hohertz / @joehohertz

Welcome

What's Ahead?

  • Some introductions
  • A presentation on Google's ad delivery systems
  • A break. :)
  • Addressing your project needs.

Audience

  1. Developers
  2. Users (IE: Ad Operations)
  3. Project managers
  4. Other interested parties

Introductions

Who am I?

Joe Hohertz

  • Started career in networks/systems 17+ years ago
  • Switched focus to development projects 8 years ago
  • Specialty in open systems
  • Have led teams throughout my career

What have I done?

Most recently?

  • Provided technical leadership for development project at Rogers Digital Media for 5+ years
  • Managed development department for 2+ years
  • Personally handled ad implementation through 2 complete technology changes throughout time @ Rogers
  • Have been involved in all aspects including managing major platform relaunches for nearly every Rogers Media brand

What have I worked on?

Who are you?

Tell me a bit about yourself, and what you would like to come away with today from this session.

How you can help me

  • What is your local environment?
  • Understanding ongoing efforts
  • Understanding dependencies
  • Understanding priorities

Let's get started!

Migrating from old DFP

A nostalgic look....

.... or why you really want this upgrade

Desktop Page Tags

Worst case

  • "Just paste this thing in."
  • You do. And keep doing so.
  • End state: a heap of tags in your content

Desktop Page Tags

Usual best case

  • parameter based URL builder that writes in a script tag
  • CMS manages signals used for pages via various metadata


		

Some big limits

  • Shallow zone depth
  • Severe limits on URL length limits signals that can be sent with request
  • Almost no way to async ads without ugly hacks that cause issues
  • Video companions requires custom browser code, doesn't integrate well

Mobile Tags

  • Architecture was developed when Nokia and PocketPC Phones were the state of art in mobile web
  • Image-in-Anchor, like a noscript tag portion
  • Video in web support non-existant

Signals

  • A heirarchical "zone" structure
  • A very limited number/amount of key/value data via GET variables.
  • Limits are on total URL length, you have to manage to ensure no one param pushes past global limit

Key features of the new Google ad system

  • A real, modern, javascript API for ad placement
  • Mobile / Desktop convergence
  • Real async loading support
  • Built in support for video companions (requires IMA3)
  • Aggregate ad calls (All units in one call)
  • Deeper zones, but otherwise conceptually the same.
  • Vastly improved key/value handling.

We'll dive into this all shortly.

New platform, new quirks

  • Async brings on complexities which can require fixes to ad creatives
  • Aggregate calls can require surprisingly sophisticated setup, depending on requirements
  • And there can be bugs, usually seen in certain, notoriously buggy browser, which shall remain unamed...

Async vs. Sync

  • Async mode helps solve many of the traditional pains in serving ads.
  • But brings some of it's own
  • It's the creative that's the problem in general
  • Remember all that document.write() old ads are famous for?
  • Old habits are hard to change.
  • Async mode emulates document.write() to support old creatives.
  • This works for simple cases, but falls down for the pathological cases
  • Get testing for creative up EARLY to avoid headaches.
  • Be ready to spend time chasing creative bugs.

We will focus mostly on aync mode, due to the strong advantages is brings. It's worth fixing the creative bugs to get these gains.

Using async vs. loading async

  • You can use GPT async, while loading it sync
  • If you're loading GPT, followed by your own code which wants to call GPT right away, it can avoid some complications. (Mostly on buggy browsers)
  • There's another way around that problem, but it's not necessarily supported
  • We'll cover "creative" uses of GPT like this at the end.

To load sync, just drop this from the initialization code:


gads.async = true;  // or set to false
		

More on initializing in a moment.

Single Request Architecture (SRA)

  • All ads declared in one call
  • All ads filled in one call
  • Ads later placed via display calls
  • Ad people love it because it helps reliability of:
    • Impression counts
    • Ad relationships (takeovers, above fold, etc.)
  • However...

The challenge of SRA

Your ad initialization looks like this:

  • Set variables in header (zone, other targetting)
  • Ad wrapper if you have one gets initialized
  • This gets included in global page templates

And you have no inputs as to what pages might need what ads.

How to handle SRA

A few options:

  • Require uniform ad sets for all pages (not very flexible)
  • Create some named sets of fixed units that can be selected (can be enough for many cases)
  • Create some advanced ad code in your page composition (allows infinitely variable ad setups)
    • Requires your template system allow multiple passes.
    • First ads are declared, then your header has knowledge needed to make the SRA call
    • There's a variety of other ways to handle this
    • What's best depends on your page renderer is capable of
  • Find a least common denominator of units to call via SRA, add others dynamic/async.
  • Ignore it, if only for the short term while CMS/template advancements are tackled.

Video / Companion Ads

  • Video ads now require use of IMA3 SDK
  • You get nicely integrated companion support in GPT in return.
  • It is possible to use VAST2 directly
  • But without the magic of GPT companion support
  • Get IMA3 support in your flash players ASAP
  • Make sure your player will take base ad URL from the flash variables for the most flexibility

Looking at the code

GPT Loading, async mode


var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
  var gads = document.createElement('script');
  gads.async = true; // can disable to LOAD sync, but use async mode
  gads.type = 'text/javascript';
  gads.src = '//www.googletagservices.com/tag/js/gpt.js';
  var node = document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(gads, node);
})();
		

The command pipeline

The first two lines are the most important for async mode


var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
		
  • Closures get pushed onto googletag.cmd
  • The GPT code takes these in the order added and runs them
  • Allows for deferred execution
  • Everything can queue up before GPT is ready
  • You can slip your own initialization into here too
  • Every call to a google command in async mode has to send it via this pipeline

GPT Loading, sync mode


(function() {
  var useSSL = 'https:' == document.location.protocol;
  var src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
  document.write('');
})();
		

There's that document.write()...

Moving along, from here, all samples will be for async mode, with some notes for sync mode where applicable

Defining AdSense parameters

If you use this, and want to set overrides, do so before defining slots.


googletag.pubads().set("adsense_background_color", "FFFFFF");
		

Defining ad slots

If using SRA, slots must be defined prior to enabling services


// define an ad slot.
googletag.cmd.push(function() {
  // parameters:
  //  string: '/network/zone'
  //  array: one or more pairs of [x,y] dimensions
  //  string: the id of the div containing the ad
  var adSlot = googletag.defineSlot(
      '/6062/video-demo-preload',
      [728, 90],
      'adSlot1Div');
  // can set these per-ad or as page-wide
  adSlot.setTargeting("gender", "male")
  // if this is to be a companion ad, add it to the companion service
  // adSlot.addService(googletag.companionAds());
  adSlot.addService(googletag.pubads());
});
// define as many more slots as needed
		

Defining page-level targeting

Define global key/values for all units on the page


googletag.cmd.push(function() {
  googletag.pubads().setTargeting("topic","basketball");
  googletag.pubads().setTargeting("tags",["basketball", "raptors"]);
});
		

Other early setup calls


googletag.companionAds().setRefreshUnfilledSlots(true);
		

If the video ad calls define no companion, refresh the slot with a regular ad


googletag.pubads().enableSyncRendering();
		

If you want sync mode, you have to ask for it here.


googletag.pubads().enableSingleRequest();
		

If all slots for the SRA call are defined, enable it here

Enable services

Once you've called all the setup functions, enable it:


googletag.enableServices();
		

Show the ads in your page


Non-SRA ads

To place a non-SRA ad, simply move the defineSlot call down into the div, just before the display call, like so:


Giving a slot static HTML preload

Used for companions, on click-to-play player, with no availablity of a scheduled pre-load ad. Specified HTML will fill the area until an ad replaces it.

re class="fragment"> googletag.cmd.push(function() { var adSlot = googletag.defineSlot( '/6062/video-demo-preload', [728, 90], 'adSlot1Div'); adSlot.addService(googletag.companionAds()); adSlot.addService(googletag.pubads()); // new parts here and below: adSlot.addService(googletag.content()); googletag.content().setContent(adSlot, '

Custom content in ad slot.

' ); });

Other things to account for / tips

  • All ad slots registered to the companion service must be unique in dimension
  • Ads registered to the companion service will not load until a video loads, UNLESS something has been scheduled to fill as "preload"
  • Companions in sync mode add other complexities not yet covered here
  • You can NOT mix sync calls once async mode is set
  • You CAN make non-SRA calls after your initial SRA call (IE: dynamic insertions)
  • Auto-starting video players add complexities not yet convered here

Debugging GPT tags

To bring up the GPT debug console, append this to your URL:


url = u "?google_force_console=1"
		

GPT Tag Resources:

That's 95% of GPT

  • There's other functions/ways to use it
  • What we've covered is the best practices that will cover most needs
  • The other 5% is edge cases and/or things best avoided

Video ads and the IMA3 SDKs

The family of IMA3 SDKs

The family of IMA SDKs:

We'll explore some of these, but first:

The general business of video ad serving

  • All of these SDKs share a lot in common
  • They're all trying to solve the same problems
  • They use the same kind of DFP call, which is NOT GPT, but a VAST2 XML type
  • So before looking at any one SDK in detail...
  • First, we'll go over the parts that are the same

What the IMA DOES address

  • The making of a VAST2 XML call
  • Parsing the response
  • Playing the creative, triggering GPT companion slot fill
  • Making the many status callbacks requested in the VAST2 response
  • Some handlers for overlay type ads on content
  • Providing various event hooks for player integration including:
    • Ad system setup and request state updates, error handling
    • Transitioning controls from ad and content modes
    • Time remaining updates to let the user know when content begins
    • Syncing common state between ad player and content player (IE: volume, full screen state)

What the IMA DOES NOT address directly

  • Adding signals to your ad call.
  • Where in your video to make the ad call(s)
  • How/where to get the VAST2 XML call URL from
  • How a vendor will choose to integrate it and expose it

A simple VAST2 XML URL builder


// still doing an "ord" like value here
var correlator = Math.round(Math.random() * 100000000);
// parameters
var video_size = "400x300";
var companion_sizes = "300x250,728x90";
var video_zone = "/6062/video-demo";
// build the URL
var vastURL = "http://pubads.g.doubleclick.net/gampad/ads" +
 '?sz=' + video_size + 
 '&iu=' + encodeURIComponent(video_size) + 
 '&ciu_szs=' + encodeURIComponent(companion_sizes) + 
 '&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1' +
 '&url=' + encodeURIComponent(window.top.location.href) +
 '&correlator=' + correlator;
		
  • This is a base URL, with zone, but without any other signals
  • IMA->player integration adds parameters to this base
  • State cues can be added (IE: is this a pre-roll or a post-roll call?)
  • You can allow some base key/vals be set here as well

Looking at the VAST2 XML response structure

The response is to large to include here. An overview of it's contents, then we'll look at certain parts

  • A header, containing error and impression callback URL
  • A block of video creative(s), each containing:
    • The creative's duration
    • Over a dozen status callbacks, covering progression at quartiles, transport use, etc.
    • The click URL
    • Media file(s) (multiple formats/renditions can be expressed for runtime selection)
  • A block of companion ads each containing:
    • Dimension of companion ad
    • An ad resource definition (there can be image, script, flash)
    • Click URL
  • A block of extension declarations

This will help debug scheduling errors on companions

  • For the most part, you can ignore the XML, as IMA is handling it for you.
  • Where looking is usefull is when you have a video ad play, but...
  • You don't see the expected companions
  • Missing companion scheduling is easy to spot when you know where to look

Other gotchas

  • Due to how VAST expressed companion sets, you can only have one companion ad of any given dimension. (but as many unique dimensions as you want)
  • It's easy to have missed URL encoding mess up your day when building VAST2 URLs
  • You're back to using GET parameters for key/value pairs, the improvements in GPT aren't available here

IMA3 Flash SDK

Using a vendor's player?

  • Most vendors will have IMA3 support by now
  • Use their connector
  • This may involve some back and forth if you're the first one moving to it as bugs get worked out
  • Flash best for cases where DRM forces you there

Using open source player bases?

Most have IMA3 plugins available

  • OVP
  • OSMF
  • Flowplayer

Something else?

  • You're doing your own IMA3 integration, custom
  • Look to the samples from Google, and the open player plugins for guidance
  • Most folks shouldn't need to go here, are covered by using vendor or open player base

IMA HTML5 SDK

The holy grail....

  • One day, it might work everywhere...
  • Very attractive for unification of desktop/mobile
  • Strongly indicated for "responsive" designs
  • Doesn't (yet) get you everywhere...
  • iOS/Android tablets supported, phones: not yet
  • Only usable if DRM is not a requirement (currently)

IMA Mobile Beta SDKs

Use the betas?

  • Confession: I am not a mobile app guy
  • Some folks may find value skipping these
  • But you'd lose the non-linear creative support
  • I looked over the docs, the interface seems clean
  • Mostly handlers/glue to the player for the items mentioned in general discussion

Last thoughts on IMA

IMA Resources

THE END

BY Joe Hohertz / joe.hohertz.org