HTML App Mobile Banner/Interstitial

HTML App Mobile Banner and HTML App Mobile Interstitial are banners that display HTML creatives in mobile apps.

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, you can 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. To connect additional files (images, styles, scripts), use absolute links: src="js/script.js", src="css/style.css". 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.

      Don't use relative links: src="../js/script.js".

      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 Cyrillic letters, spaces, quotation marks, or special characters in the file name.

  8. Variable and object names cannot include Cyrillic letters. This restriction doesn't apply to banner text.

  9. The completed project is a ZIP archive.

Image requirements

  • Maximum weight of a file: 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 SVG image files. They're small, support animations, and look better on all devices, be they a desktop or a phone, since they're vector-based.

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 (button) for Adobe Animate CC version 16.0 or 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 site. The link is pulled into the creative from the banner settings in Adfox.

Google Web Designer editor

  1. Download a banner template for Google Web Designer.

    You can use this banner's code when making creatives in the editor. Extract the contents of the archive to the Google Web Designer template folder, 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 in the Events tab.

    The Interactive area component is used for calling actions.

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

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

    • 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 Свойства panel.

    Use the Выровнять по контейнеру and Резиновый макет options on the top toolbar.

    If you enable Резиновый макет 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:

    • Inline local files enabled.
    • Create ZIP enabled.
    • Group unpacking enabled.
    • CSS prefix 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

Click counters 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 %banner.target% variable as an attribute. If the attribute is missing, the link will open inside the iframe: that is, the advertised site will open in the location of the banner.

Example of HTML code that counts banner clicks:

<a href="%banner.reference_mrc_user2%" target="%banner.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="http://site.com" target="_blank">First link</a>
<a href="http://site.com/about/" 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="%banner.target%">First link</a>
<a href="%request.reference_mrc%@%banner.event5%" target="%banner.target%">Second link</a>

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

  • First link: http://site.com — %banner.event4% for Event 4.

  • Second link: http://site.com/about/ — %banner.event5% for Event 5.

Add a banner to Adfox

To add a banner to Adfox:

  1. In the ad campaign settings, go to the Banners tab and click Add.

  2. Select the App Mobile Banner or App Mobile Interstitial type and the HTML App Mobile Banner or HTML App Mobile Interstitial template, respectively.

  3. Set the banner parameters:

    • Priority: The number that determines the banner's display order in the campaign. The higher the numeric value, the higher the banner's priority over the other banners in the same campaign. To learn more about priorities, see Adfox help.

    • Archive with creative HTML5 content: Upload a ZIP archive with the project, leaving the HTML5 field empty (it will be filled with the contents of your project's HTML file after you add the banner).

    • Tracking pixel link: By default, uses the Adfox pixel //banners.adfox.ru/transparent.gif. If you want to track impressions in a third-party system, delete the Adfox pixel and specify another link.

    • HTML5: If you uploaded a project archive, this field is filled out automatically.

    • Click-through URL: Enter the link to the advertiser's site. For the click-through to work correctly, make sure that the link includes the protocol (http:// or https://).

    • Start date and time: Required parameters. By default, this parameter is set to the current date. If you don't change it, banners will start being served immediately after you add them (if their status is set to active).

    • Ad label: Select Ad or Social Ad to label your banner. If the creative already has a label, you can choose the Disabled value in the drop-down list.

      Note

      Adding the Social Ad label doesn't define creative content as social advertising. To label creative content as social advertising in the state register, make sure to select the Social ads contract option in the contract with the end advertiser.

    • Domain: Enter the advertiser domain to be added to the label as Ad / Example.com or Social Ad / Example.com (if you selected the Ad or Social Ad value in the drop-down list).

    • Show banner menu: Enable this option to add a token to a non-clickable banner. When serving the banner, it will have the menu icon displayed in the upper-right corner. Clicking the icon opens the advertiser's information and a button to copy the token (if the banner has ad labeling enabled or a third-party token specified).

      The banner menu contains a link to the rules for using recommendation technologies. The link is necessary to meet the requirements of article 10.2–2, part 1, paragraph 3 of Federal Law No. 149-FZ "On Information, Information Technologies and the Protection of Information", dated July 27, 2006.

      Note

      If a banner is non-clickable (the click-through URL field is empty) and information about it needs to be added to the state register, you can enable the banner menu to make a token available when serving the banner.

    • Settings for Russian ad register: This section is only available if you selected Submit data to state register in the campaign settings. Fill out the section fields to register your creative content with the Yandex advertising operator. The creative content will have a token assigned automatically. To learn more about ad labeling, see Adfox Help.

    • Name: Enter a name for the banner. If you leave this field blank, it will be assigned a sequential number.

    • Status: Select a status for the banner:

      • active: The banner is ready to be served.
      • paused: The banner impression is paused.
      • completed: The banner won't be served.

    • Disabled on new placements: This option is enabled by default. Once you create your banner, it won't be placed automatically:

      • In new placements created within the site or section where your campaign is placed.
      • In placements that were enabled in the campaign placement settings after the banner was created. If you disable this option, the banner will be automatically added to any placements that have the campaign placement enabled.

    • Targeting profile: Select the targeting profile you created earlier. To learn more about targeting profiles, see Adfox Help.

    • Events enabled: This option is used to get direct links to events to be tracked in a third-party system. To activate the option, click next to the banner in the Placements tab. In the window that opens, you'll see links to events from 1 to 30. Copy and send them to the third-party system to be tracked there.

    • Impressions in total, day, hour:

      • Impressions total, day, hour: Maximum number of banner impressions. If a campaign is distributed evenly, set the banner display end date. Once the number of impressions reaches the maximum, the banner's status changes to completed and it's no longer served.
      • Impressions per day: Maximum number of impressions per day. Once the number of impressions from the start of the day reaches the maximum, they are paused until the next day starts.
      • Impressions per hour: Maximum number of impressions per hour. Once the number of impressions from the start of the hour reaches the maximum, they are paused until the next hour starts.

    • Clicks total, per day, per hour:

      • Clicks total: Maximum number of banner clicks. If a campaign is distributed evenly, set the banner display end date. Once the number of clicks reaches the maximum, the banner's status is changed to Completed and it's no longer served.
      • Clicks per day: Maximum number of banner clicks per day. Once the number of clicks from the start of the day reaches the maximum, impressions are paused until the next day starts.
      • Clicks per hour: Maximum number of banner clicks per hour. Once the number of clicks from the start of the hour reaches the maximum, impressions are paused until the next hour starts.

    • End time: To set the end date and time, first enable the option.

  4. To save a banner, click Add.

Contact support

Previous
Banner requirements
Next
Image App Mobile Banner/Interstitial
In this article: