---
metadata:
- name: generator
content: Diplodoc Platform v5.52.0
alternate:
- https://ads.yandex.com/helpcenter/en/monetization/adfox/banner-specs/html.md
- https://ads.yandex.com/helpcenter/ru/monetization/adfox/banner-specs/html.md
- https://ads.yandex.com/helpcenter/zh/monetization/adfox/banner-specs/html.md
- href: en/monetization/adfox/banner-specs/html.md
type: text/markdown
title: Markdown version
- href: ../../llms.txt
type: text/markdown
title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/en/llms.txt
# HTML App Mobile Banner/Interstitial
**HTML App Mobile Banner** and **HTML App Mobile Interstitial** are banners that display HTML creatives in mobile apps.
* [Project example](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp.zip) in Adobe Animate CC.
* [Project example](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_1.zip) in Google Web Designer.
## Develop an HTML creative {#html-creative}
Make sure your HTML code meets the following requirements.
{% cut "HTML Code Requirements" %}
1. The maximum size of an HTML file is 65,000 bytes.
1. 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.
1. File weight can't be more than 300 KB.
1. 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:
``````
1. The project can contain only one file with the .html extension.
1. The maximum number of files in a single project is 50.
1. File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.
1. The maximum size of each file (this applies to archived files as well):
- 300 KB.
- 1 MB for video files.
1. 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.
1. Variable and object names cannot include Cyrillic letters. This restriction doesn't apply to banner text.
1. 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,](https://tinypng.com) 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.
{% endcut %}
Select the editing software for your HTML creative. Make sure to put your HTML creative into an archive according to the following instructions:
{% cut "Adobe Animate CC" %}
1. Download a [banner template with a single clickable area (button)](https://doc-static.yandex.net/support/RSYA-RMP/AdobeAnimate_Adfox_inapp_template_oneclick_16_2.html.zip) for Adobe Animate CC version 16.0 or higher.
1. Create an **HTML5 Canvas** project in Adobe Animate (or open an existing one).
1. Open the publication settings in **File** → **Publish Settings** and use the template from Step 1.
1. Select the desired folder and publish the project.
1. 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.
{% endcut %}
{% cut "Google Web Designer editor" %}
1. Download a [banner template for Google Web Designer](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_template.zip).
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.
1. 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](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_1.zip) in Google Web Designer.
1. 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 info %}
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.
{% endnote %}
After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.
{% endcut %}
{% cut "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:
`Advertiser's website`
**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.
```
First linkSecond link
```
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:
```
First linkSecond link
```
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.
{% endcut %}
## Add a banner to Adfox {#add-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:
{% list tabs %}
- Main
- **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](https://yandex.com/support2/adfox/en/campaigns/rotation-method).
- **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.
- **Transition 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 add a label to the banner. If your ad creative already contains a label, you can leave the **Disabled** value in the drop-down list.
{% note info %}
Adding the **Social Ad** label doesn't automatically define the creative as a social ad. To label the creative as a social ad in the state register, select **Social ads contract** in the corresponding [contract with the end advertiser](https://yandex.com/support2/adfox/en/labeling/token#step-2).
{% endnote %}
* **Domain**: Specify the advertiser domain to add it to the label: `Ad / Example.com` or `Social ad / Example.com` (only if the **Ad** or **Social Ad** value is selected in the drop-down list).
* **Show banner menu**: Enable this option to add a token to a non-clickable banner. When the banner is served, the menu icon will be displayed in its upper-right corner. Clicking this icon displays information about the advertiser and a button to copy the token (if you enabled labeling for this banner or specified a third-party token).
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 info %}
If the banner needs to be labeled, you can enable the banner menu to make the token available when the banner is served to users.
{% endnote %}
* **Settings for Russian ad register**: This section is only available if you've selected **Advertising labeling** as a labeling procedure in the campaign settings. Fill in the fields in this section to register the creative with the Yandex advertising data operator. The creative is assigned a token automatically. For more information about labeling ads, see [Adfox Help](https://yandex.com/support2/adfox/en/labeling/about).
- Additional
* **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](https://yandex.com/support2/adfox/en/settings/profiles).
* **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.
{% endlist %}
3. To save a banner, click **Add**.
[Contact support](https://ads.yandex.com/helpcenter/en/support/contact.md){.button}