Clicktag problem in index.html

Thank you for the explanation and support. I will send you a pm.

What we normally do is change the exported html in the end.

Here you see a basic exported Hype document:

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>Standard</title>
	<style>
		html {
			height:100%;
		}
		body {

			margin:0;
			height:100%;
		}
	</style>
	<!-- copy these lines to your document head: -->

	<meta name="viewport" content="user-scalable=yes, width=1280" />

	<!-- end copy -->
  </head>
  <body>
	<!-- copy these lines to your document: -->

	<div id="standard_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="Standard.hyperesources/standard_hype_generated_script.js?52699"></script>
	</div>

	<!-- end copy -->
  </body>
</html>

What we add after the export is the following based on Germany's IAB Clicktag Principle (page 17).

In the head region:

<!-- ? setTimeout + DOMContentLoaded -->
<script>
    var hypeScriptSrc = "./*_hype_generated_script.js";

    document.addEventListener("DOMContentLoaded", function (event) {
        window.setTimeout(function () {
            var headElement = document.getElementsByTagName('head')[0];
            var scriptElement = document.createElement('script');
            scriptElement.type = 'text/javascript';
            scriptElement.src = hypeScriptSrc;
            headElement.appendChild(scriptElement);
        }, 1000 /* 1 second delay */);

    });
</script>
<!-- ? end setTimeout + DOMContentLoaded -->

In the body region:

<!-- ! change the main div into an <a> tag, add href=void and target=_bl -->
<a id='*_hype_container_name' href='javascript:void(0)' target="_blank" class="HYPE_document">
    <!-- Copy around the main DIV -->
</a>

and at the end of the html body region:

<!-- * OVK/IAB standard clicktag -->
<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('*_hype_container_name').setAttribute('href', getUriParams.clicktag);
</script>
<!-- * end OVK/IAB standard clicktag -->

To test the clicktag: Enter this Query in the browsers URL, after the banners index.html.

Clicktag Query Test in the browser: ?clicktag=https://www.google.com

Example:
index.html?clicktag=https://www.google.com

4 Likes

In the end it will output the following html:

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>Standard</title>
	<style>
		html {
			height:100%;
		}
		body {

			margin:0;
			height:100%;
		}
	</style>
	<!-- copy these lines to your document head: -->

	<meta name="viewport" content="user-scalable=yes, width=1280" />

  <!-- ? setTimeout + DOMContentLoaded -->
  <script>
    var hypeScriptSrc = "Standard.hyperesources/standard_hype_generated_script.js";

    document.addEventListener("DOMContentLoaded", function (event) {
        window.setTimeout(function () {
            var headElement = document.getElementsByTagName('head')[0];
            var scriptElement = document.createElement('script');
            scriptElement.type = 'text/javascript';
            scriptElement.src = hypeScriptSrc;
            headElement.appendChild(scriptElement);
        }, 1000 /* 1 second delay */);

    });
  </script>
  <!-- ? end setTimeout + DOMContentLoaded -->

	<!-- end copy -->
  </head>
  <body>
	<!-- copy these lines to your document: -->

	<a href='javascript:void(0)' target="_blank" id="standard_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<!-- <script type="text/javascript" charset="utf-8" src="Standard.hyperesources/standard_hype_generated_script.js?52699"></script> -->
	</a>

	<!-- end copy -->
  <!-- * OVK/IAB standard clicktag -->
  <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('standard_hype_container').setAttribute('href', getUriParams.clicktag);
  </script>
  <!-- * end OVK/IAB standard clicktag -->
  </body>
</html>

Added the file:
index_exported_iab.zip (1.4 KB)

4 Likes

Hope this helps.

3 Likes

Hi Bendora, thanks a lot for your support. Jonathan took care of the problem and wrote an export script which I still have to test. I think you already had the pleasure with Media Impact from Axel Springer. If the script works it would make things easier...not only for me.

2 Likes

I have not read @jonathan that is writing a script.

From a DM thread I had simultaneously put together an export script for Axel Springer. I haven't publicly published it, since I would like testing first.

It looks like it is relatively similar to your solution in what it outputs (though does add a target parameter as was specified, and uses the standard hype script loading).

