AdSense ライブラリ

  1. 概要
  2. ライブラリを使用する
  3. AdSense アカウント
  4. マップ広告ユニット
  5. マップ広告ユニットのフォーマット
  6. マップ広告ユニットの広告スタイル
  7. マップ広告ユニットの配置

概要

AdSense ライブラリを使うと、マップ広告ユニットを介して、ご自身のGoogle Maps JavaScript API アプリで収益を上げることができます。広告ユニットには、マップの現在のビューポートに応じたディスプレイ広告が表示されます。

ライブラリを使用する

AdSense サービスは、メインの Maps API JavaScript コードから独立した別のライブラリです。このライブラリの機能を使うには、まず Maps API のブートストラップ URL の中で libraries パラメータを用いてライブラリをロードする必要があります。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=adsense"></script>

Maps API を maps.googleapis.com からロードしていても、google.maps.adsense ライブラリをロードすると Google の広告サーバに接続されるため、ブラウザのクッキーが設定される場合があります。

詳細については、ライブラリの概要をご覧ください。

AdSense アカウント

マップにディスプレイ広告を追加するには、コンテンツ向け AdSense に対して AdSense アカウントを有効にする必要があります。まだ AdSense アカウントをお持ちでない場合は、 こちらでお申し込みください。アカウントが取得できたら(または既にお持ちの場合は)、コンテンツ向け AdSenseに対してアカウントが有効になっていることを確認してください。

コンテンツ向け AdSense アカウントを取得すると、コンテンツ向け AdSense(AFC)のパブリッシャー IDが付与されます。このパブリッシャー ID をコード内で使用して、表示される広告と AdSense アカウントを紐付けると、ユーザーがそのマップ上の広告をクリックした際に、広告収入が入るようになります。

マップ広告ユニット

マップ広告ユニットは、Maps API アプリ内のディスプレイ広告を管理する Google Maps JavaScript API の新しい広告オプションです。AdUnit コンストラクタを使ってマップ広告ユニットを作成すると、ビュートポート内に表示されているマップに合った AdSense のテキスト広告が、小さなパネルに表示されます。ディスプレイ広告は、マップの広告ユニット フォーマットに応じたデフォルトの位置、指定した ControlPosition のマップ上、外部の <div> 要素内に表示されます。

広告収入を得るには、AdUnit の作成時に、コンテンツ向け AdSense のパブリッシャー ID 用も必ず指定してください。(AdUnit は、紐づけられたパブリッシャー ID がないと機能しません)。API アプリのマップ広告ユニットに表示されている広告がクリックされると、広告収入が発生するようになります。広告チャネルを作成している場合は、channelNumber コンテンツ向け AdSense も任意で指定できます。(広告チャネルの詳細については、こちらをご覧ください)。

以下のサンプルでは、広告収入を受け取れるように AdUnit を設定しています。アプリでは、ご自身のパブリッシャー ID を使う必要があります。

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(36.5987, -121.8950),
    zoom: 12
  };
  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var adUnitDiv = document.createElement('div');

  // Note: replace the publisher ID noted here with your own
  // publisher ID.
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    publisherId: 'ca-google-maps_apidocs',
    map: map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

マップ広告ユニットのフォーマット

