実装に関する一般的な誤りの回避

次のシナリオは、本番環境での陥りやすい誤りの一部を示しています。 実装しましたこのような実装は、現在のバージョンの 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.js が読み込まれたときに GPT API を呼び出す準備ができていると想定するのは誤りです。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 が読み込まれたときや googletag オブジェクトが定義されたときに GPT API が準備できていない可能性があるため、そのオブジェクトをチェックして 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 は、API が呼び出せる状態になるとすぐに、ブール値フラグ googletag.apiReady に値を設定します。これにより、信頼できるアサーションを実行できます。

シナリオ 4: 難読化されたコード構文に依存する

ユースケースの概要 圧縮された GPT ライブラリ コードの正確な構文に依存している場合、 確実に破損しますGoogle は、GPT の内部動作を絶えず改善するために、GPT の内部動作を絶えず変更しています。使用は、API リファレンス ガイドに記載されている API に限定してください。
たとえば一般的な要件は、Pub/AdsService が完全に読み込まれたタイミングを検出することです。 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 の通常のタイミングを尊重して、競合状態を回避してください。有効な部分順序の例を次に示します。
  • Define-Enable-Display
    1. ページレベル設定を定義する
    2. スロットを定義する
    3. enableServices()
    4. ディスプレイ スロット
  • ディスプレイ定義を有効化 <ph type="x-smartling-placeholder">
      </ph>
    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: display を呼び出した後に DOM 内でスロット コンテナを移動する

ユースケースの概要 display を呼び出した後に DOM でスロット コンテナを移動または挿入すると、 望ましくないリフローや予測不能な動作が発生する場合もあります。
エラーを含むコード スニペットの例 
// 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");

シナリオ 9: ブラウザ API を上書きする

ユースケースの概要 GPT では、ブラウザ API の上書き（モンキーパッチ、ポリフィル）はサポートされていません。 この方法では、GPT などのサードパーティのスクリプトが予期しない方法で動作しなくなる可能性があります。
エラーのあるコード スニペットの例 
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
推奨されるエラー修正方法 
// Correct: Avoid making changes to browser APIs.
// If you need custom logic, consider leaving the browser API intact.
const myFetch = (...args) => {
  console.log('Fetching!');
  return window.fetch(...args);
}
前へ
パフォーマンスを把握する