記事作成

レスポンシブ広告をクリック率の高いサイズにカスタマイズする

レスポンシブ広告をクリック率の高いサイズにカスタマイズする

ここではレスポンシブ広告の広告コードを取得方法と、
クリック率を高める最適なサイズにリサイズする方法を紹介します。

アドセンス広告をブログ内に設置する流れは以下の通りです。

広告コードカスタマイズのステップ
１．広告ユニットを作成する
２．広告コードを取得する
３．広告コードをカスタマイズする

Step1.広告ユニットを作成する

まずは広告ユニットを作成します。

広告ユニットを作成するとは、簡単に言うと
これから表示させる広告の種類・サイズを選ぶということです。

アドセンスにログインして、
トップページ左上のマークをクリックします。

その中の「広告の設定」→「広告ユニット」を選択します。

レスポンシブの広告ユニットを作成する

次にレスポンシブサイズの広告ユニットを作成します。

１．「新しい広告ユニット」をクリックします。

２．広告の種類を選択する

すると広告の種類の選択画面になりますので、
「テキスト広告とディスプレイ広告」を選択します。

３．広告ユニットを作成する

各項目の設定内容について説明します。

●名前：誰に見られるものでもないので、
管理上分かりやすい名前を設定しておけばOKです。●広告サイズ：レスポンシブになっているか確認します。
レスポンシブになっていなければ「推奨」の中から、
レスポンシブを選択してください。●広告タイプ：デフォルトのママでOKです。
テキスト広告とディスプレイ広告になっているはずです。

『保存してコードを取得』をクリックします。

Step2.広告コードを取得する

『保存してコードを取得』をクリックすると、
このような画面が表示されます。

赤枠の部分が広告コードです。

 

こちらのコードをコピーしてください。

Step3.広告コードをカスタマイズする

レスポンシブの広告コードは、
このまま使用するとこのような広告サイズになります。

  • PCの場合＝横長のビッグバナー↓

  • スマホの場合＝レクタングルバナー↓

これをデバイス毎によりクリック率の高いバナーサイズが表示されるように
広告コードをカスタマイズしていきます。

具体的には、

  • 横幅が340px以下のデバイスでは『レクタングル中＝300×250』
  • 横幅が340px以上のデバイスでは『レクタングル大=336×280』

の広告が表示されるように設定していきます。

広告コードをカスタマイズする

コードのカスタマイズは、
アドセンスを表示させるプラグイン「WP QUADS」内で行います。

１．まずはWP QUADSのAd Settingsに進みます。

２．AD CODEのAd1を開く

Ad Settingの画面内にある、
AD CODEのタブをクリックし、Ad1の箇所を開きます。

Ad1を開いたら「Plain Text/HTML/JS」を選択します。

３．広告コードを貼り付ける

次に、Ad1内の空欄部分に先程コピーした
アドセンスの広告コードを貼り付けましょう。

４．広告コードをカスタマイズする

デフォルトの広告コードをコピペしたら、
続いてこのコードをカスタマイズして書き換えていきます。

まずデフォルトのコードは以下のようになっています。

①デフォルトのコード：

  1. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  2. <!-- あなたが設定した広告名 -->
  3. <ins class="adsbygoogle"
  4. style="display:block"
  5. data-ad-client="ca-pub-個別の番号"
  6. data-ad-slot="個別の番号"
  7. data-ad-format="auto"
  8. data-full-width-responsive="true"></ins>
  9. <script>
  10. (adsbygoogle = window.adsbygoogle || []).push({});
  11. </script>

 

  • あなたが設定した広告名：広告ユニットを作成した際に付けた名前が反映されます。
  • 個別の番号：広告ユニット毎に、毎回新しい個別の識別番号が付与されます。

 

②サイズ変更のための追記コード：

このコードのすぐ上に、
デバイスに応じて適切なサイズを表示させるためのコードを追記します。

  1. <style>
  2. .あなたが設定した広告名 { width: 300px; height: 250px; }
  3. @media(min-width: 340px) { .あなたが設定した広告名 { width: 336px; height: 280px; } }
  4. </style>

「あなたが設定した広告名」のところには、
①のデフォルトのコードのところに表示されている名前に合わせて
書き換えてください。

広告名の前に付いているドットを消さないように注意してね

 

③サイズ変更を広告コードに反映させるための追記コード：

最後に、デフォルトのコード内にあった、

  1. <ins class="adsbygoogle"

の部分を、以下のように書き換えてください。

  1. <ins class="adsbygoogle あなたが設定した広告名"

 

adsbygoogleのあとに半角スペース＋広告名を入力するよ。
「"」マークを消さないように注意してね。

 

広告ユニットの名前を「レスポンシブ」と設定していた場合、
最終形はこのようになります。

  1. <style>
  2. .レスポンシブ { width: 300px; height: 250px; }
  3. @media(min-width: 340px) { .レスポンシブ { width: 336px; height: 280px; } }
  4. </style>
  5. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  6. <!-- レスポンシブ -->
  7. <ins class="adsbygoogle レスポンシブ"
  8. style="display:block"
  9. data-ad-client="ca-pub-個別の番号"
  10. data-ad-slot="個別の番号"
  11. data-ad-format="auto"></ins>
  12. <script>
  13. (adsbygoogle = window.adsbygoogle || []).push({});
  14. </script>

 

デフォルトの広告コードをこのようにカスタマイズすることで、
横幅が340px以下のデバイスでは『レクタングル中』の広告が、
横幅が340px以上のデバイスでは『レクタングル大』の広告が表示されるようになります。

 

この記事を書いた人
YUME
YUME