レスポンシブ DFP 広告ユニットの作り方

公開: 2016-01-22
Google dfp レスポンシブ広告 - doubleclick タグの例

この投稿の最新の更新日は 2021 年 8 月 31 日です。

レスポンシブ テーマがあり、AdSense から Google アド マネージャー (GAM) に移行したいと考えています。 最初に目にするのは、AdSense で通常見られるようなレスポンシブな広告ユニットがないことです。

Google のサポート手順は、少しトリッキーまたは複雑な場合があります。 そこで今日は、いくつかの簡単な手順で GAM コードをレスポンシブにする方法を紹介します。

DFP コードをカスタマイズして Google Ad Manager のレスポンシブ広告を作成するのは簡単なことではありません。コーディングの経験がない場合は、専門家に最初から正しくコーディングしてもらう方が賢明です。広告収入を失う危険を冒したくありません!

サポートが必要な場合は、こちらからお問い合わせください。

始める前に、次のことを確認してください。

  1. 在庫を設定します。 広告ユニットごとに関連するすべてのサイズを設定します。 読む: Adsense と GAM の統合のベスト プラクティス
  2. 複数のアド マネージャー タグを生成する方法については、https://youtu.be/s74dMDzczyc のチュートリアルをご覧ください。
  3. ここで、2 つのテキスト ファイルを作成して保存します。 優れたテキスト エディターを使用します (無料で使いやすいので、Notepad++ を使用することをお勧めします)。
  4. ヘッド用に 1 つ、ボディ タグ用にもう 1 つ作成します。
  5. body タグを保存します。
  6. 作成した head.txt ファイルを開きます。

head タグをレスポンシブにする

ステップ 1:メモ帳 ++ で h​​ead.txt を開きます。まずは、一歩一歩やってみましょう。 ヘッダー コードは次のようになります。

<!– GPT タグの開始 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<スクリプト>

window.googletag = window.googletag || {コマンド: []};

googletag.cmd.push(関数() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT タグの終了 –>

ステップ 2:そこでコードの一部を強調表示しました。

googletag.cmd.push(関数() {

強調表示された行の後にコードを少し追加する必要があります。 以下は、追加する必要がある特定のコードです。 次の中から選択したルートに対応するインスタンス (コピー) をいくつでも貼り付けます。

  • サイズマップの数。 該当する場合は、複数の広告ユニットで同じサイズの地図を再利用できます
  • 所有している広告ユニットの数
  • レスポンシブにしたい広告ユニットの数
var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[300, 250], [728, 90], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]])。 //モバイル

addSize([0, 0], [[320, 50], [1, 1]])。 //他の

建てる（）;

ステップ 3:別のコードを強調表示しました。これは、後で広告ユニットに渡すマッピングの名前です。 私はこのように作成することを好むので、上記の例では、ユニットごとに 1 つのサイズのマップを作成することを選択しています。つまり、4 つのインスタンスが必要であり、後に配置します。

googletag.cmd.push(関数() {

ステップ 4:マッピングを追加すると、ヘッダー コードは次のようになります。

<!– GPT タグの開始 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<スクリプト>

window.googletag = window.googletag || {コマンド: []};

googletag.cmd.push(関数() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]))。 //デスクトップ

addSize([768, 0], [[300, 250], [728, 90], [1, 1]])。 //タブレット

addSize([0, 0], [1, 1])。 //他の

建てる（）;

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]])。 //デスクトップ

addSize([768, 0], [[728, 280], [728, 90], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [1, 1]])。 //モバイル

addSize([0, 0], [[320, 50], [1, 1]])。 //他の

建てる（）;

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]])。 //モバイル

addSize([0, 0], [[300, 250], [1, 1]])。 //他の

建てる（）;

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]])。 //タブレット

addSize([0, 0], [1, 1])。 //他の

建てる（）;

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT タグの終了 –>

