ad.js

<div id="container">
  <style type="text/css">
    body, html {
      margin:0;
      padding:0;
    }
  </style>
  
  <script>

  var w = window, 


// Set cookie name
myPubCookieName = "foo",
myPubCookieValue = "",
fetchingCookie = false; // Flag 

//Register the status update listener
if ($sf) {
    try {
        $sf.ext.register(970, 90, status_update);
    } catch (e) {
        console.log("Exception or no safeframes available: " + e.message);
    }
}


function status_update(status, data)
{
    if(status == "expanded"){
      console.log('add has expanded');
    } 
}


function expandAd(){
    var g, ex;

    console.log("Ad expand on load - collapse in 4 seconds");

    if ($sf.ext) {
        try {
            g   = $sf.ext.geom();
            ex  = g && g.exp;
          
              var config = {
        push: true,
        t: 0,
        l: 0,
        r: 0,
        b: 0
    };
            $sf.ext.expand(config);
        } catch (e) {
            //do not expand, not enough room
        }
    } else {
        //api expansion not supported
    }
}

function collapseAd(){
    $sf.ext.collapse();
}

function handle_click(evt)
{
    console.log(evt);
    if(evt == 'click') {
      expand();
      isOpen = true;
     } else {
      collapse();
      isOpen = false;
     }
}


(function(){

 window.setTimeout(function(){
        expandAd();
    }, 1000);
    

    window.setTimeout(function(){
        collapseAd();
    }, 5000);


    var isOpen = false;
    //var clickEl = $sf.lib.dom.elt("ad-open");
    //$sf.lib.dom.attach(el,"click",handle_click);
})();


  </script>

  <a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank"><img src="[%ImagePath%]" style="width:970px;height:250px"></a><div id="ad-open">OPEN</div>
</div>