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

次のシナリオは、本番環境での陥りやすい誤りの一部を示しています。実装しましたこのような実装は、現在の使用しても、今後もその状態が続く保証はありません。極端な場合、こうした実装では広告の配信が予測不能な形で中断することがあります。これらはサポートされていない実装と見なされます。

各シナリオには、示された問題を解決するための推奨アプローチが含まれています。

なお、このリストは潜在的な問題を完全に網羅しているわけではありません。どのタイプの問題が必要かを特定するための有用なガイドとして対処することはできません。

さらに、実装によっては、すべての依存関係をサイト内で変更が必要になることがあります。

よくある誤り

シナリオ 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` オブジェクトが定義されているときに、そのオブジェクトをチェックして、利用できるかどうかが信頼性に欠ける点です
エラーを含むコードスニペットの例	// 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 に限定してください。Google は継続的に変更を行っています。継続的な改善につなげていますたとえば、一般的な要件は、PubAdsService が完全に読み込まれたタイミングを検出することです。 `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 の通常のタイミングを尊重して、競合状態を回避してください。有効な例部分順序には次のものがあります。 <ph type="x-smartling-placeholder"> </ph> Define-Enable-Display <ph type="x-smartling-placeholder"> </ph> ページレベル設定を定義するスロットを定義する 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 がファイルを読み込む速度によってコールバックがすぐに実行される場合と実行されない場合があります。前のこれにより、キューに入れられたコマンドの動作が変わります。問題を回避するには、コードが機能することを前提とせずに記述してください。即座に実行されるので、スコープルールに関連します

シナリオ 8: display を呼び出した後に DOM 内でスロットコンテナを移動する