ステップ 5:最後のステップ: 各広告ユニットのサイズ マッピングを定義または割り当てる必要があります。ここで 1 つ取得してみましょう。次に、何をどこに追加するかを示します。

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

ステップ 6:次に、このコード.defineSizeMapping(mappingadunitname)を上記のコードの青と赤の部分の間に追加する必要があります。つまり、ドットの前

ここで重要なことは、括弧内の単語が、広告ユニット内に追加するサイズ マップと一致している必要があるということです。 この例では、RightRail_Ad1 は次のように表示されます。

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

ステップ 7:他のすべての広告ユニットに同様のマッピングを追加すると、最終的なコードが得られます。

<!– GPT タグの開始 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<スクリプト>

window.googletag = window.googletag || {コマンド: []};

googletag.cmd.push(関数() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]))。 //デスクトップ

addSize([768, 0], [[300, 250], [728, 90], [1, 1]])。 //タブレット

addSize([0, 0], [1, 1])。 //他の

建てる（）;

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]])。 //デスクトップ

addSize([768, 0], [[728, 280], [728, 90], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [1, 1]])。 //モバイル

addSize([0, 0], [[320, 50], [1, 1]])。 //他の

建てる（）;

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]])。 //モバイル

addSize([0, 0], [[300, 250], [1, 1]])。 //他の

建てる（）;

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]])。 //タブレット

addSize([0, 0], [1, 1])。 //他の

建てる（）;

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– GPT タグの終了 –>

注: コードの一部は、どのサイズ マップがどの広告ユニットに使用されたかを強調するために強調表示されています。

ステップ 8:サイズ マッピングを見てみましょう。

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //デスクトップ

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]])。 //タブレット

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]])。 //モバイル

addSize([0, 0], [[300, 250], [1, 1]])。 //他の

建てる（）;

赤色のコードは、ブラウザーの幅と高さを定義します。 通常、高さは重要ではありません。これは、上記のコードで 2 行の幅が等しい場合にのみ考慮されるためです。

ステップ 9:今、最初の行でこれを言っています:

  • ブラウザの幅が 992px 以上の場合は、728×280 または 728×90 または 336×280 または 300×250 または 1×1 の広告サイズを表示してください

そして最後の行では、次のように言っています。

  • ブラウザの幅が 320px 以上の場合は、320×50 または 320×100 または 320×200 または 300×250 または 1×1 の広告サイズを表示してください

番号、992px、768px、および 320px は、デスクトップ、タブレット、およびモバイル ブラウザーの従来のサイズに従うため、ほとんどの Web サイトで機能します。

ただし、タブレットとモバイルのテーマを使用した Web サイトがある場合は、開発者にテーマの遷移がトリガーされるブラウザーのサイズを尋ねてから、それぞれ 768px と 320px の代わりにそのサイズを追加できます。

2019 年のプログラマティック収益戦略は?

MonetizeMore では、パブリッシャーが既存の広告在庫からより多くの収益を得られるよう支援しています。私たちは主要な Google パブリッシング パートナーであり、クライアントが収益目標を達成し、広告運用の問題を解決するのに役立つ一連のパブリッシャー収益化ソリューションを提供しています。

DFP レスポンシブ広告ユニットを自分で設定することは完全に可能ですが、機会費用を考慮することが重要です。ビジネスの成長に費やすことができた時間を費やす価値はありますか?

DFP レスポンシブ広告ユニットの設定に関するヘルプをご希望の場合。今すぐ MonetizeMore でプレミアム アカウントにサインアップしてください!

収益化するプログラマティック収益の最適化

関連記事:

  • AdSense はレスポンシブ広告ユニットを提供します
  • 2016 年の上位のモバイル広告タイプ
  • Doubleclick の Accelerated Mobile Pages がサイト運営者にもたらすメリット
  • モバイル広告費がデスクトップを上回る中、パブリッシャーを準備する方法
  • Doubleclick がクロスデバイス トラッキングとネイティブ広告をモバイル広告主とパブリッシャーに提供