AMP

重要事項:此文件不適用於您目前選取的格式 廣告

amp-story-auto-ads

說明

動態地將廣告插入故事中。

 

必要指令碼

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

動態地將廣告插入故事中。

入門

如需瞭解如何在 AMP Story 中加入廣告,請參閱我們的指南

建立 AMP Story 廣告的最佳實務

如果您有興趣為 AMP Story 平台建立廣告,請參閱我們的最佳實務指南

行為

amp-story-auto-ads 擴充功能會在使用者瀏覽內容時,動態地將廣告 (以 amp-ad 實作) 插入故事中。目前的演算法預期故事至少包含 7 頁。

每個 amp-ad 都會以全螢幕故事頁面形式插入。為了避免顯示空白/未載入的廣告,廣告會在背景中完整預先呈現,然後才向使用者顯示。擴充功能會根據使用者互動,判斷何時及何處插入廣告。

在故事中,廣告可以像一般故事頁面一樣,透過輕觸螢幕右側來略過。

設定

設定廣告的方式有兩種:InlineRemote

Inline 廣告設定

<amp-story-auto-ads> 元素中,您會指定一個 JSON 設定物件,其中包含廣告應如何擷取和顯示的詳細資訊,如下所示:

<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        "ad-attributes": {
          "type": "doubleclick",
          "data-slot": "/30497360/a4a/amp_story_dfp_example"
        }
      }
    </script>
  </amp-story-auto-ads>
  ...
</amp-story>

ad-attributes 是鍵值組的地圖,這些鍵值組是要插入的 amp-ad 元素的屬性。

以上範例將插入以下 amp-ad 元素,代表由 doubleclick 提供的廣告

<amp-ad type="doubleclick" data-slot="/30497360/a4a/amp_story_dfp_example">
</amp-ad>

與一般的 amp-ad 不同,此處不需要指定 <fallback><placeholder>,因為故事中的廣告只會在完整渲染後才會顯示。

Remote 廣告設定

除了在指令碼標記內加入 JSON 設定檔 (如 Inline 廣告設定章節所示) 之外,您也可以使用下列項目託管遠端網址:

遠端 JSON 廣告設定檔

{
  "ad-attributes": {
    "type": "doubleclick",
    "data-slot": "/30497360/a4a/amp_story_dfp_example"
  }
}

設定好 JSON 設定檔後,只需使用

html 廣告設定程式碼來擷取遠端網址

<amp-story-auto-ads> 元素中,如下所示

<amp-story standalone supports-landscape>
    <!--
      This is an example of JSON retrieved from a source file.
    -->
    <amp-story-auto-ads src="/examples/amp-story/ads/remote.json" ></amp-story-auto-ads>
    <amp-story-page id="page-1">
    .
    .
    .
</amp-story>

傳遞額外屬性 (RTC、目標鎖定等)

如果您想要將任何額外資料 (例如目標鎖定資訊) 以屬性形式傳遞至建立的 <amp-ad> 標記,只需將額外的鍵值組加入 ad-attributes JSON 物件即可。

常見的使用案例是將目標鎖定資料或 RTC 設定傳遞至底層 amp-ad 元素。更複雜的設定可能如下所示:

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "doubleclick",
        "data-slot": "/30497360/a4a/amp_story_dfp_example",
        "rtc-config": {
          "urls": ["https://rtcEndpoint.biz/"]
        },
        "json": {
          "targeting": {
            "loc": "usa",
            "animal": "cat"
          },
          "categoryExclusions": ["sports", "food", "fun"]
        }
      }
    }
  </script>
</amp-story-auto-ads>

這會產生以下 amp-ad 元素的建立結果。

<amp-ad
  type="doubleclick"
  data-slot="/30497360/a4a/amp_story_dfp_example"
  rtc-config='{"urls": ["https://rtcEndpoint.biz/"}'
  json='{"targeting":{"loc": "usa", "animal": "cat"}, "categoryExclusions":["sports", "food", "fun"]}'
>
</amp-ad>

驗證

amp-story-auto-ads 必須是 amp-story 元素的直接子元素。

插入控制

如果故事中有特定位置是您希望永遠不要顯示廣告的位置,您可以將 next-page-no-ad 屬性加入 <amp-story-page>。然後,插入演算法會在嘗試插入廣告時,跳過此頁面後的插槽。

<amp-story-page next-page-no-ad id="page-7">
  ...
</amp-story-page>

<!-- No ad will ever be inserted here. -->

<amp-story-page next-page-no-ad id="page-8">
  ...
</amp-story-page>

分析

使用 amp-story-auto-ads 時,將有數個新的 分析觸發器和 [變數] 可用於您的分析設定。

觸發器

名稱 事件
story-ad-request 已請求廣告。
story-ad-load 已載入廣告。
story-ad-insert 已插入廣告。
story-ad-view 已檢視廣告。
story-ad-click 已點擊廣告的 CTA 按鈕。
story-ad-exit 使用者停止觀看廣告。
story-ad-discard 由於設定無效,廣告已捨棄。

變數

以下變數將大致依序提供。然後,變數可用於任何後續 Ping。例如,使用 story-ad-load 觸發器的要求將無法存取 viewTime 變數,因為該變數尚未發生 (這會解析為空字串)。相反地,使用 story-ad-exit 觸發器傳送的要求將能夠取得所有先前事件的值 (requestTimeloadTimeinsertTime 等)。

名稱 定義
adIndex 產生觸發器的廣告索引 (適用於所有觸發器)
adUniqueId 每個廣告都應唯一的 ID (適用於所有觸發器)
requestTime 請求廣告時的時間戳記
loadTime 廣告發出 INI_LOAD 訊號時的時間戳記
insertTime 廣告插入故事時的時間戳記
viewTime 廣告頁面變成活動頁面時的時間戳記
clickTime 點擊廣告時的時間戳記
exitTime 廣告頁面從活動變為非活動狀態時的時間戳記
discardTime 由於中繼資料錯誤等原因而捨棄廣告時的時間戳記
position 在父故事中的位置。廣告之前的頁面數 + 1。不計算先前插入的廣告頁面。(在插入時可用)
ctaType 已插入廣告的指定 cta-type (在插入時可用)
需要更多協助嗎?

您已閱讀此文件十幾次,但它沒有真正涵蓋您的所有問題嗎?或許其他人也有同感:在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能嗎?

AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub