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

Created my first animated banner with a clickable button that clicks through to a web address. All works fine. Supplied to host site and they have told me ‘I must include at least one click tag in your html’ … I am a complete novice so I am struggling to sort this out. I was told the one I supplied meant the link was not trackable. I have looked at the js file and have seen the link amongst masses of code but thats it I am afraid. Any help for a novice would be much appreciated…

Hi @bobvine,

I believe they are looking for a trackable link.

clickTag was born from flash. Used in flash banners for tracking. It’s kinda like an industry standard but of course we are all moving to HTML5 :wink:

I’m not great with javascript so wouldn’t be able to help you there but I’m thinking if they supplied you with the tracking link/code then you could just add that info to your button or place another “invisible” button with the tracking info.

https://tapfiliate.com/knowledge-base/articles/coding-up-html5-banners-for-use-with-tapfiliate/

Here is an article from Tapfiliate (an affiliate marketing company) I found on google. It explains adding clickTag code for use in html5 banners (for use with their system I might add but on brief look it seems quite universal)

Maybe this is what the host site need?

Sorry I couldn’t be more help.

D

Hi DBear

This is great thanks.

They have supplied this code to add in the HTML header which I have done:

<html>
<head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
var clickTag = "http://www.example.com"; </script>
</head>
[The rest of your creative code goes here.] </html>

But this is the bit of code that the button has to use to make that work - and I can’t seem to work out how to put this in using the button feature…

Make sure that your creative uses the click tag variable as the click-through URL:

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>

Everytime I have opened the js file in Dreamweaver and changed the URL link the whole banner stops working …

Any ideas?

Cheers

Bob

Worked it out !

Create banner as normal with clickable button but make the URL something like WWW.REPLACE.COM so it’s easy to spot in the code !

Edit the HTML head and add in:

<script type="text/javascript">
var clickTag = "http://www.whatevertourlinkis.com"; </script>

Then open the ‘…hype_generated_script.js’ file in your preferred editor - I used Dreamweaver.

Over type the URL (WWW.REPLACE.COM) with:

href="javascript:window.open(window.clickTag)"

It appeared twice in my file.

That seems to work - just waiting to hear from the host to see if it meets their specs…

Phew

Bob

Hi @bobvine,

Sorry just got this! Good to see you’ve found a solution for now.

I can’t see the code you put in your previous post. Is there supposed to be some code?

Also, if you reply and add my name with the “@” symbol I will get notified. :wink:

here is a file I made showing you that you can edit the HTML of the button and add your own inline code.

clickTAG_button.hype.zip (14.3 KB)

I used the single link example from the tapfiliate website as the code.

@bobvine,

If you posted html code it needs to be enclosed in ``.
In edite mode for your post, ou can select your code and click the code tag button above. The button is the 6th from left.

Thanks @MarkHunte

Code now appears ! Can you tell I’m new at this … :blush:

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.