Guille Filipich edited this page May 29, 2018 · 13 revisions

Rich Media, Debug and Modern DFP Implementations

  • script simplifies the use of both Rich Media and display creatives in Double Click for Publishers (DFP).
  • It provides a builder application to help build rich media creatives that work seamlessly in DFP, with no technical coding knowledge needed.
  • It is a high performance solution that uses secure safeframes, for standard websites as well as for single page apps and PWAs.
  • It can create debug screens for both desktop and mobile web, that work on actual mobile devices and can be used by non technical users.
  • can be implemented with standard DFP tags (light version), full new modern dfp tags (full version) or even no tags (for real).
  • Debug only can be implemented in any website in less than one minute.


  • This is not an official Google product, and it is also not officially supported by Google. versions



Declarative tagging

Just add the divs to your page. It works with React and many other frameworks out of the box.


Separate display logic from ad logic

adsconfig.js configuration file or GTM tag:

var ads = { 
  adTypesMap: [
     { deviceType: "desktop", type:"box",  sizes: [300,250] },
     { deviceType: "desktop", minWidth:1024, type:"box",  sizes: [[300,250],[300,600]] },
     { deviceType: "mobile", type:"box",  sizes: [[300,250]] },


Declarative map for automatic device type and size detection

{ deviceType: "desktop", minWidth:1024, type:"box",  sizes: [[300,250],[300,600]] },
{ deviceType: "mobile", type:"box",  sizes: [[300,250]] },


PWA and SPA (Progressive Web Apps and Single Page Apps)

  • library is prepared to serve in single page and pwa environments, out of the box. Just call ads.ready(); any time a page is refreshed. Googletag library keeps resident. The cleanup of the previous slots is done automatically by This is necessary to prevent js errors and memory leaks.


Lazy loading

In adsconfig.js, just add the option:

ads.lazy = true; takes care of scroll positioning and calling gpt as necessary, as single request and keeping correlation for roadblocks. There is no need of extra code from the website.


Custom ad slot ordering

  • In pages with many creatives, define a special order to render them.
  • Instead of rendering first the lefts, then the mids and finally the rights, allows to define a custom order, so unfilled slots remain all at bottom of page.


Infinite scrolling

On new pages, just call: ads.ready({slots: [“newSlotA”,”newSlotB”] });


VAST and VMAP url builder

Just call:

ads.getVideoURL(“vast”, “preroll”)


Light Version

  • All features detailed below are available with both the full version library, and the light version that can be implemented in existing, (normal, with js) dfp implementations.



  • All Rich Media formats are designed to run inside safeframes, to increase site security.


User created Rich Media formats:

  • is an open source library, enabling publishers to create their own ad formats.


Built in Rich Media formats with builders:

  • Builders convert the creatives into a zip file, that can be trafficked as a standard HTML5 in DFP.


Working examples:

Try the Full Version and Light Version


Support and new ideas:

  • Open a Github issue, we'll do our best to solve your request asap.
  • Please remember is given for free as is, with no contractual support. As it is not a Google product, it has no Google official support.


Request for new creative types:

  • Open a Github issue with your request, adding a link to a plain no-dfp working example. We'll do our best to solve your request asap.


<!-- enjoy -->
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.