Ads: Include at least one 'ClickTag' in your html?

thebrownsquare · February 17, 2016, 1:34pm

Hey, what’s up man? Thanks SO much for jumping in with some info for Germany. I live in Austria, and I’m trying to implement the IAB standard clicktag into a banner through Hype. I’m getting ÜBER confused. What you’re doing here looks super similar, but I’m really, really confused.

So, all of the publishers I’ve worked with here want me to use the Austrian IAB standard: http://www.iab-austria.at/digitale-wirtschaft/technische-spezifikationen/html-5-richtlinie/2-5-clicktag/

I want to have one button at the end that has a clicktag. I have tried this in many ways, but I can’t seem to figure it out. If you have a few moments, and are feeling generous, I would love to have your thoughts.

WHAT I’VE BEEN DOING

I have added the INITIAL script into the HEAD of the HTML. Kein problem.
I can set the ID of a button through Hype, but I can’t seem to set the href to #clicktag anywhere. It only lets me save it into TEXT inside a button, not to the button itself. Is there a way to do this? I tried adding an invisible rectangle over the entire thing and just placing the around everything in the body. I think this MIGHT work (though I’m unsure how to test) but now I can’t have rollovers or anything on the button because this invisible rectangle is above everything.
I set the GET script just before the by editing the HTML after export and including the following

SO I ULTIMATELY HAVE TWO QUESTIONS:

How can I set the ID to clicktag and the href to #clicktag for a button and make this work?
HOW ON EARTH do I test this to see if it work? I see your:

html5banner.html?clicktag=%LANDINGPAGE%

But what exactly do I do with this to test the banner?

I’m super sorry if this is stupid. I have read SO many posts over the last few days and I still can’t really wrap my tiny mind around this one.

Thank you so much for your help and in jumping in there to share. I hope you and yours are doing well!

andrew

Daniel · February 17, 2016, 7:03pm

<script> 
document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
document.getElementById('clicktag').setAttribute('target', getUriParams.target);
</script>

This you would likely need to run ‘On Scene Load’. What it will do is make the defined element (with the ID clicktag) be clickable based on your settings. This would require a pre-existing element with these tags within:

<a id="clicktag" href="#" target="_blank">my text or image</a>

This can be set by editing the Inner HTML of a button, rectangle, or text box to contain this. Once the scene has been loaded, this ID will exist in the DOM and the ‘Scene Load’ function can do something with it.

html5banner.html?clicktag=%LANDINGPAGE%

Perhaps @Bendora can answer this better than me, but my understanding is that this will define the value href value for your clicktag, and allow you test your exits by clicking on the element with the ID clicktag.

Bendora · February 18, 2016, 10:23am

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.

thebrownsquare · March 1, 2016, 2:24pm

@Bendora
I apologize for the late response. I’m just now getting back to this stuff after a long project and never got a notification that you responded. DAMN.

But…

AHHHHHHHHH! (I wish you could be here to see the lightbulb currently sitting atop my brain). I got it working no problem.

I totally just missed that first script. This makes it SOOO much easier than I previously thought. If you were here I would hug you and probably make you really uncomfortable. haha.

I would LOVE to hear what you did for that half-page to make it a 3x loop and stop at a specific time frame!

Again, thank you so much for the reply, the effort and spreading your mind all over the forum.

Vielen Dank!

andrew

thebrownsquare · March 1, 2016, 2:25pm

@Daniel
Thanks so much, my friend. @Bendora got me covered below for exactly the way I wanted/needed to implement. I really appreciate the help!

Daniel · March 1, 2016, 3:58pm

Glad you're all set!

Looking forward to it

Not sure if you're also covered for this, but here's a way to loop a timeline 3 times.

Bendora · March 3, 2016, 2:14pm

Position is key in Hype. I’ve noticed that.

You can drop timeline options on top of each other. But if you position them in the wrong order it will not work. I know there are people who can code a “loop+jump_to_specific_frame” but I found a different solution in Hype.

Here you see 2 actions on top of each other. They have two jobs.

One is looping 3 times.

Two is jumping to a point in your timeline for the vital information as the last frame.
There are 2 actions nested in this one. ‘Jump_to_timeline’ and ‘Stop’.

This is the wrong way. In this order the banner will continuesly jump back on your timeline.

With the loop on top you have the right order for the actions to work correctly. 1st it will play 2 times and 2nd will jump back intime to a specific point you want and STOP.

