AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

创建 Web Story 广告的最佳实践

重要提示：本文档不适用于您当前选择的格式 电子邮件！

Web Stories 是一种全屏可点击体验，让读者沉浸在内容中。 Web Stories 中出现的广告应与 Web Stories UX 具有一致且连贯的设计。这样可以防止出现不和谐或干扰性的用户体验。本指南演示如何为 Web Stories 构建广告。

Web Story 广告原则

当前的广告格式（例如横幅和方框）与 AMP Story 格式的集成效果不佳。传统的广告速度慢、具有干扰性，并且在 Story 体验中显得格格不入。

Web Story 广告符合以下原则

  • 有效的 AMPHTML 广告：遵循与经典 AMPHTML 广告相同的技术规范。
  • 视觉优先：引人入胜、大胆、上下文驱动的邀请状态。
  • 原生：广告页面与自然故事页面的尺寸相同。
  • 相同的交互模式：用户可以像浏览自然故事页面一样继续浏览下一屏幕。
  • 快速：广告永远不会以半加载状态向用户显示。

为了与这些原则保持一致，Web Story 运行时会确定广告页面在 Web Story 中的正确位置。阅读有关广告投放机制的更多信息，请参见在 Web Stories 中投放广告。

Web Story 广告示例

Web Story 广告是 AMPHTML 广告，但具有必需的元标记数据、符合定义的布局规范和必需的 UI 元素。 Web Story 广告始终包含一个行动号召 (CTA) 按钮，以及在页面顶部以文本免责声明形式显示的广告标签。

AMP Story 广告示例

为了保持用户体验一致，Web Story 运行时负责呈现广告标签和 CTA 按钮。

重要提示 – 在 Web Story 广告中，只有 CTA 按钮可点击，因此在开发创意时请记住这一点。

模板

请查看我们预制的模板以获取灵感，或作为构建您的创意的起点（请确保选择 story ads 芯片）。

元标记数据

元标记数据指定广告符合 Web Story 格式，设置 CTA 按钮文本枚举，指示按钮将用户发送到何处以及它属于哪种类型的页面。

<html amp4ads>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- Specifies where the user is directed -->
    <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">

    <!-- Specifies the call to action button text enum -->
    <meta name="amp-cta-type" content="EXPLORE">

    <!-- Specifies what type of landing page the user is direct to -->
    <meta name="amp-cta-landing-page-type" content="NONAMP">

    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
     amp-img {height: 100vh}
    </style>
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

  </head>
  <body>
    <amp-img src=%%FILE:JPG1%% layout="responsive" height="1280" width="720"></amp-img>
  </body>
</html>

建议从可用的 CTA 按钮文本选项中选择 amp-cta-type 标记。 AMP 会在适当时自动本地化预定义的选项。

允许使用自定义文本，但您需要实现自己的本地化。

行动号召按钮文本枚举

可以从一组预定义的选项中配置行动号召按钮

  • APPLY_NOW：“立即申请”
  • BOOK_NOW：“预订”
  • BUY_TICKETS：“购买门票”
  • DOWNLOAD：“下载”
  • EXPLORE：“立即探索”
  • GET_NOW：“立即获取”
  • INSTALL：“立即安装”
  • LISTEN：“立即收听”
  • MORE：“更多”
  • OPEN_APP：“打开应用”
  • ORDER_NOW：“立即订购”
  • PLAY：“播放”
  • READ：“立即阅读”
  • SHOP：“立即购物”
  • SHOWTIMES：“放映时间”
  • SIGN_UP：“注册”
  • SUBSCRIBE：“立即订阅”
  • USE_APP：“使用应用”
  • VIEW：“查看”
  • WATCH：“观看”
  • WATCH_EPISODE：“观看剧集”

注意 – 不支持应用深层链接，但支持使用 http/https 链接到 App Store 页面或 Google Play Store 页面。 CTA 按钮文本枚举在广告响应有效负载中指定。

如果需要支持新的 CTA 按钮文本枚举，请打开一个 GitHub 问题。

广告着陆页

您可以为 Web Story 广告着陆页指定三个选项之一。

  • STORY：着陆页是一个赞助的故事。
  • AMP：着陆页是有效的 AMP 页面。
  • NONAMP：任何其他类型的网页。

