重要事項:此文件不適用於您目前選取的格式 廣告!
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
都會以全螢幕故事頁面形式插入。為了避免顯示空白/未載入的廣告,廣告會在背景中完整預先呈現,然後才向使用者顯示。擴充功能會根據使用者互動,判斷何時及何處插入廣告。
在故事中,廣告可以像一般故事頁面一樣,透過輕觸螢幕右側來略過。
設定
設定廣告的方式有兩種:Inline 和 Remote
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 廣告設定章節所示) 之外,您也可以使用下列項目託管遠端網址:
{ "ad-attributes": { "type": "doubleclick", "data-slot": "/30497360/a4a/amp_story_dfp_example" } }
設定好 JSON 設定檔後,只需使用
在 <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
觸發器傳送的要求將能夠取得所有先前事件的值 (requestTime
、loadTime
、insertTime
等)。
名稱 | 定義 |
---|---|
adIndex |
產生觸發器的廣告索引 (適用於所有觸發器) |
adUniqueId |
每個廣告都應唯一的 ID (適用於所有觸發器) |
requestTime |
請求廣告時的時間戳記 |
loadTime |
廣告發出 INI_LOAD 訊號時的時間戳記 |
insertTime |
廣告插入故事時的時間戳記 |
viewTime |
廣告頁面變成活動頁面時的時間戳記 |
clickTime |
點擊廣告時的時間戳記 |
exitTime |
廣告頁面從活動變為非活動狀態時的時間戳記 |
discardTime |
由於中繼資料錯誤等原因而捨棄廣告時的時間戳記 |
position |
在父故事中的位置。廣告之前的頁面數 + 1。不計算先前插入的廣告頁面。(在插入時可用) |
ctaType |
已插入廣告的指定 cta-type (在插入時可用) |
您已閱讀此文件十幾次,但它沒有真正涵蓋您的所有問題嗎?或許其他人也有同感:在 Stack Overflow 上與他們聯繫。
前往 Stack Overflow 發現錯誤或缺少功能嗎?AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。
前往 GitHub