angular-dfp

angular-dfp

Semantic DoubleClick for Publishers (DFP by Google) integration with AngularJS.

<dfp-ad force-safe-frame collapse-if-empty ad-unit="/path/to/my/ad-unit">
  <dfp-size width="728" height="90"></dfp-size>
</dfp-ad>

Description

AngularDfp allows you to interact with Google's GPT library and DFP services using only Angular directives, effectively replacing any JavaScript to define and customize your ad slots, as you usually would. Also, it was built especially with infinite-scroll and other dynamic content strategies in mind and has out-of-the-box support for it.

What does it solve?

This library solves two problems:

1. You can define your ad slots using only HTML, which is just plain sweet.
2. It solves problems that are sometimes encountered with GPT and Single-Page-Applications (SPAs) by giving you manual control over when to fetch and refresh ads (typically on page redirects within Angular).

Examples

We have defined (nested) directives that effectively cover all the functionality of the GPT library.

Simple Fixed Size Ad

In the simplest case, you'll simply want to define an ad with a fixed size. In that case, you would have a dfp-ad directive, which requires at least one nested dfp-size directive. The dfp-ad directive additionally takes some optional attributes, such as the collapseEmptyDiv option you may be familiar with from the GPT library. For all options, refer to the documentation, which can be generated from jsdoc with gulp docs:

<dfp-ad force-safe-frame
        collapse-if-empty
        refresh='3s'
        ad-unit="/path/to/my/ad-unit">
  <dfp-size width="728" height="90"></dfp-size>
</dfp-ad>

Demo

A live demo can be found at angular-dfp-demo.appspot.com.

License

This project is released under the Apache License. For more information, see the LICENSE file.