HTML App Mobile Banner/Interstitial

开发 HTML 广告素材
将横幅添加到 Adfox

HTML App Mobile Banner 和 HTML App Mobile Interstitial 是在移动应用中显示 HTML 广告素材的横幅。

Adobe Animate CC 中的项目示例。
Google Web Designer 中的项目示例。

开发 HTML 广告素材

确保您的 HTML 代码满足以下要求。

HTML 代码要求

HTML 文件大小不能超过 65,000 字节。
最好将 JavaScript 和 CSS 放置在横幅的 HTML 代码中。如果最终的 HTML 代码超出了允许的最大大小，您可以通过将 JavaScript 和 CSS 拆分为单独的文件来减少文件大小。
1. 将 JS 和 CSS 代码保存在单独的文件中，扩展名分部为 .js 或 .css。
2. 文件大小不能超过 300 KB。
3. 要连接其他文件（图片、样式、脚本），请使用绝对链接：src="js/script.js", src="css/style.css"。上传项目时，Adfox 会识别文件路径，自动将其上传到 Files 选项卡，并替换已上传项目中指向这些文件的所有链接。
  
  不要使用相对链接：src="../js/script.js"。
  
  连接 JS 和 CSS 文件的示例：
  
  <script type="text/javascript" src="LINK_TO_FILE"></script><link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />
项目只能包含一个扩展名为 .html 的文件。
单个项目中的文件数最多为 50。
项目中接受的文件类型：CSS、JS、HTML、GIF、PNG、JPG、JPEG、SVG、JSON、FLV、MP4、OGV、OGG、WEBM、AVI 和 SWF。
每个文件的最大大小（这也适用于存档文件）：
- 300 KB。
- 视频文件为 1 MB。
文件名只能包含数字或拉丁字母和下划线字符。文件名中不能使用西里尔字母、空格、引号或特殊字符。
变量和对象名称不能包含西里尔字母。此限制不适用于横幅文本。
已完成的项目压缩为 ZIP 存档。

图片要求

文件的最大大小: 300 KB。
接受的图像格式：PNG、GIF、JPG、SVG。
确保使用高分辨率图像：这将提高横幅在移动设备上的显示质量。但是，这也可能会导致加载时间变长。
要减小图像大小，您可以使用支持 PNG 和 JPEG 文件的 TinyPng, 等服务。
您可以使用 SVG 图像文件。它们体积小，支持动画，并且由于其基于矢量的特性，在所有设备上（包括台式机和手机）都有更好的显示效果。

选择适合您的 HTML 广告素材的编辑软件。请务必按照以下说明将您的 HTML 广告素材存档：

Adobe Animate CC

下载适用于 Adobe Animate CC 16.0 或更高版本的带有单个可点击区域（按钮）的横幅模板。
在 Adobe Animate 中创建一个 HTML5 Canvas 项目（或打开一个现有项目）。
打开 File → Publish Settings 中的发布设置，并使用步骤 1 中的模板。
选择所需的目录并发布项目。
整个横幅区域都可点击：就像一个按钮，可以跳转到广告主的网站。该链接从 Adfox 中的横幅设置载入广告素材。

Google Web Designer 编辑器

下载 Google Web Designer 的横幅模板。

在编辑器中制作广告素材时，您可以使用此横幅的代码。将存档内容提取到 Google Web Designer 模板文件夹，例如：

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

该模板包含一个 adfox_HTML5.js 脚本和一组用于点击率和事件计数器正常工作的参数：

%request.reference_mrc%, %user2%, %eventN%，其中 N 是从 4 到 30 的事件编号。
点击处理。

所有事件都分配给 Events 选项卡中的动画元素。

Interactive area 组件用于调用操作。

添加它并选择 Tap Area → Touch/Click 事件。

在 Custom code 选项卡中，选择点击函数调用：
- callClick()：适用于单个按钮的情况。
- callClick(n)：当存在多个可点击按钮时使用。
- callEvent(n)：用于在不进行点击的情况下从动画中调用事件。
其中 n 是要调用的事件的编号。

