web-dev-qa-db-ja.com

DFPのページ外広告ユニットを適切に作成する方法

私はJavaScriptでレンダリングされたモバイルWebインタースティシャルを開発しています。レイアウトは完全にレスポンシブであるため、提供された画面\ iframeの100％を使用します。

DFPでインタースティシャルを表示したいと思います。

最初にサイズの広告ユニット（320x480）を作成しましたが、うまく機能しましたが、インタースティシャルはiframeの境界に制限されていました。

Out-of-pageという新しい広告申込情報タイプを作成します。ドキュメントには、次のように記載されています。

ポップアップやフローティング広告申込情報が含まれる場合があり、インタースティシャルと呼ばれることもあります。

しかし、インタースティシャルをテストサイトに埋め込もうとすると、iframeが1x1のままになり、インタースティシャルが見えなくなります（手動で拡大した場合）デバッガーで、私はそれを見る）

私の設定：

  • 広告申込情報在庫サイズが1x1でページ外
  • creativeと私のコードスニペット
  • 広告ユニットはサイズ1x1として定義されています

私は documentation を読みました：

DoubleClickタグクリエイティブを使用している場合は、DoubleClickタグのもう一方の端（つまり、別のDFPネットワーク）でトラフィッキングされたクリエイティブコードが、ページ外広告ユニットに対して正しくコーディングされていることを確認する必要があります。

DFPページ外インタースティシャルに関して、広告が「適切にコーディングされている」とはどういう意味ですか？インタースティシャルに画面のすべてのサイズを強制する方法を教えてください。

javascriptiframeresponsive-designgoogle-dfpdouble-click-advertising
21
Lizozom

DFPサポートに相談した後、次の手順に従ってページ外インタースティシャル広告ユニットを作成できました。

  1. 「ページ外」の広告枠サイズで新しい広告ユニットを作成します
  2. 新しい広告申込情報と「ページ外」の広告枠サイズのモバイルクリエイティブを作成します。この広告申込情報は以前の広告ユニットをターゲティングします。

  3. ステップ2で[同期リクエストを有効にする]と[ページ外]を選択し、[在庫]タブで新しいタグを生成します。これを行うには、[同期リクエストを有効にする]が重要なようです。

    Googleサポートによると：

    通常、クリエイティブはiFrameではなく要素でレンダリングされるため、ページ外（インタースティシャル）広告を配信する場合は、サイト運営者に同期GPTを実装することをお勧めします

  4. このタグをテストページに配置し（必要なhtml、head、bodyタグを使用）、Voilà！

19
Lizozom

これで十分かわかりません。DFPの経験はあまりありませんが、iframeのサイズを手動で管理することで解決した同様の問題に遭遇しました。多分これもあなたを助けることができます。

DFP APIには、広告のレンダリングが完了したことを通知するイベントを聞くことができます。イベントが発生すると、iframeのプロパティを全幅に変更し、高さがプレースメントで機能するようにします。

ページにjQueryがあるとすると、これは非常に簡単に実行できます。 DFPプラグインをセットアップした後（defineSlotなどを呼び出す）、次のようにこのイベントのリスナーを追加できます。

googletag.pubads().addEventListener('slotRenderEnded', function(){
  var $adFrame = $('#id-of-the-iframe');
  $adFrame.css({width: '100%', height: '500px'});
});

これはDFPのドキュメント here で概説されています。

お役に立てれば。

編集：投稿した後、私が投稿したコード例はDFP GPTライブラリからのものであることに気付きました。おそらくあなたはこれを使っていません。 このSO質問 には、DFPが起動するイベントをリッスンするために誰かが作成したライブラリへのリンクがあります。それを使用して、私が説明したテクニックを使用できますか？

再び-これが役に立てば幸い:)

6
grammar

私はちょうどこれに遭遇しました。 DFPで[同期リクエストを有効にする]オプションが廃止されたようです。いくつかの理由から、これはそれほど優れたソリューションではありませんでした（他の人が指摘したように）。まず、同じページに非同期リクエストがあるとうまく機能しません。そして第二に、それは「ブロッキング」であり、あなたのページを遅くします。

Friendly iFrame

現在、推奨される方法は「Friendly iFrame」を使用することです。 Friendly iFrameを使用するには、DFPでクリエイティブを設定するときに、[SafeFrameに配信する]をオフにします。 DFPは「Friendly iFrame」に広告を配信します。 Friendly iFrameは、親ウィンドウと同じドメインから提供されるiFrameです。ドメインが一致するため、ブラウザーのセキュリティルールにより、iframe内のJavaScriptが（window.parent.documentを介して）親ウィンドウにアクセスできます。これで、iframeのサイズを調整してフルスクリーンにすることができます。これを行うには、以下のようなものを広告コードに追加します。

window.parent.document.getElementById(window.name).style.cssText = "position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; margin: 0;";

広告に閉じる方法がある場合は、閉じるときにFriendly iFrameも縮小してください（そうしないと、展開されたFriendly iFrameが基になるページでのマウスアクションをブロックします）。あなたはそうすることができます：

window.parent.document.getElementById(window.name).style.cssText = "position: relative; width: 0px; height: 0px;";

いくつかのメモ

セキュリティ上の理由から、可能な場合はいつでもSafeFrameを使用して広告を配信することをお勧めします。 SafeFrameは、完全なアクセスを許可せずに親ウィンドウと通信するためのAPIを提供します。 SafeFrameには、iFrameのサイズを拡大するための拡張オプションが含まれていますが、DFPのSafeFrame実装では、フルスクリーンに拡張できないようです。このため、インタースティシャルにはFriendly iFrameを使用するのが最善のようです。 DFPのSafeFrame実装 こちら を試すことができます。

完全に信頼できるコンテンツのみをFriendly iFrameで実行することを許可する必要があることに注意してください。FriendlyiFrameは、ユーザーセッションCookieの盗用など、多くの悪意のある処理を実行できるためです。

0
Collin Krawll