You're welcome to give it a try and let me know if it would work for you, or if I should include some of your instructions to make it more complete. The instructions to try will be:


  1. Download the export script from:
    https://raw.githubusercontent.com/tumult/hype-export-scripts/AxelSpringer/AxelSpringer/AxelSpringer.hype-export.py
    (you may need to hit option-return in the browser to get the file to download)

  2. Open the /Applications/Utilities/Terminal.app and enter in this command:

    open ~/Library/Application\ Scripts/com.tumult.Hype4
    

    This will open the Applications Scripts folder; alternatively you can get to this via Hype's Preferences > Exporting > Show Export Scripts Folder in Finder

  3. Move the AxelSpringer.hype-export.py file into the com.tumult.Hype4 folder

  4. Back in the Terminal, enter this command:

    chmod 755 ~/Library/Application\ Scripts/com.tumult.Hype4/AxelSpringer.hype-export.py
    

    This will give the export script permission to run.

It should be installed now. In Hype, you should be able to choose the File > Export as HTML5 > AxelSpringer… menu item.


In Germany they want the Banners to load after the main DOMcontent is loaded and then also add a setTimeout of 1 sec. after it.

I will give it a try. Would mean a lot. A whole lot.

@Bendora You can just use the template provided and add what ever you need. Like the delayed load intent. Respect that you haven’t been using an export script until now. The script provided and the sample script on GitHub have the function to inject code at certain spots in the HTML. As an alternative you can also use Hype Template Genie to replace your default template if you only build banners.

An export script is a bit more complicated but also more powerful. BTW you can also move the def (Python function) used in the example provided by @jonathan to replace portions of the HTML into the modify stage to use local variables without worrying about local scopes in Python as they can get involved. Also, it is all about the correct indentation levels with Python, so use a good text editor.

Also, if you launch Hype using Terminal you can get really easy debugging feedback over Standard Out (stdout, hence the terminal itself)…

1 Like

I have received feedback from MedieImpact (Axel Springer). The data is perfect and nothing needs to be changed in relation to the clicktag.... I hope anyway, because it is always dependent on the respective administrator at MedieImpact. I have already experienced all sorts of things. But I assume that everything is okay.
This makes it much easier and the button over the entire banner is also no longer necessary.

A big thank you goes to @jonathan for the quick help and the creation of the script. Great work.

@Bendora
Do you mean the polite-download with "to load after main DOMcontent"? I think this only comes into play when the data size of the banner is over 200KB...but I'm no expert.

2 Likes

I always build it into the banners. Below 200kb or above. Just standard.

Happy it helped. And yes I also experience different QA members on different marketer or adserver. Some give it an okay other find problems in your banner that you didn't even know they where there.

1 Like

A post was split to a new topic: Export Script Variable Substitution

2 posts were split to a new topic: IAB Polite Ad Export Script

Do you know for which Ad networks this will be required? As soon I'm going to launch a few big campaigns in Germany.

The IAB Clicktag script is a standard script used by IAB served Adservers. @jonathan has now created one Export Script to be used directly in Hype.
Saves some of us Banner/Creative builders a lot of time outside of Hype. Where we normally would manually build in these Clicktag scripts.

We mainly use em here in Germany. I think MediaImpact.de here in Germany uses the IAB Clicktag.
There are some direkt websites that have their own Adserver contract and would also need an IAB Clicktag. But I don't have a complete list.

I also don't know how it is in the Netherlands. Haven't worked in the Netherlands since 2005. Back then the world was flash.swf. All that can only be found on the online museum called Archive.org.

2 Likes

Hey everyone. I have the same issue. Also DE but the code is different. Would love some help with this. Thank you so much!

https://techspecs.iqd-ao.de/en/index.php?title=HTML5

@Rasmus
use the AxelSpringer Export-Script from Jonathan. The specifications there are identical to yours. So they should work as well.

2 Likes

I didn't realize that. Thank you that's awesome!

2 Likes

I've moved the AxelSpringer export script into production on the export scripts page and made a package installer for it. You'll want to use this version and not the development one.

First delete your existing copy:

  1. Launch Hype
  2. In Hype's Preferences, click the Exporting tab and click Show Export Scripts Folder in Finder
  3. Enter into the com.tumult.Hype4 folder that shows up
  4. Move the AxelSpringer.hype-export.py file into the Trash

Then download and run the installer package:
https://static.tumult.com/hype/export-scripts/AxelSpringer/AxelSpringer.pkg

Let me know if you have any issues. Thanks!

2 Likes