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) 按鈕，以及在頁面頂端顯示為文字免責聲明的廣告標籤。

為了保持使用者體驗一致，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 商店頁面。CTA 按鈕文字列舉是在廣告回應酬載中指定。

如果需要支援新的 CTA 按鈕文字列舉，請開啟 GitHub issue。

廣告到達網頁

您可以為 Web Story 廣告到達網頁指定三個選項之一。

STORY：到達網頁是贊助故事。
AMP：到達網頁是有效的 AMP 網頁。
NONAMP：任何其他類型的網頁。

版面配置

AMP Stories (網頁故事) 是水平和全螢幕。Story 廣告必須符合此格式，才能提供一致的使用者體驗。

疊加尺寸

廣告標籤會疊加在廣告整個寬度的深色漸層長條上，並從頂端延伸至下方 46 像素處。

CTA 位於底部上方 32 像素處，並在水平方向置中。其尺寸為 120 像素 x 36 像素。

圖片和影片

AMP Story 廣告中包含的圖片和影片應為 4:3 標準全螢幕。包含影片的廣告應使用 poster。海報圖片的建議尺寸為 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 桌面版瀏覽器 (即使透過模擬也不支援) 不支援 HLS 影片格式，因此任何桌面版流量都必須指定 MP4 備用選項。如要偵錯 HLS 影片，您需要透過 USB 偵錯使用實際的行動裝置。

影片解析度

Web Story 影片一律為垂直 (即直向檢視)，預期的長寬比為 16:9。請針對影片串流類型使用建議的解析度

影片串流類型	解析度
非自適應	720 x 1280 像素
自適應	720 x 1280 像素 540 x 960 像素 360 x 480 像素

注意 – 對於長寬比與 16:9 不同的行動裝置，影片可能會水平或垂直裁剪以符合可視區域。

影片編碼

對於 MP4，請使用 H.264。
對於 WEBM，請使用 VP9。
對於 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>

贊助故事

贊助故事以網址形式存在於網路上，可讓使用者透過 AMP Story 廣告上的呼籲行動按鈕將使用者流量導向贊助故事。贊助故事是一種 AMP Story，但重點在於沉浸式且廣泛的廣告體驗。

如要進一步瞭解如何建立Web Story (網頁故事)，請按一下這裡。