【収益化】アドセンスのレスポンシブ広告をワードプレスのシンプリシティーで設定

ワードプレス
この記事は約6分で読めます。
スポンサーリンク

ブログを収益化(マネタイズ)するため、AdSense(アドセンス)の広告の設定をしています。

すでに、WordPress(ワードプレス)で AdSense の広告の設定が済んでいますが、今回は「レクタングル」を「レスポンシブ」に置き換えてみます。

子テーマ「Simplicity2 child」の「有効」を確認

まずは WordPress で、設定されているテーマを確認しました。
もちろん以下のように、子テーマ「Simplicity2 child」を有効化してありました。

ワードプレスのテーマ画面
Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

ウィジェットの広告の中を確認

以前 WordPress のウィジェット画面で設定した、広告ユニットコードを貼り付けるための領域を確認しました。

広告に追加された「カスタム HTML」ウィジェット

作業手順:

  1. サイドメニュー > 外観 > ウィジェット へと移動
  2. 「広告 336×280 」と「広告 300×250」に、それぞれ「カスタム HTML」が追加してあることを確認
  3. あとで広告ユニットコードを設定し直すため、この画面を開いたままの状態で維持
それぞれの「カスタム HTML」の中には、以前設定した「レクタングル(大)」と「レクタングル」の広告ユニットコードが記述してあります。

つぎにレスポンシブの広告ユニットの作成

Google AdSense(グーグル・アドセンス)で、次のようにして、広告ユニットを作成しました。

新しい広告ユニットの作成

新しい広告ユニット

作業手順:

  1. メニュー > 広告の設定 > 広告ユニット と移動
  2. 「+新しい広告ユニット」をクリック

作成する広告の種類の選択

広告ユニットの選択

作業手順:

  1. 「テキスト広告とディスプレイ広告」をクリック

広告の名前とサイズとタイプを指定

新しい広告ユニットの名前や広告サイズなどを決めます。

新しい広告ユニットの名前の設定

作業手順:

  1. 名前には、あとで見て分かるような名前を指定
  2. 広告サイズが、「自動サイズ レスポンシブ」であることを確認
  3. 広告タイプが、「テキスト広告とディスプレイ広告」であることを確認
  4. 「保存してコードを取得」ボタンをクリック
  5. 表示された「広告コード」ウィンドウで、広告コードをすべて選択してコピー

結果として「自動サイズ レスポンシブ」の広告ユニットコードが、コピーされました。

最後に、広告ユニットコードを貼り付け

WordPress に戻って、次のようにして、広告ユニットコードを貼り付けました。

広告の「カスタム HTML」ウィジェットにレスポンシブの広告ユニットコードを追加

作業手順:

  1. 「広告 336×280」の「カスタム HTML」をクリックして開く
  2. タイトルには、あとで見て分かるような名前を指定
  3. 内容には、先ほどコピーした「自動サイズ レスポンシブ」の広告ユニットコードを貼り付ける
  4. 「保存」ボタンをクリック

なお、同じ「自動サイズ レスポンシブ」の広告ユニットコードを「広告 300×250」の「カスタム HTML」にも、貼り付けました。

AdSense広告を設定するためには、「広告 336×280」と「広告 300×250」の両方の設定が必要です。

レスポンシブ広告の表示

ボクは、サイドバートップに広告を表示する設定にしています。

広告ユニットコードを「366×280 レクタングル(大)」や「300×250 レクタングル」から「自動サイズ レスポンシブ」に変えると、

パソコンでは、サイドバートップに表示されている広告が、「300×250 レクタングル」から「300×600 ラージ スカイスクレーパー」になっていました。

またモバイルでは、記事の下に表示されている広告が、広告の縦横の比率(アスペクト比)を維持したまま、横幅いっぱいまで拡大されました。

広告は、大きい方がクリック率が上がるので、このようなサイズになっているのだと思われます。

統計を取りたいとき(参考)

研究結果の展示

どの広告で成果があったのか、統計を取りたい場合には、次のようにします。

作業手順:

  1. Google で「広告 336×280」用の「自動サイズ レスポンシブ」の広告ユニットを作成し、そのコードをコピー
  2. WordPress で「広告 336×280」の「カスタム HTML」にコードを貼り付ける
  3. Google で「広告 300×250」用の「自動サイズ レスポンシブ」の広告ユニットを作成し、そのコードをコピー
  4. WordPress で「広告 300×250」と「カスタム HTML」にコードを貼り付ける
任意の場所に広告を置いて、統計を取りたい場合にも同様にします。

パフォーマンス追求広告の表示

サイドメニュー > カスタマイズ > 広告 で、「パフォーマンス追求広告の表示」にチェックをいれると、ウィジェット画面に「広告 320×100」と「広告 728×90」が追加されます。

追加で「広告 320×100」の広告ユニットコードを「320×100 ラージ モバイル バナー」から「自動サイズ レスポンシブ」に変えました。

サイドバートップに広告を表示する設定にすると「広告 728×90」は、どこにも表示されません。

レスポンシブ広告の調整

「広告 320×100」は、モバイル用の設定です。

モバイルの記事の上(レスポンシブ)

「広告 320×100」の広告ユニットコードを「自動サイズ レスポンシブ」に変えると、最初は広告「300x280px レクタングル」が表示され、記事を下に押し下げてしまいました。

たしか、ポリシー違反のはずです。

そのままでは良くないので、レスポンシブ広告に高さを指定して、大きな広告で記事を下に押し下げないようにしました。

レスポンシブ広告の設定

WordPress で、次のようにして、広告ユニットコードを貼り付けました。

広告 320x100 の「カスタム HTML」ウィジェットにレスポンシブの広告ユニットコードを追加

作業手順:

  1. 左側の利用できるウィジェットの中から「カスタム HTML」を「広告 320×100」に追加(追加対象をクリックすると、追加先を選択できます)
  2. 「広告 320×100」の「カスタム HTML」をクリックして開く
  3. タイトルには、あとで見て分かるような名前を指定
  4. 内容には、先ほどコピーした「自動サイズ レスポンシブ」の広告ユニットコードを貼り付ける
  5. 広告ユニットコードの insタグのスタイル(style)に、追加で高さを指定
    <!-- 放浪J-レスポンシブ広告 -->
    <ins class="adsbygoogle"
         style="display:block; height:100px"
         ~></ins>
  6. 「保存」ボタンをクリック

この広告は、モバイルの記事の上に表示されます。

なお、広告領域に「『テキスト』ウィジェットを用いて」と書いてありますが、「カスタム HTML」ウィジェットの使用をおすすめします。

レスポンシブ広告の表示

モバイルでは、記事の上に表示されている広告が、横幅いっぱいまで拡大されました。
サイズが決まっている広告の場合は、中央に表示されて両脇に隙間が空きます。

あとがき

レスポンシブ広告にすると全体的に、広告のサイズが大きくなるようです。
大きな広告は、クリック率が高くなるそうなので、取り入れたいところです。

ホームページの広告

ただ、もし大きな広告のせいで、間違えてクリックしてしまったとなると、問題です。
ブログを読んでくれている方の気分を害してしまいます。

最適な答えを見つけるため、いろいろと試行錯誤してみないといけませんね。

コメント

タイトルとURLをコピーしました