Jump to content

Destination URL not working in HTML5 ad banner


jhrockers

Recommended Posts

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.

Link to comment
Share on other sites

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&amp;subset=&amp;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">&nbsp;</a> 
                <a onclick="ExitApi.exit()" id="clickArea"></a>-->
                <div id="clickTag"></div>
                <div id="bgOrange">&nbsp;</div>
                <div id="border300x250">&nbsp;</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">&nbsp;</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>

Link to comment
Share on other sites

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&amp;subset=&amp;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">&nbsp;</a> 
                <a onclick="ExitApi.exit()" id="clickArea"></a>-->
                <div id="clickTag"></div>
                <div id="bgOrange">&nbsp;</div>
                <div id="border300x250">&nbsp;</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">&nbsp;</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>

Link to comment
Share on other sites

  • 2 weeks later...

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...