The correct way of adding Adform clickTAG with Hype

Advertising
1

The correct way of adding clickTAG for Adform in Hype (v3):

Add this script to Head HTML:

<script src="http://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

To lower file size for restrictions, remove the full, thin and pie scripts from the exported HTML folder.
Upload the thin script to an external server of your choice. Link to it from Head HTML instead:

<script src="http://your.external.server/projectname/js/HYPE-XXX.thin.min.js"></script>

Create a Rectangle as a button over your scene with Opacity set to 0%. Add an Action on Mouse Click.
Run Javascript. Create a new function called clickTAG():

	function clickTAG(hypeDocument, element, event) {
		window.open(dhtml.getVar('clickTAG', 'https://www.yourlink.com'), 
		dhtml.getVar('landingPageTarget', '_blank')
		);
	}

Create a manifest.json file next to your banner. See more info about this on Adform here*.
Zip it. Upload to Adform. Done!

*Update: Fixed link.

3 Likes
2

One can also upload the zip file and Adform will detect there are scripts and clicktags missing.

It will prompt to add these once the creative is uploaded. Even polite loading images and fallback will be optional to add. The only problem that still remains is the huge .js file Hype generates on export.

We all know IAB is rewriting the rules for html5 banners at this very moment with all the big companies. So the files size will get increased. But at the moment we have to convince the Adservers that our file size will not cost users more data.

3

I would like to update this Article. Things habe changed and it seems Adform Engineers don’t like the .hyperesources.

When I have time I will. Then FakePilot can update his Post to .v4

4

They don’t like the dot or something? They never complained about that when we delivered, but sometimes one of the developers decides something…

In case that is the problem, I would open the whole export folder in Sublime text or Atom and change the folder names to “_hyperesources” instead of “.hyperesources” together with all links to that folder with a Search and Replace All command. 1 minute fix.

5

True.

Update:
This post should also land on Adform forums/faq itself. The current post is not very helpful and still states Hype 2.

Do you want to do this, or shall I?

6

You mean as a link in the comments? You can see on that post you linked to, in the comments, (I’m Mattias Lindberg) – I tried to get them to update it already. But your welcome to giving it another shot! Or, simply as another comment. More credible if someone else does it. :slight_smile:

7

Asking Adform itself. Will give Feedback. Klein Moment.

8

I will be updated by Adform to support Hype better.

adform_support.png725×488 119 KB

9

Is this thread still the recommended format for exporting to Adform?

10

Adform’s own studio mostly integrates their own clicktag uppon uploading a .zip file.
This is only for standard HTML banners. Mobile and other forms will need some tweaking in the head and generate some hype internal functions.

So I would say: Archive it.

11

I do this every day since I create banners for a living.

  1. Export as usual.
  2. Zip the folder.
  3. Go to studio.adform.com
  4. Choose New/upload banner
  5. Category should be Display and Format standard. Add the dimensions.
  6. Adform will ask you to add a clicktag
  7. Add your clicktag link
  8. In the top right. Choose Export and a Zip file will be downloaded
  9. Done. The Zipfile you just downloaded has all the script fixed for you.

https://studio.adform.com

56
Screenshot 2019-02-14 at 20.34.56.png890×223 12.6 KB

1 Like
12

This is more of a workaround than a solution.
If your client need an additional clickTag or a direct link due to legal reasons, this solution falls apart.

I have one such client, but luckily they are using a different Adserver that uses a more standardised method.

Please, it would be on the benefit of everyone if there was an Adform export script or a proper documentation on how Adform should be integrated inside Hype.

13

Ok guys, I found a way to correctly do this (March/2019):

Add script to Head HTML:

<script src="http://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

Create a script that will run On Scene Load (so this is loaded after clicktag object is created):

function clicktagscript(hypeDocument, element, event {
    clickTAGvalue = dhtml.getVar('clickTAG', 'https://www.yourlink.com');
    landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
    }

Then create a function that will be activated On Mouse Click (Tap) on wherever you want to add a clickTAG (call to action or transparent layer):

function clicktag(hypeDocument, element, event {
    window.open(clickTAGvalue,landingpagetarget);
    }

Export (I recommend the Doubleclick DCM script), add the manifest.json file per Adform Specs and it will work without any errors.

I just validated this method with Adform Support.

4 Likes