マップの広告ユニットは、さまざまな google.maps.adsense.AdFormat タイプの表示フォーマットに対応しています。これらのフォーマットはサポートされている AdSense フォーマット に対応していて、テキスト広告リンクユニットの両方に適用できます。

  • LEADERBOARD は横幅を最大にして表示領域を作成します。
  • BANNER は横長の「バナー」広告を作成します。
  • HALF_BANNER は小さい横長の「バナー」広告を作成します。
  • SKYSCRAPER は大きい縦長の広告を作成します。
  • WIDE_SKYSCRAPER は大きめのタイプを使用して、横幅のある縦長の広告を作成します。
  • VERTICAL_BANNER は中くらいのサイズの縦長の広告を作成します。
  • BUTTON は小さい広告を作成します。
  • SMALL_SQUARE は少し大きい正方形の広告を作成します。
  • SQUARE は大きいタイプを使用して、大きな正方形の広告を作成します。
  • SMALL_RECTANGLE は小さい長方形の広告を作成します。
  • MEDIUM_RECTANGLE は中くらいのサイズの長方形の広告を作成します。
  • LARGE_RECTANGLE は大きい長方形の広告を作成します。
  • SMALL_VERTICAL_LINK_UNIT は小さい縦長のリンクユニットを作成します。
  • MEDIUM_VERTICAL_LINK_UNIT は中くらいのサイズの縦長のリンクユニットを作成します。
  • LARGE_VERTICAL_LINK_UNIT は大きい縦長のリンクユニットを作成します。
  • X_LARGE_VERTICAL_LINK_UNIT は特大サイズの縦長のリンクユニットを作成します。
  • SMALL_HORIZONTAL_LINK_UNIT は小さい横長のリンクユニットを作成します。
  • LARGE_HORIZONTAL_LINK_UNIT は大きい横長のリンクユニットを作成します。

コントロールは、すべてディスプレイ広告の上部に表示されます。

以下のサンプルを使うと、AdUnit フォーマットを変更して、広告パネルの見え方を確認できます。

var adUnit;

