Formating ads for OneView ad platform

Advertising
1

Does anyone have any experience in formatting HTML5 ads for the OneView platform? I am going around and around with them trying to format the ad deliverables correctly. I keep hitting new requirements from them after thinking I've met them all.

2

Do they somewhere list requirements? Or have they given you a list?

3

This is what I was given.
I'm pretty sure I've figured out how to meet all of these requirements but the chunk of JavaScript in the exported HTML file seems to be throwing them. I think they are expecting a more traditional HTML file and not one where all of the heavy lifting is done with JavaScript.

HTML5 Export for OneView
HTML5 Export for OneView1186×2944 566 KB

5

The sticking point is the click.through meta tag

<meta name="click.through" content="clickBlock">

The tag points to an svg image with the id of clickBlock but in the HTML file it is written in .js not in html.

code1
code1988×115 68.4 KB

So they are kicking it back because they can't find the html code id="clickBlock" on the page.

6

You can add it manually to your HTML file or have a export script do it for you if this is a regular task.

7

If you've already added the <meta> tag to the Head HTML, then from the documentation it seems like OneView may be doing a parse of the static HTML content by looking for the ID listed in the <meta> tag's content and when the ad runs it may be any injection is done before Hype's code has had a chance to run.

There could be some hacks around this -- for instance you may be able to have a dummy <img> tag that specifies the ID, and later delete it or transfer it into the Hype animation on Scene Load.

I wouldn't know if this would work until tried, and even then it may be fragile. Do you have a technical contact with OneView? If so, it may be good to bring up this issue with them and see if there are better ways to workaround this. We (Tumult) would be happy to assist on the thread or kick off an email if you have some contact info. Feel free to send me a DM.

8

I'm checking on a getting a technical contact at OneView. We work with an intermediary company so I don't have a direct contact.

For my own clarification on how this work. Is the block of JavaScript code at the bottom of the html file used to write, format and animated html on the webpage where the ad appears?

9

Hype typically does an export with three files:

  • .html <- minimal code with a div and references the loader/data file
  • *_hype_generated_script.js <- loader/data file
  • HYPE-NNN.thin.min.js <- runtime that gets loaded and interprets the data to produce animations

more documentation here

From the sound of this, it seems that you might be using an advanced export inline option that puts the *_hype_generated_script.js in the .html file?

Correct. Due to the structures and dynamic nature of Hype animations, its data is stored as a JSON and then interpreted by the runtime to create all the HTML (DOM) structures and animations on the fly.

10

Yes. One of the requirements is that everything, excluding the image files, be contained in one html file. This is the file structure we send as a zip file.

Screen Shot 2021-03-17 at 3.10.02 PM

1 Like
11

Gotchya - that makes sense and is common. In that case what I said stands, it just isn't in the separate file :slight_smile:.

Please let us know if you are able to get a technical contact and we can move forward. We're always willing to help get Hype animations working on various ad systems.

12

Unfortunately, OneView has said that they are not interested in communicating about this issue with anyone. So there's that. :roll_eyes:

I'll keep this thread updated with any developments.

13

That's quite an oof; this doesn't just affect Hype but would affect any type of dynamic content for their platform.

The way I'd attempt to solve it would be to create the <img> tag in the HTML code, and then on the first scene load move it into a Hype element. Basically these would be the steps:

  1. Add a Rectangle that will act as a container Hype element.

  2. Give that a Unique Element ID in the Identity Inspector; we'll call it cta like in their example

  3. Add an On Scene Load action that is set to Run JavaScript with this code:

    hypeDocument.getElementById("cta").appendChild(document.getElementById("clickBlock"));

  4. Add the meta tag to your Head HTML:

    <meta name="click.through" content="clickBlock">

  5. Export the document

  6. In the HTML <body> section (not in the hype container div), add the <img> tag with the appropriate src:

    <img id="clickBlock" src="path/to/image.png">

  7. Try it out to make sure the image appears in the Hype Rectangle. If so, try submitting.

1 Like