HTML App Mobile Banner/Interstitial
HTML App Mobile Banner 和 HTML App Mobile Interstitial 是在移动应用中显示 HTML 广告素材的横幅。
开发 HTML 广告素材
确保您的 HTML 代码满足以下要求。
HTML 代码要求
-
HTML 文件大小不能超过 65,000 字节。
-
最好将 JavaScript 和 CSS 放置在横幅的 HTML 代码中。如果最终的 HTML 代码超出了允许的最大大小,您可以通过将 JavaScript 和 CSS 拆分为单独的文件来减少文件大小。
-
将 JS 和 CSS 代码保存在单独的文件中,扩展名分部为 .js 或 .css。
-
文件大小不能超过 300 KB。
-
要连接其他文件(图片、样式、脚本),请使用绝对链接:
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 模板文件夹,例如:
/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。