Table of Contents
This is a very easy to use and highly customizable Open Door template.
A user opens the webpage and sees the 1010x150 top banner and two 180x700 banners in the right and left sides. On click on any of the banners, banner takes over the webpage content (content moves indoors) and a floating stage appears that can offer additional video or other rich media experience. The banners accommodate a link to the predefined landing page. The ad maintains this size until the “Close” button in the top right corner is clicked. The ad expands as many times as the user clicks the 1010x150 or 180x700 banners.
The following items are to be delivered by a creative agency:
- An assets for initial stage banners. It should be two 180x700 HTML5 Files for left and right side banners and one 1010x150 image for standard leaderboard banner or HTML5 file.
- Video player needs a MP4/WEBM format videos (it is recommended to have more than one video file type).
- (Optional) a 1440x1030 poster for the video, if there will be a video wall (the wall will be black before playing the video if no poster will be provided).
- Screenshot for floating stage (PNG/JPEG).
- In case the browser is very old and doesn't support HTML5, the backup images (PNG/JPEG) are required (set in additional assets).
- Banner assets containing manifest.json file and HTML file zipped together with images, scripts and other material.
NOTE: manifest.json file and HTML file should be in the root directory of the .zip file.
INFO: Please refer to the Video Player component for more detailed information on component setup and behavior.
- Manifest.json file should define the ad dimensions and the HTML file which is used as a banner source.
- HTML file should include Adform HTML library which enables the banner to receive a clickTAG variable:
- Available on user initiation only (click). Off by default.
- Mute button or volume control required.
- Video starts automatically.
- Video duration: 30 seconds max. Replay allowed with user initiation.
- "Pause", "Play" and "Full screen" buttons controls required.
- “Close button” in top-right corner is required.
- First, create a Floating HTML5 banner. In the Initial Settings step, name your banner, select Category as “Floating” and Format as “Floating Ad”. Select a Banner Batch from the drop-down menu.
- When it's done, click the Next button.
- In the next step, you are asked to select or upload assets. If you have previously uploaded the assets to the system, click the Select button and choose Banner source, i.e. select HTML File named HTML_Open door. Make sure that the clickTAG is present.
NOTE: Additional assets should be assigned by default order:
Click the Next button.
Adjust the General Settings:
- Site screenshot should be assigned as a first additional asset;
- Video poster goes as second additional asset;
- Video files (MP4/WEBM format) should be assigned below the screenshot and poster assets.
When done, click the Save button in order to see the preview. If everything is fine, click the Submit button.
In order to deliver HTML5 banners fully compliant with the specs, follow the instructions on Producing HTML5 banners in Adform Test and Support Center:
Note: Please do not take “banner files” and setup settings from preview test tag (it‘s only for our demo preview). Banner template is available for downloading as a template.
|Desktop browser version
|Internet Explorer 8 (and bellow)
|Internet Explorer 9, 10 & 11
|Firefox (newest version)
|Chrome (newest version)
|Safari (newest version)