Simplify your DFP business logic.
$ bower i harmony $ npm i harmonyjs
Harmony is provided as both a CommonJS module via
npm install harmonyjs
and as a JS global variable via
bower install harmony.
Table of Contents
- Setup Guide
- Example Setup
The original purpose behind the creation of Harmony was to provide a lightning-fast JS API that could ingest a block of JSON ad configuration to set up ads for a page. Beyond that, however, there are many utility methods that simplify DFP ad code and give you powerful tools to build dynamic page content around ad performance.
There is also built-in ad logging and metrics provided via the Lumberjack library.
Full docs are available here, but let's go over some of the best parts of Harmony. If you don't see support for something you are trying to do, chances are it's in there somewhere! Just give the docs a quick scan.
There are two ways to load Harmony:
as a global
as a CommonJS module
var harmony = ;globalconsole;
Load ad config en bulk.
Have your backend generate configurations based on admin settings and keep the components completely agnostic.
var myconf = % generate_ad_slots %;harmonyload;
Attach some callbacks.
Easily attach behaviors based on the ad call, rather than side-effects such as container visibility or size. Harmony lets you code deliberately!
Access your ad data immediately.
Harmony exposes individual slot configuration for pain-free access.
var slot = harmonypossibleSizes = slotsizesslotId = slotidslotAdunit = slotadunit;
You can even directly call DFP slot methods.
var slot = harmonytargeting = slotgpt;slotgpt;
Create and use events.
Harmony features a robust eventing system that will avoid race conditions on even the most complex websites.
trigger events just like jQuery
// System-level events.harmony;// Slot-level events.harmony;
bind callbacks to custom events
GPT events are provided for you
impressionViewable events are handled
automatically for you on each slot.
bind lazy events
Callbacks are eager by default, meaning that they will trigger on binding if the event has already been triggered. If you do not want this behavior you can specify the callback be lazy instead.
clear callbacks for any event
Logging is off by default for performance, but can be easily enabled.
// Enable logging before page refresh.localStoragelumberjack = 'on';// Enable logging without page refresh.harmonylog;
Debug the subsystem.
Logging lets you see what happened and when, so you can focus less on debugging and more on coding.
Get slot performance metrics.
See exactly how long your system takes from setup to ad render. Logging provided with Lumberjack.
Here is an example of a page setup using Harmony and DFP.
How to test and build your changes.
# Full test suite.$ grunt test# Test a single spec.$ grunt test --spec=spec.name
# Full build suite minus autodocs.$ grunt
- Will fail for non-owners.
- Windows only.
- Autodocs are built from
- Remember to update changelog.
# Full build including autodocs, tag, and deploy.$ grunt version:<type>:"<msg>"# Type can be major, minor, patch.