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 晶片)。

Meta 標籤資料

中繼標籤資料會指定廣告符合 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 像素。

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 桌面版瀏覽器 (即使透過模擬也不支援) 不支援 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>

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

CTA 按鈕會導向贊助故事

如要進一步瞭解如何建立Web Story，請按這裡。