廣告程式碼安裝

如何建立 AMP 相容廣告單元

本指南將說明如何建立 AMP 相容廣告單元,以便在 AMP 網頁上顯示 AdSense 廣告。

您可以建立回應式或固定大小的 AdSense AMP 廣告單元,我們的建議是使用回應式 AMP 廣告單元。原因如下:

  • 回應式 AMP 廣告單元可配合使用者用來瀏覽網頁的裝置,自動調整版面大小、展開至螢幕的最大寬度。
  • Google 可以調整廣告尺寸,確保廣告在您的網頁上能有效運作。
所有 AdSense 功能 (例如「允許/封鎖廣告」、「廣告平衡」、「成效報表」等) 都支援 AMP 廣告。

事前準備

確保您已將必要的 AMP 指令碼加到您想要顯示 AMP 廣告的網頁中。

  • 如要加入指令碼,請複製下列程式碼並貼到網頁 AMP HTML 中的 <head></head> 代碼之間:

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

這段指令碼會載入必要的 amp-ad 程式庫,但廣告還不會顯示在您的 AMP 網頁中。如果想要顯示廣告,您還需要加入 AMP 相容的廣告程式碼。您可以前往以下網址深入瞭解 amp-ad 元件:https://www.ampproject.org/docs/reference/components/amp-ad

建立回應式 AMP 相容廣告單元

目前您只能手動建立回應式 AMP 廣告單元,需要完成的步驟如下:

  1. 在 AdSense 帳戶中新建回應式廣告單元
  2. 在步驟 1 所建立回應式廣告單元的廣告程式碼中,找到並記下這些資訊:
    • 您的發佈商 ID (data-ad-client),例如 ca-pub-1234567891234567
    • 您的廣告單元 ID (data-ad-slot),例如 1234567890

    查看範例

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. 建立 AMP 廣告程式碼
    複製下列廣告程式碼,並將 data-ad-clientdata-ad-slot 的值替換成您在步驟 2 記下的值。
    <amp-ad width="100vw" height=320
       type="adsense"
         data-ad-client="ca-pub-1234567891234567"
       data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
      <div overflow></div>
    </amp-ad>
    我們強烈建議您不要修改以上廣告程式碼的其他部分,要是修改不當可能會導致廣告程式碼停止運作。
  4. 找到您想要讓廣告顯示的行動網頁,然後將 AMP 廣告程式碼貼到該網頁的 HTML 原始程式碼中。請注意,不需捲動位置需捲動位置都是可接受的廣告刊登位置。但別忘了,包含 AMP 廣告單元的網頁還是必須符合 AdSense 計劃政策的規定。
    請勿將廣告程式碼放置於高度固定或受限的上層容器內 (<div><iframe> 等),否則您的廣告可能會改變大小,而破壞了網頁版面配置。
  5. (選擇性採用) 將 AMP 廣告程式碼放置妥當後,建議您使用不同的行動裝置測試廣告,確保回應式廣告可以正常運作。
    在您的 AMP 網頁上觀看廣告時可能會有稍微延遲的情況,因為 AMP 會優先顯示內容再顯示廣告。進一步瞭解 AMP 網頁的快取方式

進階使用範例:固定 AMP 廣告大小、設定 AMP 廣告樣式等

如要固定 AMP 廣告單元的寬度或高度,請按照以下操作說明,瞭解如何修改回應式 AMP 廣告程式碼

或者,您還可以進一步打造不同樣式的 AMP 廣告元素,就像調整其他 AMP 元素一樣。進一步瞭解各種控制版面配置的方式。

追蹤 AMP 廣告單元的成效

您可以查看內容平台報表來追蹤 AMP 廣告單元的成效。

這篇文章實用嗎?
我們應如何改進呢?