HTML App Mobile Banner

Develop an HTML creative

Make sure your HTML code meets the following requirements.

HTML code requirements
  1. The maximum size of an HTML file is 65,000 bytes.
  2. It's best to place JavaScript and CSS inside the HTML code of the banner. If the final HTML code exceeds the maximum allowed size, reduce it by splitting JavaScript and CSS into separate files:
    1. Save the JS and CSS code in separate files with the .js or .css extension.
    2. File weight can't be more than 300 KB.
    3. Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.

      • If absolute links (src="js/script.js", src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.
      • If relative links (for example, src="../js/script.js") are included in the project, use one of the following methods:

        • Replace the links to the .js and .css files with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
        • Manually upload the .js and .css files to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.

      Example of connecting JS and CSS files:

      script type="text/javascript" src="LINK_TO_FILE">/script> link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />
  3. The project can contain only one file with the .html extension.
  4. The maximum number of files in a single project is 50.
  5. File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.
  6. The maximum size of each file (this applies to archived files as well):

    • 300 KB.
    • 1 MB for video files.
  7. File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.
  8. The completed project is a ZIP archive.
Image requirements
  • Maximum file size: 300 KB.
  • Allowable image formats: PNG, GIF, JPG, SVG.
  • Make sure to use high-resolution images: this will improve the banner's display quality on mobile devices. However, this might also make it take longer to load.
  • To reduce image size, you can use services such as TinyPng, which supports PNG and JPEG files.
  • You can use images in SVG format: they have a small file size, support animations, and are vector-based, which means they look better on any device, whether it's a desktop or a mobile.

Select the editing software for your HTML creative. Make sure to put your HTML creative into an archive according to the following instructions:

Adobe Animate CC
  1. Download a banner template with a single clickable area (a button).

    Adobe Animate CC version 16.0 and higher

  2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one).

  3. Open the publication settings in File → Publish Settings and use the template from step 1.

  4. Select the desired directory and publish the project.

  5. The entire banner area is clickable: it's a button that leads to the advertiser's website. The link is pulled into the creative from the banner settings in Adfox.
Google Web Designer
  1. Download a banner template for Google Web Designer.

    You can use this banner's code when making creatives in the editor. Put the contents of the archive into the folder with the program templates, for example:

    /Users/[USER_NAME]/Documents/Google Web Designer/templates

    The template contains an adfox_HTML5.js script and a set of parameters for click-throughs and event counters to work correctly:

    %request.reference_mrc%, %user2%, %eventN%, where N is the event number from 4 to 30.

  2. Click processing.

    All events are assigned to animation elements on the Events tab.

    The Interactive area component is used for calling actions.

    Add it and select the Tap Area → Touch/Click event.

    On the Custom code tab, select the click call function:

    • callClick(): If a single button is used.

    • callClick(n): Used if there are multiple clickable buttons.

    • callEvent(n): Used for when you need to call an event from an animation without clicking.

      Where n is the number of the event to be called.

      How to use a stretching banner.

      To make the banner stretch across the width of the container on the site, specify percentages instead of pixels for the banner location and dimensions on the Properties panel.

      Use the Align by container and Adaptive layout options on the top toolbar.

      If you enable Adaptive layout before using any alignment tools, when you change the parent container size, all elements are aligned relative to each other and relative to the container size.

      You can use the relative element sizes in percentages and absolute sizes in pixels at the same time.

      Project example in Google Web Designer.

  3. Publish the project with the following settings:

    • Collect files is enabled.
    • Create ZIP archive is enabled.
    • Groups unpacking is enabled.
    • CSS prefix is enabled for WebKit and Mozilla.
    Note. When adding a banner to Adfox, make sure to tell the manager which buttons match which events. For each event, the manager adds a unique link, which is then passed to the banner code as a variable.

    After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.

Other editors
Counting clicks in banners

If you want your Adfox banner to display click statistics, find the a tag for the href attribute in your HTML code and add the following variable: %banner.reference_mrc_user2%.

For links, use the target attribute with the variable as an attribute. If the attribute is missing, the link will open inside the iframe: that is, the advertised website will open in the location of the banner.

Example of HTML code that counts banner clicks:

<a href="%banner.reference_mrc_user2%" target="">Advertiser's website</a>
Counting clicks for multiple links in the banner

Let's say the banner has several links leading to different pages of the advertised site, and you need to count the number of clicks for each of them.

<a href="" target="_blank">First link</a>
<a href="" target="_blank">Second link</a>

Replace the href attribute values with the %request.reference_mrc@%banner.eventN% variables, where N is the event number from 4 to 28.

For example:

<a href="%request.reference_mrc%@%banner.event4%" target="">First link</a>
<a href="%request.reference_mrc%@%banner.event5%" target="">Second link</a>

Make sure to inform the manager handling Adfox banner integration which links match which variables. When adding a banner via the Events tab, specify the following information:

  • First link: — %banner.event4% for Event 4.

  • Second link: — %banner.event5% for Event 5.

Add a banner to Adfox

To add a banner to Adfox, select the App Mobile banner type you need and the HTML App Mobile Banner template.

Set the banner parameters:
  • Archive with HTML5 creative: Upload a ZIP archive with the project. Leave the Creative HTML5 code box empty (it's filled with the contents of your project's HTML file after you add the banner).
  • Creative HTML5 code: Upload a ZIP archive with the project prepared in HTML editors or paste the HTML code.
  • Transition URL: Enter the link to the advertiser's website. For the click-through to work correctly, make sure that the link includes the protocol (http:// or https://).
  • Tracking pixel link: By default, the Adfox // pixel is used. If you want to count impressions in a third-party system, delete the Adfox pixel and provide another link.
  • Under Advertising label settings:
    • In the Ad label list, select “Ad” or “Social ad”, and the label will be added to the banner. If the creative's design already includes the label, you can keep “Disabled” in the drop-down list.
    • In the Domain field, specify the advertiser domain, and it will be added to the label: "Advertising" | or "Social advertising" | (only if you select “Advertising” or “Social advertising” in the drop-down list).
  • To add a token to a non-clickable banner, enable the Show banner menu option in the banner settings. When the banner is served, the menu icon  will be displayed in the upper right corner of it. When a user clicks this icon, the advertiser information and the copy token button appear (if ad register is enabled for the banner and a third-party token is specified).

    Important. If a banner is non-clickable (the Transition URL field is not filled in) and it is to be added to the ad register, be sure to show the banner menu. This is the only way to make the token available when serving the banner.
  • Settings for Russian ad register: The section is only available if the Submit data to state register procedure is selected in the campaign settings. Fill in the fields in this section to register the creative in the Yandex advertising data operator. The creative is assigned a token automatically.

    Note. If a specific banner doesn't need to be added to the ad register, select Do not submit data to state register.

Contact support