如何使用可伸缩横幅

要使横幅沿着网站上容器的宽度延伸，请在 Свойства 面板上使用百分比而不是像素来指定横幅的位置和尺寸。

使用顶部工具栏上的 Выровнять по контейнеру 和 Резиновый макет 选项。

如果您在使用任何对齐工具之前启用 Резиновый макет，则当更改父容器尺寸时，所有元素都会相对于彼此对齐，而且相对于容器尺寸调整。

您可以同时使用以百分比为单位的相对元素"尺寸和以像素为单位的绝对尺寸。

Google Web Designer 中的项目示例。
发布使用以下设置的项目：
- Inline local files 已启用。
- Create ZIP 已启用。
- Group unpacking 已启用。
- CSS prefix 已针对 WebKit 和 Mozilla 启用。
备注

向 Adfox 添加横幅时，请务必告知服务经理哪些按钮与哪些事件匹配。对于每个事件，服务经理都会添加一个唯一的链接，然后将其作为变量传递给横幅代码。

发布项目后，请使用 .zip 扩展名对其进行归档。您的广告素材已准备好上传到 Adfox 横幅。

其他编辑器

横幅中的点击计数器

如果您希望 Adfox 横幅显示点击统计信息，请在 HTML 代码中找到 href 属性的 a 标记，然后添加以下变量：%banner.reference_mrc_user2%。

对于链接，请使用带有 %banner.target% 变量的 target 属性。如果缺少该属性，链接将在 iframe 内打开：即广告网站将在横幅位置打开。

计算横幅点击次数的 HTML 代码示例：

<a href="%banner.reference_mrc_user2%" target="%banner.target%">Advertiser's website</a>

计算横幅中多个链接的点击次数

假设横幅有多个链接指向广告网站的不同页面，并且您需要计算每个链接的点击次数。

<a href="http://site.com" target="_blank">第一个链接</a>
<a href="http://site.com/about/" target="_blank">第二个链接</a>

将 href 属性值替换为 %request.reference_mrc@%banner.eventN% 变量，其中 N 是从 4 到 28 的事件编号。例如：

<a href="%request.reference_mrc%@%banner.event4%" target="%banner.target%">第一个链接</a>
<a href="%request.reference_mrc%@%banner.event5%" target="%banner.target%">第二个链接</a>

请确保通知处理 Adfox 横幅集成的服务经理哪些链接与哪些变量匹配。在 Events 选项卡中添加横幅时，请指定以下信息：

第一个链接：http://site.com — %banner.event4% 用于事件 4。
第二个链接：http://site.com/about/ — %banner.event5% 用于事件 5。

将横幅添加到 Adfox

要将横幅添加到 Adfox：

在广告系列设置中，转到 Banners 选项卡并点击 Add。
分别选择 App Mobile Banner 或 App Mobile Interstitial 类型以及 HTML App Mobile Banner 或 HTML App Mobile Interstitial 模板。
设置横幅参数：
主要

附加
- Priority：决定广告系列中横幅显示顺序的数字。数值越高，该横幅相对于同一广告系列中其他横幅的优先级就越高。要了解有关优先级的更多信息，请参见 Adfox 帮助。
- Archive with creative HTML5 content：上传包含项目的 ZIP 存档，将 HTML5 字段留空（添加横幅后，该字段将填充项目 HTML 文件的内容）。
- Tracking pixel link：默认情况下，使用 Adfox 像素 //banners.adfox.ru/transparent.gif。如果您想在第三方系统中跟踪展示次数，请删除 Adfox 像素并指定另一个链接。
- HTML5：如果您上传了项目存档，此字段将自动填充。
- Click-through URL：输入广告主网站的链接。为了使点击跳转功能正常工作，请确保链接包含协议（http:// 或 https://）。
- Start date and time：必需参数。默认情况下，此参数设置为当前日期。如果您不做更改，横幅将在添加后立即开始投放（如果其状态设置为 active）。
- Ad label：选择 Ad 或 Social Ad 为您的横幅添加标签。如果广告素材已有标签，您可以在下拉列表中选择 Disabled 值。
  
  备注
  
  添加 Social Ad 标签不会将广告素材内容定义为社交广告。要将广告素材内容在国家注册中标记为社交广告，请确保在与最终广告主的合同中选择 Social ads contract 选项。
