jhrockers Posted December 14, 2017 Report Share Posted December 14, 2017 I've done everything I can think of but can't get the Destination URL to work in a HTML5 ad banner I created. The banner is visible and I have tried Asynchronous JS Tag, Javascript, iFrame and even Local Mode, but it still won't work. I need help with this as soon as possible because I have a frustrated client. Quote Link to comment Share on other sites More sharing options...
Josh Posted December 16, 2017 Report Share Posted December 16, 2017 Search for HTML5 + clicktag. This site provides instructions for several creation tools. http://www.html5clicktag.com/clicktag-for-google-web-designer Quote Link to comment Share on other sites More sharing options...
jhrockers Posted December 17, 2017 Author Report Share Posted December 17, 2017 From what I can see, it's there: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>AS_banner_bundle_300x250</title> <meta name="ad.size" content="width=300,height=250" /> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="SplitText.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allstate+Sans:300,400,500,700,900,300italic,400italic,500italic,700italic,900italic&subset=&key=7gw5RZn4zm8X2MRJ" media="all" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ITC+Avant+Garde+Gothic:200,200i,400,400i,500,500i,600,600i,700.700i%7CITC+Avant+Garde+Gothic+Condensed:400,400i,500,500i,600,600i,700.700i&key=7gw5RZn4zm8X2MRJ" media="all" /> <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="common.css" /> <!-- <link rel="stylesheet" href="colors.css"> --> <link rel="stylesheet" href="coop.css" /> <link rel="stylesheet" href="2016-toolkit.min.css" /> <link rel="stylesheet" href="2016-legal-panel.min.css" /> <style type="text/css"> #atAd300x250 { visibility:hidden; } </style> </head> <body> <div id="atAd300x250" class="bgOrange"> <div id="aAd_header"> <div id="aAd_legalCTA" class="aAd-txt--white aAd-txt--xxsmall aAd-txt--upper">LEGAL</div> <div id="aAd_legalPanel"> <div id="aAd_legalTxt" class="aAd-txt--white aAd-txt--xsmall"> Savings vary. Subject to terms, conditions & availability. Allstate Indemnity Co., Allstate Vehicle and Property Insurance Co., Allstate Property and Casualty Insurance Co., Allstate New Jersey Insurance Co. & Allstate New Jersey Property and Casualty Insurance Co.: Bridgewater, NJ. © 2016 Allstate Insurance Co. </div> <div id="aAd_legalCloseBtnTxt" class="aAd-txt--white aAd-txt--xsmall aAd-txt--upper">CLOSE</div> <button id="aAd_LegalCloseCTA"></button> </div> </div> <!-- <a href="javascript:window.open(window.clickTag)" id="clickArea"> </a> <a onclick="ExitApi.exit()" id="clickArea"></a>--> <div id="clickTag"></div> <div id="bgOrange"> </div> <div id="border300x250"> </div> <div id="bgImg1"><img src="bg_image1.jpg" /></div> <div id="bgImg2"><img src="bg_image2.jpg" /></div> <div id="bgImg3"><img src="bg_image3.jpg" /></div> <div id="frame1" class="txtBlue ">Get In<br>on this,<br>Baltimore</div> <div class="message1"> <div id="frame2" class="txtWhite shadow">auto <br/> bundle & save</div> <div id="frame3" class="txtWhite shadow">+home</div> <div id="frame4" class="txtWhite shadow">+moto</div> </div> <div id="bkgReveal" class="bgOrange"></div> <div id="landing_sm" class="txtBlue fade">Ask me how to</div> <div id="landing" class="txtBlue fade"><br>bundle & save</div> <div id="Allstate"> </div> <!-- COOP --> <div id="coop"> <div id="agent_info"> <span class="txtBlue">Harford County</span><br> <span class="txtBlue">Allstate Agent</span><br> <span class="txtBlue">Owen Landis</span> </div> <!-- <div id="agent"><img src="agent.jpg" /></div> --> <div id="btn_cta_coop"> <span id="ctaCopy_coop">contact me</span> <div id="clickTag1"></div> <div id="arrow_coop"> <svg viewBox="0 0 50 50" width="30" height="17" preserveAspectRatio="xMinYMin"><polygon class="logoPink" points="0,0 40,25 0,50"/></svg> </div> </div> </div> </div> <script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"> </script> <script src="banner.js"></script> <script type="text/javascript"> function initEB(){ if(!EB.isInitialized()){ EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd); }else{ startAd(); } } function startAd(){ animation(); } function clickthrough() { EB.clickthrough(); } document.getElementById("clickTag").addEventListener("click", clickthrough); document.getElementById("clickTag1").addEventListener("click", clickthrough); window.onload=function() { startAd () } </script> <script src="2016-legal-panel.min.js"></script> <script type="text/javascript" src="EBLoader.js"></script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Matteo Beccati Posted December 18, 2017 Report Share Posted December 18, 2017 @jhrockers Sorry it's not. document.getElementById("clickTag").addEventListener("click", clickthrough); is not what has been suggested to you. Quote Link to comment Share on other sites More sharing options...
jhrockers Posted December 18, 2017 Author Report Share Posted December 18, 2017 Sorry about that, I changed it as suggested, but now the URL opens up right away instead of when you click on it. Excuse my ignorance, but I'm not 100% familiar with HTML5 yet. This is what I have now: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>AS_banner_bundle_300x250</title> <meta name="ad.size" content="width=300,height=250" /> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="SplitText.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allstate+Sans:300,400,500,700,900,300italic,400italic,500italic,700italic,900italic&subset=&key=7gw5RZn4zm8X2MRJ" media="all" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ITC+Avant+Garde+Gothic:200,200i,400,400i,500,500i,600,600i,700.700i%7CITC+Avant+Garde+Gothic+Condensed:400,400i,500,500i,600,600i,700.700i&key=7gw5RZn4zm8X2MRJ" media="all" /> <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="common.css" /> <!-- <link rel="stylesheet" href="colors.css"> --> <link rel="stylesheet" href="coop.css" /> <link rel="stylesheet" href="2016-toolkit.min.css" /> <link rel="stylesheet" href="2016-legal-panel.min.css" /> <style type="text/css"> #atAd300x250 { visibility:hidden; } </style> </head> <body> <div id="atAd300x250" class="bgOrange"> <div id="aAd_header"> <div id="aAd_legalCTA" class="aAd-txt--white aAd-txt--xxsmall aAd-txt--upper">LEGAL</div> <div id="aAd_legalPanel"> <div id="aAd_legalTxt" class="aAd-txt--white aAd-txt--xsmall"> Savings vary. Subject to terms, conditions & availability. Allstate Indemnity Co., Allstate Vehicle and Property Insurance Co., Allstate Property and Casualty Insurance Co., Allstate New Jersey Insurance Co. & Allstate New Jersey Property and Casualty Insurance Co.: Bridgewater, NJ. © 2016 Allstate Insurance Co. </div> <div id="aAd_legalCloseBtnTxt" class="aAd-txt--white aAd-txt--xsmall aAd-txt--upper">CLOSE</div> <button id="aAd_LegalCloseCTA"></button> </div> </div> <!-- <a href="javascript:window.open(window.clickTag)" id="clickArea"> </a> <a onclick="ExitApi.exit()" id="clickArea"></a>--> <div id="clickTag"></div> <div id="bgOrange"> </div> <div id="border300x250"> </div> <div id="bgImg1"><img src="bg_image1.jpg" /></div> <div id="bgImg2"><img src="bg_image2.jpg" /></div> <div id="bgImg3"><img src="bg_image3.jpg" /></div> <div id="frame1" class="txtBlue ">Get In<br>on this,<br>Baltimore</div> <div class="message1"> <div id="frame2" class="txtWhite shadow">auto <br/> bundle & save</div> <div id="frame3" class="txtWhite shadow">+home</div> <div id="frame4" class="txtWhite shadow">+moto</div> </div> <div id="bkgReveal" class="bgOrange"></div> <div id="landing_sm" class="txtBlue fade">Ask me how to</div> <div id="landing" class="txtBlue fade"><br>bundle & save</div> <div id="Allstate"> </div> <!-- COOP --> <div id="coop"> <div id="agent_info"> <span class="txtBlue">Harford County</span><br> <span class="txtBlue">Allstate Agent</span><br> <span class="txtBlue">Owen Landis</span> </div> <!-- <div id="agent"><img src="agent.jpg" /></div> --> <div id="btn_cta_coop"> <span id="ctaCopy_coop">contact me</span> <div id="clickTag1"></div> <div id="arrow_coop"> <svg viewBox="0 0 50 50" width="30" height="17" preserveAspectRatio="xMinYMin"><polygon class="logoPink" points="0,0 40,25 0,50"/></svg> </div> </div> </div> </div> <script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"> </script> <script src="banner.js"></script> <script type="text/javascript"> function initEB(){ if(!EB.isInitialized()){ EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd); }else{ startAd(); } } function startAd(){ animation(); } function clickthrough() { EB.clickthrough(); } clickTag = window.location.search.substring(1).split("clickTag=")[1]; window.open(clickTag); document.getElementById("clickTag1").addEventListener("click", clickthrough); window.onload=function() { startAd () } </script> <script src="2016-legal-panel.min.js"></script> <script type="text/javascript" src="EBLoader.js"></script> </body> </html> Quote Link to comment Share on other sites More sharing options...
jhrockers Posted December 19, 2017 Author Report Share Posted December 19, 2017 If you go to http://harfordcountyliving.com/ you'll see how the Allstate (the HTML5 one) opens automatically when the website opens. I'm trying to find a way for the link to open when the ad is clicked on. Any suggestions? Quote Link to comment Share on other sites More sharing options...
jhrockers Posted January 2, 2018 Author Report Share Posted January 2, 2018 Hello, any suggestions? Quote Link to comment Share on other sites More sharing options...
Matteo Beccati Posted January 2, 2018 Report Share Posted January 2, 2018 @jhrockers I'm sorry, I can't possibly debug and fix the banners for all the Revive Adserver users. My suggestion would be to hire someone with basic JS / HTML5 skills who should be able to fix the code for you. andrewatfornax 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.