HTML App Mobile Banner/Interstitial

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

开发 HTML 广告素材

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

HTML 代码要求
  1. HTML 文件大小不能超过 65,000 字节。

  2. 最好将 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" />

  3. 项目只能包含一个扩展名为 .html 的文件。

  4. 单个项目中的文件数最多为 50。

  5. 项目中接受的文件类型:CSS、JS、HTML、GIF、PNG、JPG、JPEG、SVG、JSON、FLV、MP4、OGV、OGG、WEBM、AVI 和 SWF。

  6. 每个文件的最大大小(这也适用于存档文件):

    • 300 KB。
    • 视频文件为 1 MB。
  7. 文件名只能包含数字或拉丁字母和下划线字符。文件名中不能使用西里尔字母、空格、引号或特殊字符。

  8. 变量和对象名称不能包含西里尔字母。此限制不适用于横幅文本。

  9. 已完成的项目压缩为 ZIP 存档。

图片要求

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

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

Adobe Animate CC
  1. 下载适用于 Adobe Animate CC 16.0 或更高版本的 带有单个可点击区域(按钮)的横幅模板

  2. 在 Adobe Animate 中创建一个 HTML5 Canvas 项目(或打开一个现有项目)。

  3. 打开 File → Publish Settings 中的发布设置,并使用步骤 1 中的模板。

  4. 选择所需的目录并发布项目。

  5. 整个横幅区域都可点击:就像一个按钮,可以跳转到广告主的网站。该链接从 Adfox 中的横幅设置载入广告素材。

Google Web Designer 编辑器
  1. 下载 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 的事件编号。

  2. 点击处理。

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

    Interactive area 组件用于调用操作。

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

    Custom code 选项卡中,选择点击函数调用:

    • callClick():适用于单个按钮的情况。

    • callClick(n):当存在多个可点击按钮时使用。

    • callEvent(n):用于在不进行点击的情况下从动画中调用事件。

    其中 n 是要调用的事件的编号。

    如何使用可伸缩横幅

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

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

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

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

    Google Web Designer 中的 项目示例

  3. 发布使用以下设置的项目:

    • 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:

  1. 在广告系列设置中,转到 Banners 选项卡并点击 Add

  2. 分别选择 App Mobile BannerApp Mobile Interstitial 类型以及 HTML App Mobile BannerHTML App Mobile Interstitial 模板。

  3. 设置横幅参数:

    • 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:选择 AdSocial Ad 为您的横幅添加标签。如果广告素材已有标签,您可以在下拉列表中选择 Disabled 值。

      备注

      添加 Social Ad 标签不会将广告素材内容定义为社交广告。要将广告素材内容在国家注册中标记为社交广告,请确保在 与最终广告主的合同 中选择 Social ads contract 选项。

    • Domain:输入要添加到标签的广告主域名,如 Ad | Example.comSocial Ad | Example.com(如果您在下拉列表中选择了 AdSocial 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:要设置结束日期和时间,请首先启用该选项。

  4. 要保存横幅,请点击 Add

联系支持部门