But this must be at the end of the index.html. And this does not work with the HTML header. How can I get rid of this problem without changing it manually in the index.html?
First a small note -- In the code above you have the final line as <script> but undoubtedly this should be a closing tag and instead be </script>.
Hype doesn't currently let you setup the whole HTML page in the same way it does allow to modify the Head HTML. There are two main methods that can help you work around this:
You can do an export, modify the head html, and then when exporting again, uncheck Also save .html file. This means that it will not be overwritten on future exports. (However, if there's anything that you do which might have a .html change then you will need to re-export it and then re-make the modifications).
You can make an Export Script that automatically modifies the index.html file during export. This is generally how Hype deals with conformance to ad systems. There aren't any current export scripts that match the modifications that you need to make, though it won't be too hard to take an existing script and modify it to do this (at least, not too hard if you are familiar with Python). If not, you're welcome to send us links to your ad system and specs -- we are usually happy to put these together pretty quickly!
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
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.
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:
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
Move the AxelSpringer.hype-export.py file into the com.tumult.Hype4 folder
@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)…
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.
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.
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.