處理重度廣告幹擾

Rowan Merewood

如果廣告耗用裝置資源的比例過高，就會對使用者體驗造成負面影響，例如效能明顯降低，或是電池耗電量增加或耗用頻寬配額等較不明顯的後果。這類廣告從主動惡意 (例如加密貨幣挖礦程式) 到含有無意間出現的錯誤或效能問題的真實內容，應有盡有。

Chrome 會限制廣告可使用的資源，如果超出限制，就會卸載該廣告。詳情請參閱 Chromium 網誌上的公告。卸載廣告的機制是重度耗資源廣告的干涉機制。

重度耗資源廣告條件

如果使用者未與廣告互動 (例如未輕觸或點選廣告)，且符合下列任一條件，系統就會將廣告視為耗用大量資源：

主執行緒總使用時間超過 60 秒
在任何 30 秒的時間範圍內，使用主執行緒超過 15 秒
網路頻寬用量超過 4 MB

廣告影格任何後代 iFrame 使用的所有資源，都會計入該廣告的介入限制。請注意，主執行緒時間限制與廣告載入後經過的時間不同。限制是指 CPU 執行廣告程式碼的時間長度。

測試介入措施

這項干預措施已在 Chrome 85 中推出，但預設會為門檻加入一些雜訊和變異性，以保護使用者隱私。

將 chrome://flags/#heavy-ad-privacy-mitigations 設為「已停用」會移除這些保護措施，也就是說，系統會根據限制條件套用限制，這應該有助於簡化偵錯和測試作業。

注意：舊版 Chrome 包含 #heavy-ad-privacy-mitigations-opt-out 和 #enable-heavy-ad-intervention 標記，可供初步測試。這些旗標已移除，不再需要使用。

觸發介入措施後，您應該會看到 iframe 中的內容，而原本的耗用資源廣告則會替換為「廣告已移除」訊息。如果點選隨附的「詳細資料」連結，會看到以下訊息：「這個廣告使用太多裝置資源，因此 Chrome 已將其移除。」

您可以在 heavy-ads.glitch.me 上查看套用至範例內容的干預措施。您也可以使用這個測試網站載入任意網址，快速測試自己的內容。

請注意，測試時可能因為多種原因，導致系統無法套用介入措施。

在同一個網頁中重新載入相同廣告，即可免除該組合的干預措施。清除瀏覽記錄，然後在新分頁中開啟該頁面，或許就能解決問題。
確保頁面保持焦點狀態，如果將頁面移至背景 (切換至其他視窗)，系統會暫停該頁面的工作佇列，因此不會觸發 CPU 介入。
測試時請勿輕觸或點按廣告內容，因為如果內容有任何使用者互動，系統就不會套用介入措施。

您需要做些什麼？

您在網站上顯示第三方供應商的廣告

您不必採取任何行動，但請注意，使用者在您的網站上可能會看到超過限制的廣告，這些廣告會遭到移除。

您在網站上顯示第一方廣告，或提供廣告供第三方顯示

請繼續閱讀，確保您透過 Reporting API 導入必要的監控功能，以因應干預重度廣告的情況。

您建立廣告內容，或維護廣告內容建立工具

請繼續閱讀，確保您瞭解如何測試內容，找出效能和資源用量問題。您也應參閱所選廣告平台的指南，因為這些平台可能會提供額外的技術建議或限制，例如 Google 的多媒體廣告素材指南。建議您直接在製作工具中建構可設定的門檻，避免成效不佳的廣告放送。

移除廣告會有什麼影響？

Chrome 中的干預措施會透過適當命名的 Reporting API 回報，並使用 intervention 報表類型。您可以透過 Reporting API，在 JavaScript 中或透過傳送 POST 要求至回報端點，接收有關干預措施的通知。

系統會在根廣告標記 iframe 上觸發這些報表，以及所有子項 (也就是干預措施卸載的每個影格)。也就是說，如果廣告來自第三方來源 (即跨網站 iframe)，則由該第三方 (例如廣告供應商) 負責處理檢舉。

如要為 HTTP 報表設定網頁，回應應包含 Report-To 標頭：

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

觸發的 POST 要求會包含類似下列的報表：

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
 }
}]

注意：系統預期會收到 null 值。達到限制時，系統會觸發介入措施，但程式碼中的特定點不一定是問題所在。

JavaScript API 會為 ReportingObserver 提供 observe() 方法，可用於觸發干預措施的回呼。如要將其他資訊附加至報表，以利偵錯，這項功能就非常實用。

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json via your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

不過，由於干預措施會從 iframe 中移除網頁，因此您應加入安全機制，確保系統在網頁完全消失前擷取報表，例如 iframe 中的廣告。為此，您可以將相同回呼掛鉤至 pagehide 事件。

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

請注意，為保護使用者體驗，pagehide 事件會限制其中可執行的工作量。舉例來說，如果嘗試傳送含有報表的fetch()要求，該要求就會遭到取消。您應使用 navigator.sendBeacon() 傳送該報表，但即使如此，瀏覽器也只能盡力而為，無法保證一定能傳送。

JavaScript 產生的 JSON 類似於 POST 要求中傳送的 JSON：

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

診斷干預措施的原因

廣告內容就是網頁內容，因此請使用 Lighthouse 等工具，稽核內容的整體成效。稽核結果會提供改善建議。您也可以參閱 web.dev/fast 系列文章。

建議您在較為獨立的環境中測試廣告。您可以在 https://heavy-ads.glitch.me 使用自訂網址選項，透過預先製作的廣告標記 iframe 測試這項功能。您可以使用 Chrome 開發人員工具驗證內容是否已標記為廣告。在「Rendering」面板中 (依序點選三點圖示 ⋮ 選單、「More Tools」>「Rendering」即可存取)，選取「Highlight Ad Frames」。如果在頂層視窗或其他未標記為廣告的環境中測試內容，系統不會觸發介入措施，但您仍可手動檢查是否達到門檻。

框架的廣告狀態也會顯示在「元素」窗格中，開頭 <iframe> 代碼後方會加入註解 ad。您也可以在「影格」部分下方的「應用程式」面板中查看，標記廣告的影格會包含「廣告狀態」屬性。