I am here now. Sorry for the late respond. This post will be updated as I write my answer to explain.
Update 1:
What did you exactly add in the html head?
I just filled all the html and scripts in an empty rectangle on top of my layout. See the screenshot below. I know the script is a bit sloppy and could be rewritten. But I think my html/css/js level is to low to see how to rewrite it.
Info: I will add the code in a code section here below for you to copy.
Why did I do it like this?
With this empty rectangle I can concentrate on the design and animation before I lay a CTA on top. What you still must do is manually update the width and height of the href <div>
. So it fits your banner. I like this workflow. It came with me from Flash (couch Animate CC).
Screenshot:
Code:
// Clickable href div. Manually change the size to fit onces banner
<a id="clicktag" href="" target="_blank" style="width:300px; height:600px; display:block"></a>
// This is the script that get your set clicktag ID to work with the getParams script
<script type="text/javascript">
var clickTag = "";
window.onload = function () {
var click = document.getElementById('clicktag');
click.setAttribute('href', getUriParams.clicktag);
// click.href = clickTag;
};
</script>
// Here is the getParams script set by Google/Apple/IAB
<script type="text/javascript">
var getUriParams = function() {
var query_string = {}
var query = window.location.search.substring(1);
var parmsArray = query.split('&');
if(parmsArray.length <= 0) return query_string;
for(var i = 0; i < parmsArray.length; i++) {
var pair = parmsArray[i].split('=');
var val = decodeURIComponent(pair[1]);
if (val != '' && pair[0] != '') query_string[pair[0]] = val;
}
return query_string;
}();
</script>
How to test the banner and clicktag:
Once the code and CTA is in place you can preview your banner in a browser. For instance:
eg.: http://www.previewlink.com.au/yourbanner.html
Once you see that you can add the following behind the html: ?clicktag=
eg: http://www.previewlink.com.au/yourbanner.html?clicktag=
This refers to ?
get parameter inside the JS that gets loaded from a CDN and steers your CTA button to grab the URL you placed behind the =
operator.
Once that is set you add your test website you want. So after the =
write http://www.google.com.au
and hit ENTER.
eg.: http://www.previewlink.com.au/yourbanner.html?clicktag=http://www.google.com.au
If you now click on your banner it should open a new window/tab and show the Google website.
And with that your banners clicktag ist working correct.
Hope this explanation helped. I also could help you in making a 3 times loop with a stop at an specific time frame. In Germany that is needed so the banner doesn’t stop at the end with no information. See the following link:
http://hmh916007908.businesscatalyst.com/index.html
Produced in Muse responsive. Mobile banners in Photoshop and the Halfpage in Hype 3.5.
@ Daniel: I still owe you an email with a bundle of online banners and documentation. I have not forgotten.