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 廣告，但具有必要的 Meta 標籤資料，符合已定義的版面配置規格和必要的 UI 元素。Web Story 廣告始終包含呼籲行動 (CTA) 按鈕和廣告標籤，廣告標籤以文字免責聲明形式顯示在頁面頂端。

AMP Story 廣告範例

為了保持使用者體驗一致，Web Story 執行階段負責呈現廣告標籤和 CTA 按鈕。

重要事項 – 在 Web Story 廣告中，只有 CTA 按鈕可點擊，因此在開發廣告素材時請牢記這一點。

範本

請參閱我們預先製作的範本以取得靈感，或作為您建置廣告素材的起點（請務必選取 story ads 晶片）。

Meta 標籤資料

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 議題。

廣告到達頁面

您可以為 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，請按這裡。