Hope this helps.

Michi · May 11, 2016, 2:50pm

@Bendora @thebrownsquare
Hey guys,
good to hear that you got the clicktag running.
I also try to add an IAB clicktag (Austrian Ad) to my hype scene, but it doesn't work.
Hope you can help me. I created one HTML Widget and added this code:

<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>

<a id="IAB_clicktag" href="" target="_blank" style="width:300px; height:600px; display:block"></a>

<script>
    document.getElementById('IAB_clicktag').setAttribute('href', getUriParams.clicktag);
</script>

In an empty html-file the script works. I also tried the exact code Bendora used. Both ways it doesn't work in hype. I can't set the clicktag url via ?clicktag=. The href stays "undefined".
I even encoded the URL ( http%3A%2F%2F instead of http:// ).
Do you have any idea what I'm doing wrong? Have you added any kind of preloader for the whole ad? Or did you give the html widget an ID?
thanks alot.

Daniel · May 11, 2016, 3:13pm

You’re going to want to run this in the <head>:

<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>

Place this within a regular rectangle element:

<a id="IAB_clicktag" href="" target="_blank" style="width:300px; height:600px; display:block"></a>

And you’ll need to run this as an ‘on scene load’ JavaScript function:

document.getElementById('IAB_clicktag').setAttribute('href', getUriParams.clicktag);

The window.location.search.substring(1); function is getting the URI of the iframe which represents your HTML widget, not the actual HTML page that the document is loaded in (which is what happens when you run this in a single .html page).

HTML widgets are iframes, so they are a bit more insulated from the outside world. When you run the code you pasted in an iframe, it is being loaded in an HTML page like http://example.com/documentName.hyperesources/iframe-1.html.

Michi · May 11, 2016, 3:44pm

perfect! thanks alot.

Bendora · May 11, 2016, 3:44pm

Give it a try… I will be waiting on a feedback, Michi.

Michi · May 12, 2016, 7:48am

It worked perfectly!

Michi · May 20, 2016, 10:44am

EDIT:

mhhhhh I fixed it. Not sure what the problem was in the first try. But adding an function to the rectangle instead putting an link inside works on Android and iOS.

Sorry I have to pull the topic back up.
The solution works in all browsers, but not on iOS and Android.
I also tried opening the link with an JavaScript and window.open. This also works on desktop, but not on mobile
So i tried to step back:
Rectangle with direct link on it works on iOS
Rectangle containing an link like done above doesn't work.

Also launching the JavaScript function direct from the rectangle doesn't work

what I forgot to mention:
it's like blocking the window. I tried it with function that stops a video and opens an link. The video stops, but the link does not open.

Daniel · May 20, 2016, 12:21pm

Can you try:

<script type="text/javascript">

function clickURLTriggered() {
  window.open('%%CLICK_URL_UNESC%%',
  '_self' // <- Use _self here to open in the same window.
);}
</script>

It may be that that it doesn’t like opening in a new window?

JordYCFC · August 12, 2016, 3:45pm

Hi,

I cant get the click tag to work on a creative supplied by a client, I am trying to upload the creative to google dfp, but it wont work because it says there is no click tag within the code.

I have 2 bits of code as below that I need to get into a html 5 code, but am not sure where to put it?

please please please can someone help?

Code snippet 1: var clickTag = “http://www.ping.com/clubs/ironsdetail.aspx?id=21292”;

Code Snippet 2: onclick=“javascript:window.open(window.clickTag)”

Thanks Everyone!

Daniel · August 12, 2016, 3:58pm

When you upload your code, DFP is looking for one of the Macros which will be replaced when the ad is loaded. Something like %%CLICK_URL_UNESC%%

So you can use this code:

var clickTag = "%%CLICK_URL_UNESC%%";

… and then the actual URL which you are sending people to with the ad will be added elsewhere in DFP.

JordYCFC · August 12, 2016, 3:59pm

Hi Daniel,

Where abouts do I upload this code?

As I have done it with another client where it worked, but the code won’t work with this specific client?

Daniel · August 12, 2016, 4:04pm

I assume that this code is in the head of your document. You can edit the contents of the <head>… of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

JordYCFC · August 15, 2016, 8:55am

Hi Daniel,

I am really struggling to get this to work, are you able to have a look at it for me?

Daniel · July 27, 2017, 3:48pm

5 posts were split to a new topic: Adding Clicktag to DCM banner