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 是横向和全屏的。为了提供一致的用户体验，Story 广告需要与此格式匹配。

叠加层尺寸

广告标签在整个广告宽度上叠加一个深色渐变条，并将从顶部向下延伸到 46 像素。

广告叠加层位于顶部

CTA 位于底部 32 像素处，并在水平方向居中。它的大小为 120 像素乘以 36 像素。

CTA 按钮位于底部附近

图像和视频

AMP Story 广告中包含的图像和视频应为 4:3 标准全屏。包含视频的广告应使用 海报。海报图像的建议尺寸为 720p（720 宽 x 1280 高）。

<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 添加到您的创意的 body 中。建议根据此信号触发动画。

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

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

赞助故事以 URL 的形式存在于网络上，从而可以通过 AMP Story 广告上的号召性用语按钮将用户流量引导至赞助故事。赞助故事是一个 AMP Story，但侧重于沉浸式和广泛的广告体验。

CTA 按钮定向到赞助故事

请阅读此处，详细了解如何创建 Web Story。