EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

テンプレートパーツで構成されるサイトのGoogleAdManager実装について

弊社のサイトは、ページ内の共通パーツをテンプレートとして作成し、ページごとに組み合わせて構成している実装が多いです。 また、ディスプレイ広告の配信には、GoogleAdManager(旧DFP)を使用していることが多いのですが、この組み合わせだと生じやすい問題があったので、それを紹介します。

GoogleAdManager

GoogleAdManager(以後、GAM)は、Google社が提供している以下の広告配信ツールです。

Google アド マネージャー - 統合型の広告管理プラットフォーム

GAMを使うと、Googleアドセンスやその他のSSPの広告枠、サイト内誘導用の自社バナーの掲載について、GAMへの入稿と設定で一元管理できるので、とても便利です。

基本的な考え方としては、ページ上の広告表示スペースをGAMで「広告ユニット」として定義し、そこで発行されるタグをHTML上に実装します。その後、出稿したい内容を「広告申込情報」として設定することで、対象とした広告ユニットに配信することができる様になります。

GAMの管理画面上では、自社バナー掲載の場合は、表示回数やクリック数の測定が可能です。また、アドセンスの場合は、表示回数やCPM、売上を測定可能で、その他のSSPも表示回数と設定CPM(仮想CPM)からの売上の集計が可能です。

広告サーバーとしての大きな特徴としては、ダイナミック アロケーションと言って、広告申込情報に対して設定した仮想CPMより高い金額のアドセンス広告があった場合は、アドセンスが優先して表示し収益の最適化を行うことができます。

GAMの実装の特徴

GAMのタグは、以下の様にHTMLのheadとbodyの2ヶ所に実装することにより、bodyの実装した場所に広告を表示することができます。

  • head
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/xxxx/xxxxxxxx', [300, 250], 'div-gpt-ad-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>
  • body
<!-- /xxxx/xxxxxxxx -->
<div id='div-gpt-ad-0' style='width: 300px; height: 250px;'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-0'); });
  </script>
</div>

ページ内に複数の広告枠を実装する場合は、headは以下の様にdefineSlotを続けて呼ぶ形にします。

  • head(複数枠)
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/xxxx/xxxxxxxx', [300, 250], 'div-gpt-ad-0').addService(googletag.pubads());
    googletag.defineSlot('/xxxx/yyyyyyyy', [300, 250], 'div-gpt-ad-1').addService(googletag.pubads());
    googletag.defineSlot('/xxxx/zzzzzzzz', [300, 250], 'div-gpt-ad-2').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>

HTMLをテンプレート分割した場合の問題点

はじめに書いたように、弊社のサイトは、ページ内の共通パーツをテンプレートとして作成し、ページごとに組み合わせて構成している実装が多いです。 具体的には、

  1. サイトのヘッダやパンくず、フッタ等の全ページ共通で使用するテンプレート
  2. 一覧系ページの下部に入れる共通パーツ、詳細系ページの下部に入れる共通パーツ、など、ページのタイプ毎に分けて使用するテンプレート
  3. ページのメイン部分のコンテンツ(これは共通パーツではないので、テンプレート化はされない)

など、いくつかの種類に分けられます。

で、それぞれのテンプレートの中に広告枠を実装していくと、1に実装した広告枠は全ページで表示され、2に実装した広告枠は該当共通パーツを使用するページで表示され、3に実装した広告枠はそれぞれのページで表示されることになります。

この時、テンプレートの組み合わせでページを作る利点としては、ページで使いたいものを使いたい場所にインクルードすれば良いことなのですが、GAMの広告枠を表示するためには上記したように、HTMLのheadで使用する広告枠についてdefineSlotしないとなりません。 つまり、ページ本体は共通パーツをインクルードするだけで実装できるものの、パーツの中にどんな広告枠が使用されているかを把握し、各ページでdefineSlotが必要となるので、共通パーツの可用性や変更自由度がかなり制限されることになります。

広告枠の評価

それでは、HTMLのheadに、サイトで使っている広告枠全てのdefineSlotしたコードをテンプレート化してインクルードすれば良いのでは?と考えたのですが、それも大きな問題があります。

GAMのサーバー(Google)側で、defineSlotされたのに実際にdisplayが呼ばれない広告枠について、広告表示リクエストがありながら広告が配信されない(fill rateが低い)広告枠と判断され、広告枠としての評価が下がります。すると、良い広告が配信されなくなり、収益性が下がることが予想されます。また、場合によっては、空リクエストの多い不審な広告枠と判断されることもあるのではないかと思っています。

弊社では、上記の広告枠実装ページの複雑さと枠定義の呼び出し(defineSlot)について、独自の実装で対応しているのですが、その方法については次回紹介したいと思います!