This document explains how you can implement the clickTag and Expand/Close functions in HTML5 files.

Ways to implement clickTag, Expand/Collapse functions in HTML files

  • Implement the below html5 param script in the <head> section of main/index HTML file
<script type="text/javascript" src="http://c14.zedo.com/utils/zedo-html5param-fn.min.js"></script>

This JS consists of ZEDO’s Click, Expand and Collapse functions. However, these functions have to be called in the HTML file at their appropriate position.

  • For Single file Expandable / Page Pusher ads you need to call the Expand / Collapse functions in the HTML file. Below are the functions:

Expand: zedo_emsg_expand
Collapse: zedo_cmsg_collapse

Make a call to the above functions appropriately where these functions are defined in HTML file.

  • For multiple file rich media ad formats you need to make a call to just the clickTag variable as below at the click event.
window.clickTag

Note: The clickTag function has to be called in the single file HTML also.

You can use the below-secured script for secured websites:

Secured script

<script type="text/javascript" src="https://ss3.zedo.com/utils/zedo-html5param-fn.min.js"></script>

Implementing the above functions varies across different HTML files. Refer to the examples stated below:

1. Swiffy converted HTML file

  • Implement HTML param script in the <head> section
  • Wrap the main div of the HTML with below anchor tag which includes clickTag variable
<a href="javascript: void(window.open(window.clickTag,'_blank'))">
  • And add below function in the swiffy script
stage.setFlashVars("clickTAG="+window.clickTag+"");

For Example:

<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript: void(window.open(window.clickTag,'_blank'))">
<div id="swiffycontainer" style="width: 300px; height: 250px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.setFlashVars("clickTAG="+window.clickTag+""); 
stage.start();
</script>
</body>
</html>

2. GWD HTML file

  • Implement HTML param script in the <head> section
  • If the clickthrough URL is defined in the HTML file inside the click function then replace the clickthrough URL with window.clickTag.
  • If the clickthrough URL is not defined then there should be some function which handles the click event in the HTML file, and there you need to implement window.clickTag variable.
  • Append post messaging codes (expand/collapse) in single file HTML where these functions are defined.

 

For Example:

<script type="text/javascript" gwd-events="handlers">
gwd.handleExpand_buttonAction=function(){gwd.actions.gwdDoubleclick.goToPage("gwd-
ad","expanded-page");zedo_emsg_expand()};
gwd.handleClose_buttonAction=function(){gwd.actions.gwdDoubleclick.goToPage("gwd-
ad","banner-page");zedo_cmsg_collapse()};
gwd.handleClose_reportManualClose=function(){gwd.actions.gwdDoubleclick.reportManualClose("g
wd-ad")};
gwd.auto_WholeunitClick=function(event){gwd.actions.gwdDoubleclick.exit("gwd-
ad","wholeunit","https://www.google.co.in/",true,true)};
gwd.auto_Replay_btnClick=function(event){gwd.actions.timeline.gotoAndPlay("expanded-
page","lable")};
gwd.auto_ExitAction=function(event){gwd.actions.gwdDoubleclick.exit("gwd-
ad","exit",window.clickTag,true,true)};
gwd.auto_Exit_2Action=function(event){gwd.actions.gwdDoubleclick.exit("gwd-ad","exit-
2",window.clickTag,true,true)}</script>

If there is no click handling at all in HTML then you can wrap the main div in the <body> with the anchor tag or define an onclick event in the div like below:

  • <a href="javascript: void(window.open(window.clickTag,'_blank'))">
  • <div id=123 onclick="window.open(window.clickTag);">

3. Click Events defined in JS files

In some HTML creative, the click events are defined in the JS files. You need to append the clickTag variable in JS itself where the click handling is taken care of and implement HTML param script in HTML file only as JS will anyhow make a call to HTML.

For Example:

function fl_ClickToGoToWebPage() {
//window.open("http://www.adobe.com", "_blank");
window.open(window.clickTag, "_blank");
}

Notes

  • These are few examples on implementing clickTag functions in HTML, however, there are many ways in which you can implement click functions and differs from file to file.
  • Implementing the HTML param script in the <head> is a standard form, whereas making a call to click function depends on the file as to where the click handling is taken care.

Contact ZEDO Technical Support team at support@zedo.com with Queries and Suggestions

5 7