angular-dfp
v1.0.4
Published
Semantic DoubleClick integration with AngularJS
Downloads
100
Readme
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:
- You can define your ad slots using only HTML, which is just plain sweet.
- 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.