HTML Import and Code Snippet Editor

Adventive allows users to import HTML/Code into an ad build. This article will walk you through adding an HTML file to your ad unit.  The HTML Import / Code Snippet Editor can be added to any type of Format.

The Html zip file or advertiser provided ad tags must serve over https not http.  The Adventive preview is over https. The browser blocks non secure files when the page is served over https. If the html file/tag is incorrect, add the 's' after any instance of "http" in the file/tag.

*  Make sure there are no spaces or special characters in the html and zip naming conventions (no #, $, etc.) as this may cause an error in uploading.

If you are creating the file and need help on how to publish as a zip file, please see How to Publish file for HTML Import here.  The HTML Import Component can be added to any type of Format.

Examples One, Two, and Three.

Note:  If an expanding ad, you will need separate Zip files for collapsed and expanded state.

 

In the Builder, Create a New File - any size, any format.

 

Click Submit.

A blank Screen 1 canvas will show.  Select the Components icon  in the Tool Section (left side of Builder) and a dropdown will show.

Select HTML5 Import:

A white 300x250 placeholder will appear on the canvas.

 

With the placeholder selected, you’ll see HTML5 Import in the properties panel to the right of the Builder. 

Choose from the “Type” Dropdown:

Uploaded – choose if you have a zip file to upload – then click Upload Zip File and select your zip file

Paste Snippet – choose if you have an advertiser-provided ad tag (or player embedded code - i.e. Spotify, JW Player, Soundcloud, Tidal, etc.) – then click Open Snippet Editor and paste entire tag/code into the editor and click Submit:

 

Your HTML5 file will load in the 300x250 frame.  You’ll likely need to resize the frame to fit your creative, as external files do not set file dimensions.

Move and resize the placeholder by click/dragging or using the General Properties width and height to the right of the builder. 

Note:  You may see a grey border on the file. This is expected and can be placed outside the ad dimensions to hide it from view.

 

You'll also notice a Prompt screen at the top of the builder:

 

Default clickthrough URLs will not override HTML5 files so you’ll want to add a Hitbox over the ad to ensure users can click through. 

The Html file must serve over https not http.  Our preview is over https. The browser blocks non secure files when the page is served over https. If the html file is incorrect, add the 's', save and rezip and you'll be good to go.

If using the Snippet Editor for a tag and clickthrough data is already embedded in the tag, but you want to also track clicks in Adventive, you'll need to add a Hitbox over the entire unit and add the default url/clicktracker from the campaign manager.  *You will not need to extract the impression tracker from the html file/do not add under 3rd party tracking as it will already be embedded in the tag, and to avoid counting twice.

 

Click on the Hitbox icon  in the Tools Section (left side of the builder).

You’ll now see a blue transparent box appear in the top left of your ad:

You can move this box as well as resize either with your mouse, or using the Width/Height in the General section (top right of screen). 

In this example we will place the Hitbox over the entire ad to ensure users can click through (as default clickthrough urls cannot override HTML5 files):

 

 

For this Hitbox, you do not need to set an Action as it will take the viewer to the default clickthrough url. 

You can add additional Hitboxes to other areas of the ad. 

For example, if this ad needed to expand to a second screen, you could place another Hitbox over an “Expand” button and set a Go to Screen 2 action:

 

 

 

Click Apply.

Also see Hitbox and Actions articles.

 

Save the ad.

Go to the Preview icon  to view the ad. 

 

Tracking Limitations 
As Adventive is not hosting the videos or content assets, we do not have the ability to track video data from player embeds, including views, quartiles or any engagements with controls. This will need to be pulled from the original player site (Spotify, Soundcloud, etc.) as they are the host.