var SAMPLE_AD_STYLES = {
  'default': {
    'color_bg': '#c4d4f3',
    'color_border': '#e5ecf9',
    'color_link': '#0000cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'modern': {
    'color_bg': '#ffffff',
    'color_border': '#000000',
    'color_link': '#1155cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'plain': {
    'color_bg': '#f5f5f5',
    'color_border': '#cccccc',
    'color_link': '#1155cc',
    'color_text': '#333333',
    'color_url': '#009900',
  },
  'kennedy': {
    'color_bg': '#f1f1f1',
    'color_border': '#dd4b39',
    'color_link': '#4d90fe',
    'color_text': '#222222',
    'color_url': '#3d9400',
  },
  'flamingo': {
    'color_bg': '#feeeff',
    'color_border': '#d1d1ed',
    'color_link': '#5577ee',
    'color_text': '#000000',
    'color_url': '#44bbbb',
  },
  'monochrome': {
    'color_bg': '#eeeeee',
    'color_border': '#666666',
    'color_link': '#333333',
    'color_text': '#666666',
    'color_url': '#999999',
  },
  'barbecue': {
    'color_bg': '#666666',
    'color_border': '#555555',
    'color_link': '#ffcc00',
    'color_text': '#808080',
    'color_url': '#e8ab00',
  },
  'miami': {
    'color_bg': '#d6f8ff',
    'color_border': '#89d1ff',
    'color_link': '#3b8aeb',
    'color_text': '#333333',
    'color_url': '#53be05',
  },
  'shamrock': {
    'color_bg': '#f5ffe9',
    'color_border': '#449944',
    'color_link': '#009900',
    'color_text': '#596659',
    'color_url': '#779977',
  }
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(36.5987, -121.8950),
    zoom: 12
  };
  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var adUnitDiv = document.createElement('div');
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    backgroundColor: '#c4d4f3',
    borderColor: '#e5ecf9',
    titleColor: '#0000cc',
    textColor: '#000000',
    urlColor: '#009900',
    publisherId: 'ca-google-maps_apidocs',
    map: map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

  var format = document.getElementById('format');
  google.maps.event.addDomListener(format, 'change', function() {
    adUnit.setFormat(google.maps.adsense.AdFormat[this.value]);
  });

  var style = document.getElementById('style');
  google.maps.event.addDomListener(style, 'change', function() {
    var adStyle = SAMPLE_AD_STYLES[this.value];
    adUnit.setBackgroundColor(adStyle['color_bg']);
    adUnit.setBorderColor(adStyle['color_border']);
    adUnit.setTitleColor(adStyle['color_link']);
    adUnit.setTextColor(adStyle['color_text']);
    adUnit.setUrlColor(adStyle['color_url']);
  });

  var position = document.getElementById('position');
  google.maps.event.addDomListener(position, 'change', function() {
    adUnit.setPosition(google.maps.ControlPosition[this.value]);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

マップ広告ユニットの広告スタイル

AdUnit の背景や境界線、タイトル、テキスト、リンクの色を指定するには、以下の広告ユニット オプションを 1 つ以上設定します。広告スタイルが指定されていない場合は、デフォルトの色が適用されます。

  • backgroundColor:広告ユニットの背景色
  • borderColor:広告ユニットの境界線の色
  • titleColor:広告タイトルのリンク色
  • textColor:広告テキストの文字色
  • urlColor:広告アトリビューションの URL リンク色

色は 16 進数のカラーコード(例: #0000ff)か HTML カラーコードの色名(例: blue)で指定できます。

AdSense システム側で、広告の見やすさ(黒背景に黒文字の設定になっていないかなど)を簡単に確認して、必要に応じて設定をオーバーライドします。なお、マウスをかざした時に表示されるリンクの色は AdSense システム側が自動で設定するので、カスタマイズはできません。

詳細については、google.maps.adsense API リファレンスをご覧ください。

マップ広告ユニットの配置

広告ユニットはマップ上のさまざまな位置に表示できます。広告ユニットの位置を制御するには、AdUnitOptions オブジェクトの position プロパティを使います。なお、広告ユニットの位置は絶対的なものではありません。API は(マップサイズなどの)与えられた制約の範囲内で、広告ユニットを既存のマップ要素やコントロールの周りで動かして配置します。

サポートする配置は以下のとおりです。

  • TOP_CENTER は、広告ユニットをマップの上端中央に配置するよう指定します。
  • TOP_LEFT は、広告ユニットをマップの左上に配置し、コントロールの子要素を上端中央に動かすよう指定します。
  • TOP_RIGHT は、広告ユニットをマップの右上に配置し、コントロールの子要素を上端中央に動かすよう指定します。
  • LEFT_TOP は広告ユニットをマップの左上、かつ TOP_LEFT 要素の下に配置するよう指定します。
  • RIGHT_TOP は広告ユニットをマップの右上、かつ TOP_RIGHT 要素の下に配置するよう指定します。
  • LEFT_CENTER は広告ユニットをマップの左側、かつ TOP_LEFTBOTTOM_LEFT の中間に配置するよう指定します。
  • RIGHT_CENTER は広告ユニットをマップの右側、かつ TOP_RIGHTBOTTOM_RIGHT の中間に配置するよう指定します。
  • LEFT_BOTTOM は広告ユニットをマップの左下、かつ BOTTOM_LEFT 要素の上に配置するよう指定します。
  • RIGHT_BOTTOM は広告ユニットをマップの右下、かつ BOTTOM_RIGHT 要素の上に配置するよう指定します。
  • BOTTOM_CENTER は、広告ユニットをマップの下端中央に配置するよう指定します。
  • BOTTOM_LEFT は広告ユニットをマップの左下に配置し、コントロールの子要素を下端中央に動かすよう指定します。
  • BOTTOM_RIGHT は広告ユニットをマップの右下に配置し、コントロールの子要素を下端中央に動かすよう指定します。

これらの配置は、既存の UI 要素やコントロールの表示位置と重なる場合があります。その際は、位置ごとに決められたロジックに基づいてコントロールの位置をずらし、指定の位置にできるだけ近い場所に表示します。

以下の例では、マップ キャンバスの右側に縦長の広告ユニットを配置しています。

var adUnitDiv = document.createElement('div');
var adUnitOptions = {
  format: google.maps.adsense.AdFormat.VERTICAL_BANNER,
  position: google.maps.ControlPosition.RIGHT_CENTER,
  publisherId: 'YOUR_PUBLISHER_ID',
  map: map,
  visible: true
};
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

広告ユニットをマップ キャンバス外に配置することも可能です。その場合は、ページのどこかに追加の <div> 要素を作成し、position プロパティを null に設定して、広告ユニットオ ブジェクトをこの空の <div> に割り当てます。以下の例では、「adspace」という <div> の中に広告ユニットを配置しています。

var adUnitDiv = document.getElementById('adspace');
var adUnitOptions = {
  format: google.maps.adsense.AdFormat.LEADERBOARD,
  publisherId: 'YOUR_PUBLISHER_ID',
  map: map,
  visible: true
};
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。