ウェブでの実装

注: ページにブロックがいくつ存在していても、1 ページにつき 1 回のみ広告リクエストを行います。

重要: このコードを使用する前に、利用規約をお読みください。

このコードを使用するには、AdSense カスタム検索広告を使用するための有効な権限が付与された AdSense アカウントが必要です。

概要

サイトに AdSense カスタム検索広告を実装する手順は次の 3 つです。

ステップ 1: AdSense でカスタム検索スタイルを作成する

ログインしたら、[検索向け広告] を展開し、[検索スタイル] をクリックします。ここから、新しいスタイルを作成したり、既存のスタイルを更新したりできます。

ステップ 2: コードを構成する

[コードを取得] 定着 をクリックします。検索結果ページの広告コンテナと一致するように広告コンテナを設定します。

ステップ 3: コードを実装する

コード生成ツールからコードをコピーしてページに貼り付けます。このとき、query パラメータを更新することを忘れないでください。広告を正しく読み込むには、head タグで生成されたコードをサイトの head タグに配置する必要があります。広告ユニット 1 のコードには、ページ上のすべての広告ユニットの設定が含まれます。追加の広告ユニットでは、広告を表示するページに該当する広告ユニット <div> を配置するだけで済みます。

コード生成ツールには、最も一般的に使用される機能が用意されていますが、リファレンス セクションには追加のパラメータも用意されています。リファレンス セクションには、ページ上のすべての広告ユニットに適用されるすべてのページ単位のオプションと、個々の広告ユニットに適用されるすべてのユニット単位のオプションが含まれています。

サンプルコード

非同期の広告読み込み

生成されたコードは非同期です。非同期広告読み込みの完全な動作例を以下に示します。この例を新しいタブで開くことができます。独自のクライアント ID を入力してください。

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId' : 'test client ID', // Enter your own client-ID here
  'query' : 'flowers', // User query for this page
  'styleId': '7824176615' // Enter your own style ID here
};

var adblock1 = {
  'container' : 'afscontainer1',
  'width' : 700
};

var adblock2 = {
  'container' : 'afscontainer2',
  'width' : 700
};

_googCsa('ads', pageOptions, adblock1, adblock2);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

検索の関連する検索は、現在の検索キーワードに関連する検索キーワードを含むオーガニック ユニットです。このユニットのリンクは、新しい検索結果ページに移動します。

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'relatedSearchTargeting': 'query', // Must use 'query' for Related Search on Search pages
  'query': 'flowers', // User query for this page
  'styleId': '1234567890', // Enter your own style ID here
  'resultsPageBaseUrl': '//www.example.com/search', // Enter your own base URL here
  'resultsPageQueryParam': 'query' // Enter your own query parameter here
};

var adblock = {
  'container': 'afscontainer1',
  'number': 3,
  'width': 700
};

var rsblock = {
  'container': 'afscontainer2',
  'relatedSearches': 6,
  'width': 500
};

_googCsa('ads', pageOptions, adblock, rsblock);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

コンテンツ ページの関連する検索

コンテンツ ページの関連する検索では、ユーザーが閲覧しているページの内容に関連する検索語句が表示されます。これにより、ユーザーは関連するトピックを検索し、検索広告やサイト ナビゲーションを操作できます。コンテンツ ページの関連する検索に「query」パラメータを使用しないでください。予期しない結果が生じる可能性があります。

注: 関連する検索語句をサイトに表示する前に、Google でページをクロールして、語句がコンテンツとの関連性が高いことを確認する必要があります。ページがまだクロールされていない場合や、Mediapartners-Google クローラーによってクロールがブロックされている場合（robots.txt など）、Google に提供された関連検索語句の候補は表示されません。

コンテンツの関連検索機能は、Google のコンテンツ クロール システムを利用してページをインデックス登録し、関連性の高い検索語句を生成します。トラッキング変数、ユーザー ID、セッション ID やその他の動的識別子などのクエリ パラメータを含むコンテンツ ページの URL は、クローラーがページのコア コンテンツを評価する機能を妨げる可能性があり、関連性のない検索語句や不正確な検索語句につながる可能性があります。これらの重要でないパラメータを特定するには、'ignoredPageParams' パラメータを使用してください。これにより、コンテンツの適切なインデックス登録が保証され、不要なクロール負荷が軽減されます。これにより、Google はページがすでにクロールされていることをより適切に認識し、提案語句（Google とパートナーの両方、条件を満たしている場合）の表示を開始できます。

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<p>Page content</p>

<div id="afscontainer1"></div>

<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'relatedSearchTargeting': 'content', // Must use 'content' for Related Search on Content pages
  'hl': 'en', // The preferred language for related terms (default to 'en' if not specified)
  'styleId': '1234567890', // Enter your style ID
  'resultsPageBaseUrl': '//www.example.com/search', // Enter the base URL of your results page
  'resultsPageQueryParam': 'query', // Specify the query parameter on your results page
  'terms': 'term a,term b', // Optionally provide your own related terms in a comma-delimited list
  'referrerAdCreative': 'example ad title' // Only used when a user comes from a source you control;
                                           // required when 'terms' is present.
};

var rsblock1 = {
  'container': 'afscontainer1',
  'relatedSearches': 6
};

_googCsa('relatedsearch', pageOptions, rsblock1);
</script>

<p>More page content</p>

</body>
</html>

おすすめできない対処方法

すべてのパブリッシャー様は、AdSense カスタム検索広告の導入に関するガイドラインを遵守し、広告のレンダリングを妨げ、予期しない結果やパフォーマンスの低下を招く可能性のある特定の導入方法を避けることをおすすめします。

  • 無限スクロールの実装以外で、1 つのページから複数の広告呼び出しを行わない
  • 広告がレンダリングされる前または後に広告ブロックを非表示にしない
  • 広告ブロックをページ内で移動させない
  • ページに表示する広告ブロックの数よりも多くリクエストしないでください
  • 広告ブロックの DOM を操作しない
  • 独自の遅延読み込みを実装しない（代わりに Google の遅延読み込みを利用する）
  • サイトで Google の JavaScript リソースをキャッシュに保存しない
  • コンテンツ ページの関連する検索に「query」パラメータを使用しないでください。予期しない結果が生じる可能性があります。