Google 検索向け AdSense AFS（検索連動広告）のデザインをカスタマイズする

# はじめに
サイトの検索結果やページコンテンツに連動した以下のような広告（AFS）を目にすることがあると思います。
![アセット 5-8.png](https://qiita-image-store.s3.amazonaws.com/0/322782/4b2cfb84-7940-d3ad-4daf-eaaeff4abcbb.png)
今回、この **AFS のデザインをサイトにあわせて変更したい**という要件があったので、カスタマイズ方法についてまとめます。

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

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

- [Reference](https://developers.google.com/custom-search-ads/ios/reference)
- [Code Generator](https://developers.google.com/custom-search-ads/s/docs/code-generator?hl=ja)

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

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

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

```HTML: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: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>
```
###表示例
![image.png](https://qiita-image-store.s3.amazonaws.com/0/322782/59c6dc38-d660-a417-286e-c4f1afa457be.png)
広告が表示されました。
いろんなサイトでよく見るやつです。


## 今回の要件
こんなデザインにしたい！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/322782/ade62693-4bc9-6c3b-2f49-afd118eab3df.png)

## デザインのカスタマイズ
###ボーダー・背景色・フォントの変更
要件のデザインを実現するために、body に記載した JavaScript の変数 `adblock1` に以下のパラメータを追加します。

```JavaScript: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**
指定した色で個々の広告の周囲に線を表示する


###表示
![image.png](https://qiita-image-store.s3.amazonaws.com/0/322782/0efc9f96-588f-a918-9b62-541e76c622f8.png)
ボーダー・背景色・フォントのスタイルが整いました！

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

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

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

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

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

###Code Generator で作成した AFS
![ジェネレーター.PNG](https://qiita-image-store.s3.amazonaws.com/0/322782/42b1adc6-2aa8-42f0-c3a0-91f0db43fc48.png)
「ボーダーの角丸」や「枠内のpadding」など詳細なスタイル変更ができない

###「カスタム検索スタイル」でスタイル変更した AFS
![カスタム検索スタイル.PNG](https://qiita-image-store.s3.amazonaws.com/0/322782/7f64e3f1-ea87-18c9-4113-fcb3a9a059fd.png)
「ボーダーの角丸」や「枠内のpadding」など Code Generator で変更できないスタイルを変更可能！

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

- [AdSense ヘルプ - カスタム検索スタイルを作成する](https://support.google.com/adsense/answer/7591102?hl=ja)

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

###手順

**1. AdSense アカウントに [ログイン](http://www.google.com/adsense) する**

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

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

**4. テンプレートを選択する**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/322782/cfc85a94-0ce7-6155-0585-a262186c0f75.png)
サイトのコンテンツに馴染むデザインのテンプレートを選択します。
画像を表示できるテンプレートもありますが、こちらの画像は、サイト運営者が任意で用意した画像を固定で表示するものになります。

**5. スタイルを編集する**
![アセット 3-8.png](https://qiita-image-store.s3.amazonaws.com/0/322782/4e946cd2-0985-2efe-9dbb-aa1113b0db5d.png)
プレビューを見ながら、画面右側より各所の設定値を入力してスタイルを編集します。
上の例では、[グローバル オプション] の [パディング] で広告枠の padding を、[枠線] の [範囲] でボーダーの角丸を指定しています。

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

**7. [保存してコードを取得] をクリックする**
![アセット 4-8.png](https://qiita-image-store.s3.amazonaws.com/0/322782/2699ce82-8383-c775-ad11-e6ce28d3bb75.png)
[スタイルを保存] をクリックしても、作成したスタイルの一覧からコードを取得することができます。


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

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

**9. 作成したスタイルが AFS に適用される**
<img width="377" alt="スクリーンショット 2019-03-26 20.26.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/322782/16dc0913-54b6-9e30-bb51-b1a50e8345f2.png">

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