How to change HTML5 ad contents depending on a state of the Expander?

The Expander, creative template for Google Ad Manager, has the special functionality that notifies HTML banners about a state of the template - is collapsed or is expanded.

That allows banners developers to create more advanced creatives with the better user experience. For example, play a video in a banner only then, when creative is in the expanded state.

The Expander can send two notifications:

• visible - is sent when an HTML banner becomes visible on the screen;
• hidden - is sent when an HTML banner becomes hidden.

The template notifies HTML banners about its state with the JavaScript function "postMessage". A data is sent in JSON format. All data is sent with the variable "__geda" to prevent that other JavaScript functions override this data.

These JSON data are sent when a collapsed or an expanded HTML banner becomes visible:

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

These JSON data are sent when a collapsed or an expanded HTML banner becomes hidden:

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

The snippet of the JavaScript function to get a state of the creative template:

!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
});