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

次のシナリオは、本番環境での陥りやすい誤りの一部を示しています。実装しましたこのような実装は、現在のバージョンの 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 ページレベル設定を定義するスロットを定義する enableServices() ディスプレイスロットディスプレイ定義を有効化 <ph type="x-smartling-placeholder"> </ph> ページレベル設定を定義する enableServices() スロットを定義するディスプレイスロット

シナリオ 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); }

パフォーマンスを把握する