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 按钮是可点击的，因此在开发你的创意时请记住这一点。

模板

请查看我们预先制作的模板以获取灵感，或作为构建你的创意的起点（请确保选择故事广告标签）。

元标记数据

元标记数据指定广告符合 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 商店页面。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 执行自适应比特率流式传输，其中视频的质量可以改变以最适合用户的网络连接。

注意 – HLS 视频格式在桌面版 Chrome 浏览器中不受支持（即使通过模拟也不受支持），因此对于任何桌面流量，都需要指定 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 存在，支持从 AMP Story 广告上的号召性用语按钮将用户流量驱动到赞助故事。赞助故事是一个 AMP Story，但侧重于沉浸式和扩展的广告体验。

CTA 按钮指向赞助故事

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