布局

AMP Stories 是水平全屏的。故事广告必须匹配此格式以提供一致的用户体验。

叠加层尺寸

广告标签覆盖广告整个宽度的深色渐变条，并从顶部向下延伸 46 像素。

广告叠加层位于顶部

CTA 位于距底部 32 像素处，并在水平方向上居中。尺寸为 120 像素 x 36 像素。

CTA 按钮位于底部附近

图片和视频

AMP Story 广告中包含的图片和视频应为 4:3 标准全屏。包含视频的广告应使用 海报。海报图片的推荐尺寸为 720p (720w x 1280h) 。

<amp-video controls
  width="720"
  height="1280"
  layout="responsive"
  poster="images/kitten-playing.png">

  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

图片

背景图片可以缩放到全屏。以下 CSS 是裁剪和居中视频和图片的成功方法。

<style amp-custom>
    amp-img, amp-video {
        height: 100vh;
    }
    amp-video video {
        object-fit: cover;
    }
    amp-img img{
        object-fit: cover;
    }
</style>

视频

指定 <source> 与 src

在为 amp-video 指定来源时

示例：指定多个源文件

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">

  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

视频的大小和长度

为了获得最佳性能，您应尽量提供不超过 4 MB 的视频。较小的文件大小可以加快下载速度，因此请尽可能保持文件较小。

视频格式

如果您只能提供一种视频格式，请提供 MP4。但是，在可能的情况下，请使用 HLS 视频，并将 MP4 指定为尚不支持 HLS 视频的浏览器的回退。 HLS 执行自适应比特率流，其中可以更改视频的质量以最好地适应用户的网络连接。

注意 – Chrome for Desktop 浏览器（即使是通过模拟）也不支持 HLS 视频格式，因此对于访问您页面的任何桌面流量，都必须指定 MP4 回退。要调试 HLS 视频，您需要通过 USB 调试使用实际的移动设备。

视频分辨率

Web Story 视频始终是垂直的（即，纵向视图），预期纵横比为 16:9。请为视频流类型使用建议的分辨率

视频流类型 分辨率
非自适应 720 x 1280 像素
自适应 720 x 1280 像素
540 x 960 像素
360 x 480 像素

注意 – 对于与 16:9 纵横比不同的移动设备，视频可能会被水平或垂直裁剪以适合视口。

视频编解码器

  1. 对于 MP4，使用 H.264。
  2. 对于 WEBM，使用 VP9。
  3. 对于 HLS 或 DASH，使用 H.264。

视频质量

转码优化

您可以使用各种工具来编码视频并调整编码期间的视频质量。下面仅列出了一些

工具 备注
FFmpeg 推荐的优化
  • 对于 MP4，使用 -crf 23。
  • 对于 WEBM，使用 -b:v 1M。
avconv 推荐的优化
  • 对于 MP4，使用 -crf 23。
  • 对于 WEBM，使用 -b:v 1M。
Shaka Packager 一种编码器，也可以输出 HLS 格式（包括播放列表）。
HLS 片段大小

确保您的 HLS 片段的大小通常不超过 10 秒。

动画

动画在故事中有一些注意事项，例如什么是“可见”的概念。例如，在我们的“3 面板”桌面视图中，您的创意可能在页面上可见，但尚未成为中心焦点。如果所需的效果是在页面成为主要焦点时启动动画，则可能会出现问题。

为了帮助解决此问题，当您的创意在所有服务环境中成为焦点时，AMP 将向您的创意正文添加一个特殊的属性 amp-story-visible。建议根据此信号触发动画。

示例：此动画将在页面进入焦点时触发，并在用户单击到故事中的另一个页面并返回时重新启动。

<style amp-custom>
    body[amp-story-visible] .my-animation-class {
      animation: 2s my-animation-name;
    }
</style>

赞助的故事以 URL 的形式存在于 Web 上，从而能够通过 AMP Story 广告上的行动号召按钮将用户流量引导到赞助的故事。赞助的故事是 AMP Story，但侧重于沉浸式和扩展的广告体验。

CTA 按钮定向到赞助的故事

阅读有关创建 Web Story 的更多信息。