はじめに

サイトの検索結果やページコンテンツに連動した以下のような広告（AFS）を目にすることがあると思います。

今回、この AFS のデザインをサイトにあわせて変更したいという要件があったので、カスタマイズ方法についてまとめます。

本記事は、AFS のデザインをカスタマイズする方法について、前半では、基本的な実装として Code Generator を用いたカスタマイズを、後半では、Code Generator 以上に細かいスタイルの設定が可能な「カスタム検索スタイル」を用いたカスタマイズを紹介します。

Code Generator を用いたカスタマイズ

まず、AFS をサイトに表示する方法として、Reference と Code Generator を使用した基本的な実装について述べます。
Reference には広告に設定できるパラメータと説明が記載されていて、Code Generator では各パラメータを設定して広告のデザインのプレビューを確認することができます。
Code Generator で広告デザインを作成するとソースコードが出力でき、サイトのhtmlに貼り付けることで広告を表示させます。

詳しい情報は上記の公式サイトに載っていますが、以下では基本的な実装のサンプルを紹介します。

基本的な実装

AFS をサイトに表示する場合、主に以下のようなソースコードを記載することになります。

head

AFS に必要な google のタグを記載する。

HTML

<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>

body

AFS を表示する div タグと、設定を行う JavaScript を記載する。
広告の設定は、以下の pageOptions、adblock1 に各種パラメータを連想配列で記載して設定します。

HTML

<div id='afscontainer1'></div>

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

  var pageOptions = {
    "pubId": "gtech-codegen", // クライアントID
    "query": "スニーカー", // 表示する広告のキーワード
    "adPage": 1,
    "hl": "ja",
    "location": true,
    "sellerRatings": true,
    "siteLinks": true
  };

  var adblock1 = {
    "container": "afscontainer1",
    "width": "700",
    "number": 1,
    "detailedAttribution": true
  };

  _googCsa('ads', pageOptions, adblock1);

</script>

表示例

広告が表示されました。
いろんなサイトでよく見るやつです。

今回の要件

こんなデザインにしたい！

デザインのカスタマイズ

ボーダー・背景色・フォントの変更

要件のデザインを実現するために、body に記載した JavaScript の変数 adblock1 に以下のパラメータを追加します。

JavaScript

  var adblock1 = {
    ... 略
    "noTitleUnderline": true,
    "fontFamily": "helvetica neue",
    "fontSizeTitle": 14,
    "fontSizeAttribution": 12,
    "colorTitleLink": "2490d0",
    "colorText": "333333",
    "colorDomainLink": "2490d0",
    "colorBackground": "f6f7f8",
    "colorAttribution": "333333",
    "colorAdBorder": "dddddd",
    ... 略
  };

noTitleUnderline
広告タイトルに下線を引くかどうか

fontFamily
広告ユニット全体のfont family

fontSizeTitle
広告タイトルのフォントサイズ

fontSizeAttribution
帰属のフォントサイズ

colorTitleLink
広告タイトルの色

colorText
広告の説明文の色

colorDomainLink
広告主のサイトへのリンクの色

colorBackground
背景色

colorAttribution
帰属の文字色

colorAdBorder
指定した色で個々の広告の周囲に線を表示する

表示

ボーダー・背景色・フォントのスタイルが整いました！

Code Generator ではできないこと

Code Generator を用いて、AFS のスタイルをある程度カスタマイズすることができました。
しかし、変更できるスタイルは限られていて、要件にあわせて以下の要素も変更したいところですが、Reference と Code Generator には該当するパラメータがないため変更できません。

ボーダーの角を丸くする
枠内の padding を設定する

そこでさらに調べると、Google AdSense には Code Generator では変更できない、「ボーダーの角丸」や「枠内のpadding」を含む、広告スタイルをさらにカスタマイズできる「カスタム検索スタイル」というものがあるようなので、以降で紹介したいと思います。

「カスタム検索スタイル」を用いたカスタマイズ

上記（Code Generator を用いたカスタマイズ）では AFS の基本的な実装方法とカスタマイズについて紹介しました。
以降は、上記で実現できなかった「ボーダーの角丸」や「枠内のpadding」などのスタイルを、「カスタム検索スタイル」という Google AdSense のサービスを使用して設定する方法を紹介します。

「カスタム検索スタイル」とは

Google AdSense の管理画面で使用できる編集ツールを使って AFS のスタイルを設定するサービスです。
広告のデザインをテンプレートから選択し、各所のスタイルを調整することでサイトに馴染ませるデザインにカスタマイズします。
Code Generator よりも細かくスタイルを指定できます。
（※AdSenseへのログインが必要）

Code Generator で作成した AFS

「ボーダーの角丸」や「枠内のpadding」など詳細なスタイル変更ができない

「カスタム検索スタイル」でスタイル変更した AFS

「ボーダーの角丸」や「枠内のpadding」など Code Generator で変更できないスタイルを変更可能！

実装

具体的な実装方法は、以下の AdSense ヘルプに記載されていますが、

AdSense ヘルプ - カスタム検索スタイルを作成する

簡単に実装手順をまとめると、次のとおりになります。

手順

1. AdSense アカウントにログインする

2. [検索向けの広告] ＞ [カスタム検索のスタイル] をクリックする

3. [新しい検索結果スタイル] をクリックする

4. テンプレートを選択する

サイトのコンテンツに馴染むデザインのテンプレートを選択します。
画像を表示できるテンプレートもありますが、こちらの画像は、サイト運営者が任意で用意した画像を固定で表示するものになります。

5. スタイルを編集する

プレビューを見ながら、画面右側より各所の設定値を入力してスタイルを編集します。
上の例では、[グローバルオプション] の [パディング] で広告枠の padding を、[枠線] の [範囲] でボーダーの角丸を指定しています。

6. [検索結果スタイル（無題）] に作成するスタイルの名前を入力する

7. [保存してコードを取得] をクリックする

[スタイルを保存] をクリックしても、作成したスタイルの一覧からコードを取得することができます。

8. 作成したスタイルの styleId が発行されるので、AFS のパラメータに追加する

JavaScript

var pageOptions = {
    ... 略
    "styleId": "**********", // 発行されたスタイルID
    ... 略
  };

上記のように、AFS の変数 pageOptions に、発行された styleId を追加します。
スタイルは複数作成できますが、以降に同じスタイルを AdSense で変更した場合は、自動でサイトの AFS に適用されます。
スタイルを更新する場合は「7.」のときに [スタイルを保存] をクリックします。
その際に、すべての広告に適用するか、指定した期間内で一部のユーザーにのみ適用してテストをするかを選択することができます。

9. 作成したスタイルが AFS に適用される

まとめ

Code Generator では基本的なデザインの AFS を作成してサイトに表示させることができました。
デザインの細かい変更などはできませんが、パラメータを入力するだけで簡単に AFS のデザインを作成できるので、AFS をサイトに導入する最初の一歩として使用するのに良さそうです。
そして、「カスタム検索スタイル」では、スタイルの細かい指定ができ、Code Generator では変更できなかったスタイルなども変更することができました。こちらは、サイトにあわせてデザインにこだわった AFS を表示させたい場合に活用できそうです。