Trying to meet ad platform's specifications

I am trying to fit within our ad platforms HTML 5 animated ad specifications.
There are three of them that I'm not sure how to accomplish in Hype Pro.

I am using the AdWords export script, but this is not required if there is a better option.

  1. A single .js file - right now there are two .js files that are generated
  2. Non-minify'd .js - right now it exporting the HYPE-728.full.min.js
  3. SVG files cannot contain style tags - right now there is this style tag added -.st0{fill:#FFFFFF;}

Here's how you can get all of your Hype export in a single HTML page: Question for exporting an ad for website (Inlining all JavaScript in one file) - Single HTML page - #5 by Daniel -- it involves inlining your JS for both your Hype runtime export and the generated JS.

You could also use these advanced export settings to have a single HTML file:

Once you get the code in a single .html page, you can choose to un minify it, but what is more likely is that the ad provider would like to see things like the 'clickTag' function at the top of the page in a human-readable format. Having the JS code minified will speed up ad loads, but you can unminify it by following this: I Need The Non-Minified Version Of The Code - #6 by jonathan (but it may not be what you're looking for)

Is this an SVG you dragged into Hype? I'm seeing that vector shapes do not define classes if they are created in Hype. If you have an external SVG, you may be able to inline the CSS styles by using SVGOMG - SVGO's Missing GUI

Thank you this is very helpful.

I have tested this out with the ad company and they said that the ads need an ad.size tag that looks something like this.

<meta name="ad.size" content="width=300, height=250">

I've done some searching but I don't see how to include that in the HTML unless I'm missing something.

To quickly add this yourself, you can edit the <head> of your Hype document manually. You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector. (Make sure you use " quotes and not smart quotes like )

There are also export scripts that Hype can leverage, if you see the ad network in this list: https://tumult.com/hype/export-scripts/

The ad.size line is automatically added in these export scripts: https://github.com/tumult/hype-export-scripts/search?q=ad.size

1 Like

First of all, thank you for working with me on this.

I tried the edit the head approach but it seems that all of the layouts share the same HTML.

Here is how my file is organized.
Screen Shot 2021-02-18 at 9.27.22 AM

and the code added to the head

Screen Shot 2021-02-18 at 9.30.21 AM

But this code shows up on all of the layouts so it can't be modified for the different ad sizes.

I also tried using one of the export scripts using these settings.

But it did not insert the ad.size tag into the HTML.

In the image above, click on the individual ‘layouts’ and make sure that you have Sizmek selected as the export script. Currently you have an un-exported slice (scene) selected.

Sizmek does include that ‘ad.size’ value so you don’t need to edit the ‘head’ html area at all: https://github.com/tumult/hype-export-scripts/blob/master/Sizmek/Sizmek.hype-export.py (line 28 shows where this is in place for the export script). So you can delete the line in the ‘head’.

1 Like

That was the problem. Thank you.

Hopefully this will meet their specifications.

1 Like