- Domain：输入要添加到标签的广告主域名，如 Ad | Example.com 或 Social Ad | Example.com（如果您在下拉列表中选择了 Ad 或 Social Ad 值）。
- Show banner menu：启用此选项可将令牌添加到不可点击的横幅中。投放横幅时，右上角会显示菜单图标。单击图标会打开广告主的信息，并显示一个按钮以复制令牌（如果横幅启用了广告标签或指定了第三方令牌）。
  
  横幅菜单包含指向使用推荐技术的规则的链接。该链接是为了满足《第 149-FZ 号联邦法》第 10.2–2条第 1 节第 3 款的要求，该法律于 2006 年 7 月 27 日颁布，涉及信息、信息技术和信息保护。
  
  备注
  
  如果横幅不可点击（点击 URL 字段为空），并且需要将其信息添加到国家注册中，您可以启用横幅菜单，以便在投放横幅时提供令牌。
- Settings for Russian ad register：此部分仅在您在广告系列设置中选择了 Submit data to state register 时可用。请填写该部分字段，以便向 Yandex 广告运营商注册您的广告素材内容。广告素材内容将自动分配一个令牌。要了解有关广告标签的更多信息，请参见 Adfox 帮助。
- Name：输入横幅的名称。如果将此字段留空，则会为其分配一个序列号。
- Status：选择横幅的状态：
  - active：横幅已准备好投放。
  - paused：横幅展示已暂停。
  - completed：横幅将不会被投放。
- Disabled on new placements：此选项默认启用。创建横幅后，它不会自动放置在以下位置：
  - 在您的广告l系列所在的网站或部分中创建的新版位中。
  - 在创建横幅后在广告系列版位设置中启用的版位中。如果您禁用此选项，横幅将自动添加到启用了广告系列版位的任意版位中。
- Targeting profile：选择您之前创建的定位配置文件。要了解有关定位配置文件的更多信息，请参见 Adfox 帮助。
- Events enabled：此选项用于获取要在第三方系统中跟踪的事件的直接链接。要激活该选项，请在 Placements 选项卡中点击横幅旁边的。在打开的窗口中，您将看到事件 1 到 30 的链接。将其复制并发送到第三方系统以进行跟踪。
- Impressions in total, day, hour：
  - Impressions total, day, hour：横幅展示的最大次数。如果广告系列分布均匀，请设置横幅显示结束日期。一旦展示次数达到最大值，横幅的状态就会更改为 completed 并且不再投放。
  - Impressions per day：每天的最大展示次数。一旦从当天开始的展示次数达到最大值，展示就会暂停，直到第二天开始。
  - Impressions per hour：每小时的最大展示次数。一旦从一小时开始的展示次数达到最大值，展示就会暂停，直到下一小时开始。
- Clicks total, per day, per hour：
  - Clicks total：横幅点击的最大次数。如果广告系列分布均匀，请设置横幅显示结束日期。一旦点击次数达到最大值，横幅的状态将更改为 Completed 并且不再投放。
  - Clicks per day：每天的最大横幅点击次数。一旦从当天开始的点击次数达到最大值，展示就会暂停，直到第二天开始。
  - Clicks per hour：每小时的最大横幅点击次数。一旦从一小时开始的点击次数达到最大值，展示就会暂停，直到下一小时开始。
- End time：要设置结束日期和时间，请首先启用该选项。
要保存横幅，请点击 Add。