Semantic DoubleClick integration with AngularJS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
externs
gulp
scripts
src
.babelrc
.eslintrc
.gitignore
.npmignore
CONTRIBUTING
CONTRIBUTORS
LICENSE
README.md
gulpfile.js
jsdoc.json
package.json

README.md

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.