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

Thanks @DBear Sorry, I am new to all this :blush:

Thanks for the file - that looks an easier way to to do it than my convoluted effort. I have added the code now so you can see.

The hosts say it works fine so at least now I have two ways of doing it !

Thanks again for you help and patience

Bob

no problem we all have to start somewhere. Glad I could help.

Also you don’t have to include all the code in the HTML editor for the button. You can place the script in the head part too.

D

1 Like

Hey guys… I am trying to get this script to work with a banner. But cannot seem to get the logic in my head to connect the dots.

Templatebanner:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {margin: 0; padding: 0;}
</style>
</head>
<body>
	<div id="adContainer">
		<a id='clicktag' href='' target="_blank">
			<img width="300" height="250" src="./img/mr_300x250_image.png" />
		</a>
	</div>
	<script>
	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;
	}();
	document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
	</script>
</div>
</body>
</html>

And How do I get this into a Hype Document? I thought I could build in all in Dbears ‘home’ button.

Got it working with DBears homebutton-div. Thanks DBear.

For people in Germany working with the GetParameter function: Add this script to a div by double clicking on it. One must still set the Style manual or else the div will end up with 0px,0px on the top left corner.

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

<script type="text/javascript">
    // Compulsory Clicktag block (Single Clicktag)
    var clickTag = "";

    window.onload = function () {
        var click = document.getElementById('clicktag');
        click.setAttribute('href', getUriParams.clicktag);
     //   click.href = clickTag;	
    };
</script>
<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>
1 Like

Can you clarify what ad platform this function is for (and is this required in Germany?)

Hello Daniel,

I will.

This specific ClickTag is used by Media Impact in Germany. It is similar company like Adform, DoubleClick or Flashtalking. It belongs to the Axel Springer Verlag. And most online creatives are stationed on their server. I think it’s an Apple/Google designed GET Parameter Clicktag system they use.

Media Impact writes the following for the h5 specs:
http://www.media-impact.de/specs/mp_spec_werbemittel_de_8139508.html?objekt=7909411

Initial Script:

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

Blank a href div:

<a href="#clicktag" id="clicktag">clicktag</a> 
<a href="#clicktag2" id="clicktag2">clicktag</a> 

Get script:

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

Test the Banner:

html5banner.html?clicktag=%LANDINGPAGE%

%LANDINGPAGE% can be changed to the targetURL.

Example: html5banner.html?clicktag=http://forums.tumult.com/*

2 Likes

Hello @Bendora

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

  1. I have added the INITIAL script into the HEAD of the HTML. Kein problem.

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

  3. I set the GET script just before the by editing the HTML after export and including the following

SO I ULTIMATELY HAVE TWO QUESTIONS:

  1. How can I set the ID to clicktag and the href to #clicktag for a button and make this work?

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

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

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.

3 Likes

@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

1 Like

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

1 Like

Glad you're all set!

Looking forward to it :slight_smile:

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

1 Like

Position is key in Hype. :smiley: 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. :smiley:

Hope this helps.

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

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.

2 Likes

perfect! thanks alot.

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

It worked perfectly! :slight_smile:

1 Like

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 :confused:
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 :frowning:

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.

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?