避免常見導入錯誤

下列情境代表了您在 導入 GPT雖然這類實作方式可能與目前的現行版本相容 則無法保證日後還會繼續運作。在 在極少數的情況下，這些導入方式可能會導致廣告放送作業意外中斷。 屬於不支援的導入方式。

每種情況都有修正問題的建議做法。

請注意，這份清單並未完整列出所有潛在問題 但應該可以做為實用的指南，協助您找出可能需要處理的問題類型。 需要處理。

此外，視導入方式而定，您可能需要找出 您可能需要對網站進行此類變更。

常見錯誤

情境 1：使用非官方版本的 GPT JavaScript 程式庫

應用實例概要說明 代管 gpt.js、pubads_impl.js，或是從自家伺服器載入的任何程式庫，或者 從非官方來源載入這些檔案。
含有錯誤的程式碼片段示例 
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
錯誤修正建議 
// Correct: Access these files from a Google domain
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
// Also correct, if using Limited Ads
<script src="https://pagead2.googlesyndication.com/tag/js/gpt.js" async></script>

情境 2：仰賴 gpt.js 指令碼代碼監聽器

應用實例概要說明 假設 JavaScript 檔案已準備好呼叫 GPT API gpt.js 載入有誤，因為 API 的某些部分是由 pubads_impl.js 檔案。以任何方式 (包括架構) 仰賴 API 因此不正確。
含有錯誤的程式碼片段示例 
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
// Incorrect: Attaching a callback to the script's onload event.
tag.onload = callback;
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(tag, node);
錯誤修正建議 
// Make sure that googletag.cmd exists.
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
// Correct: Queueing the callback on the command queue.
googletag.cmd.push(callback);
修正方式的說明 / 說明 googletag.cmd 維護的指令清單，將以 GPT 執行時執行 準備就緒。這樣才能確保 GPT 載入後可以執行回呼。

情境 3：檢查 googletag 物件，確認 GPT 是否已就緒

應用實例概要說明 由於系統載入 JavaScript 檔案 gpt.js 時，GPT API 可能還未準備就緒 或在定義 googletag 物件的情況下檢查該物件 GPT API 並不可靠
含有錯誤的程式碼片段示例 
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
錯誤修正建議 
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
修正方式的說明 / 說明 GPT 會將此資訊填入布林值標記 googletag.apiReady 系統已準備好呼叫 API，方便您進行可靠的斷言。

情境 4：仰賴模糊的程式碼語法

應用實例概要說明 如果您遵循最小化 GPT 程式庫程式碼的語法 隨時可能發生故障我們持續不斷變更，因此請限制您僅能使用 API 參考指南中所述的 API 用途 GPT 內部運作方式的持續改進
例如，常見的要求是偵測 呼叫 refresh()。
含有錯誤的程式碼片段示例 
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
錯誤修正建議 
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
修正方式的說明 / 說明 只能使用公用 API。如要偵測 PubAdsService 是否 完整載入後，我們可以使用布林值 googletag.pubadsReady。

情境 5：覆寫 GPT 的任何函式或變數

應用實例概要說明 因覆寫 GPT 使用的任何函式或變數而產生的用途隨時都有可能中斷 因為這並非支援的用途GPT 內部時間變更可能會導致這個問題 各種錯誤行為
含有錯誤的程式碼片段示例 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
錯誤修正建議 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

情境 6：以錯誤順序呼叫 GPT

應用實例概要說明 隨著 GPT 內部的演進，競爭狀況可能會造成中斷。不正確 因執行作業期間特定時間而運作的一系列陳述式，並排序 可能無法繼續運作
含有錯誤的程式碼片段示例 
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
錯誤修正建議 
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
修正方式的說明 / 說明 如要避免競爭狀況，請確保遵循 GPT 的正常時間。有效範例 部分排序包括：
  • 定義啟用多媒體廣告
    1. 定義頁面層級設定
    2. 定義運算單元
    3. enableServices()
    4. 顯示版位
  • 啟用定義多媒體廣告
    1. 定義頁面層級設定
    2. enableServices()
    3. 定義運算單元
    4. 顯示版位

情境 7：濫用閉包和 JavaScript 變數範圍

應用實例概要說明 JavaScript 變數範圍和變數值的相關假設不正確 中已擷取到 googletag.cmd.push 的函式中。
含有錯誤的程式碼片段示例 
// Incorrect: Variable x is declared outside the anonymous function
// but referenced within it.
for (var x = 0; x < slotCount; x++) {
 window.googletag.cmd.push(
  function(){
    // If GPT is not yet loaded, this code will be executed subsequently when
    // the command queue is processed. Every queued function will use the last value
    // assigned to x (most likely slotCount).
    // This is because the function closure captures the reference to x,
    // not the current value of x.
    window.googletag.display(slot[x]);
  })
 }
}
錯誤修正建議 
window.googletag.cmd.push(
 function(){
  // Correct: We both declare and reference x inside the context of the function.
  for (var x = 0; x < slotCount; x++){
   window.googletag.display(slot[x]);
  }
 }
)
修正方式的說明 / 說明

在 JavaScript 中，閉包會根據參照 (而非值) 擷取變數。也就是說 因此，如果您重新指派變數，系統就會在函式時使用該變數的新值 擷取該資料的閉包之後會執行。因此，程式碼之外的行為 可能會變更，取決於回呼是立即執行或延遲。

如果是非同步載入的 GPT (視 GPT 載入廣告代碼的速度而定) 可能會立即或不會立即執行指令佇列中的回呼。在前一個 例如，這會改變佇列指令的行為。

為了避免發生問題，您應該在不假設其功能的情況下編寫程式碼 放在指令佇列中的檔案會立即執行，並應謹慎處理 不支援 JavaScript 的範圍規則

情境 8：呼叫顯示器後，在 DOM 中移動運算單元容器

應用實例概要說明 在呼叫顯示後，在 DOM 移動或插入運算單元容器，可能導致 GPT 中的非預期自動重排和無法預測的行為
含有錯誤的程式碼片段示例 
// Incorrect: Moving slot containers after calling display
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
...
// Inserting another element before the slot container, pushing the slot container down the page.
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
錯誤修正建議 
// Correct: Make any DOM order changes before calling display

document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
...
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
上一頁
監控成效