How to change HTML5 ad contents depending on Expander state?

Creative template for DoubleClick for Publishers (DFP) "Expander" has the special method implemented to inform each HTML5 ad used in creative about creative's state.

This method allows creating HTML5 ads which change contents depending on the creative state. For example, play video when creative is expanded and pause a video when creative is collapsed.

There are two possible values for creative's state:

  • visible - sent when a receiver HTML5 ad becomes visible on the screen;
  • hidden - sent when a receiver HTML ad becomes hidden.

HTML5 ads, used in the creative template, are notified about state by JavaScript "postMessage" function. The creative template is sending data in JSON format. All data sent is wrapped by "__geda" variable to prevent data override possibilities by an HTML5 ad.

JSON data sent when collapsed or expanded HTML5 ad is visible:

{"__geda":{"state":"visible"}}

JSON data sent when collapsed or expanded HTML5 ad is hidden:

{"__geda":{"state":"hidden"}}

You can use this JavaScript function in HTML5 ad to read creative state:

!function(a,b,c){var d=a.addEventListener?"addEventListener":"attachEvent",e=a[d],f="attachEvent"==d?"onmessage":"message";e(f,function(a){var d=a.message?"message":"data",e=a[d];try{e=JSON.parse(e)}catch(a){e=null}e&&"undefined"!=typeof e.__geda&&(e=e.__geda,"visible"==e.state?b():"hidden"==e.state&&c())},!1)}(window,
function(){
  // callback when ad becomes visible
},
function(){
 // callback when ad becomes hidden
});