Catfish HTML5
Catfish is a banner placed at the bottom of the browser window.
Banner, WxH, px- Width: 100%; The banner's iframe stretches to 100% of the browser window width.
- Catfish must adapt to all possible widths. When placing a banner on mobile devices, the width of Catfish starts from 320px. When placed on desktop, the minimum width is 1000px.
- The height is fixed 60, 250 px. Height must be specified when uploading or in meta ad.vars (see file requirements).
- HTML banner with all necessary files must be in .zip archive.
- The following types of files are allowed: css, js, gif, png, jpg, jpeg, webp, svg, html, json.
- The weight of the .zip archive with all files must not exceed 500kb.
- All uploaded files must be inside the archive.
- Only digits and Latin characters can be used in file and directory names.
- It is forbidden to use the space character in the names of files and directories.
- Allowed to upload files css, js, gif, png, jpg, jpeg, svg, html, json, xml.
- All uploaded files must match their MIME type.
- It is forbidden to use the appearance of such texts and classes in files
.asciiz
.byte
.even
.globl
.text
.file
.type
<meta name="ad.type" content="banner">
<meta name="ad.size" content="catfish">
<meta name="ad.vars" content="height=90,auto_button=1">
- height - banner height in px
- auto_button - (optional) whether to set the jump button over the catfish. A value of 0 will indicate that it is necessary to use the jump button inside the catfish.
Download an example archive. Replace the image files, set the filenames to index.html and specify the background fill.
File name The file name must match the pattern:
banner_catfish@myname.zipButtons
- Close button in the upper right corner is added automatically
- The transition button when clicking on the banner is added automatically
- Add viewport in head
meta name="viewport" content="width=device-width, initial-scale=1">
The width property determines the size of the viewport. It can be set to a specific number of pixels, say width=600, or to the special device-width value, which is the width of the screen in CSS pixels at 100%. (There are also corresponding height and device-height values that can be useful for pages with elements that resize or reposition based on the height of the viewport). The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale , minimum-scale , and user-scalable properties determine how users are allowed to zoom in or out on the page. - When using the createjs library, to display correctly on iOS devices, remove all width and height values inside body
<div id="animation_container">
<canvas id="canvas" style="position: absolute; display: block;">
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden;position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
Installation
- Fill in the advertiser field
- Select banner type
- Choose catfish format
- Specify the name of the media
- Specify click-through URL, if needed
- Specify the path to the zeropixel for impression tracking. It will be called automatically when loading the banner code on the site.
- Choose Template-catfish
- Select zip archive with banner
- Specify in the auto_button field whether to automatically create a button for clicking or use the button inside the banner.
To collect click statistics, the clickTag, clickTAG, ar_redirect, admixAPI.click variables will be passed inside the banner. You have the opportunity to set a transition link inside the banner and receive click statistics. To do this, leave the URL field empty, and set the referral link to one of the options:
clickTag+'&url='+escape('Your referral link');
clickTag+'&url='+encodeURI('Your referral link');
/* if you need to add a part to a variable from the URL field */
clickTag+'&a='+encodeURIComponent('The extra part of the jump link');
- Specify the height of the banner in pixels
- Specify the size and color of the close button