こんにちは！ ジロウです。
アドセンス広告ユニットのコードが取得できたら、ブログの記事内に広告を表示させる設定を行います。
アドセンス広告を表示させるプラグインには「Advanced Ads」や「WP QUADS」をはじめ多くのものがリリースされていますが、今回は中でも使い勝手が良く信頼性が高いとされる「Advanced Ads」を利用する方法を採用しています。
以前は「WP QUADS」の利用をお勧めしていました。既に導入されている方は「Advanced Ads」に切り替える必要は現時点ではないと思います。
事実、「WP QUADS」も使いやすいプラグインですので、下記にて使い方を解説しています。
「Advanced Ads」が使いづらい、と思われた方は参考にしてみて下さい。
さて、ここでは例として、下図のように配置する方法について解説します。
それでは、以降の手順に沿って設定作業を進めて行きましょう。
理想的なアドセンス広告の貼り方や注意事項については、下記の記事が参考になると思います。
「Advanced Ads」のインストールと有効化
まずは、プラグイン「Advanced Ads」をインストール＆有効化しましょう。
WordPressダッシュボードの左サイドメニューから、［プラグイン］⇒［新規追加］と進みます。
右上の検索窓に「Advanced Ads」と入力し、表示された中から「Advanced Ads － Ad Manager ＆ AdSense」の［今すぐインストール］をクリックして下さい。
続いて［有効化］をクリックします。
広告を表示させる設定方法に進みますが、「Advanced Ads」には様々な機能があります。有料のアドオンによって更に機能を追加することもできます。
あらかじめ配置を決めて設定し、自動で広告を表示させることもできれば、ショートコードを使って投稿記事ごとに任意の場所へ手動で表示させることもできます。
「Advanced Ads」にアドセンスIDを登録
最初に「Advanced Ads」に自分のアドセンスの「サイト運営者ID」を登録します。
WordPressダッシュボードに戻って、左サイドメニューから［Advanced Ads］⇒［設定］と進みます。
上部メニューの「Google AdSense」を選択し、［Connect to AdSense］をクリックします。
Googleアカウントへのログイン画面が表示されるので、該当するアカウントをクリックします。
「Advanced AdsがGoogleアカウントへのアクセスをリクエストしています」と表示されるので、［許可］をクリックしましょう。
ログインが完了するとコードが発行されます。
これをクリックすると青く染まって選択状態になるので、キーボードの［Ctrl］＋［C］等でコピーして下さい。
WordPressの画面に戻って「Please enter confirmation code.」と書かれた枠内に、先程のコードをペーストしましょう。
コードをペーストしたら、［Submit code］をクリックします。
設定画面に遷移すると、「サイト運営者ID」と氏名が登録されているはずです。
「Advanced Ads」に必須の一般設定
続いて、この設定画面のメニューから「一般」を選択し、「広告を無効にする」項目の「404エラーのページ上で広告を無効にします。」にチェックを入れましょう。
チェックを入れたら画面を最下部までスクロールして、［このページに設定を保存する］をクリックして下さい。
「ページが見つかりませんでした」としながらアドセンス広告が表示されるのは不適切ですから、上記にチェックを入れることによって予防するわけです。
「Advanced Ads」に広告コードを登録する
「Advanced Ads」に事前に取得したアドセンス広告コードを登録して行きます。
この作業は、使う広告の数だけ行います。
例えば、記事上、記事中、記事下の３箇所に広告を使い分ける場合には、ここで解説する作業を３回行うことになります。
後々、配置によるクリック率や収益率などのデータを調べる際に便利だからです。
「タイトルを追加」と表示された枠内に、自分で区別しやすい広告名（記事上、記事下など）を入力します。
「プレーン テキストとコード」にチェックを入れ、左下の［次］をクリックします。
「広告パラメーター」というページになるので、ここに表示したいアドセンス広告コードを貼り付けます。
「ショートコードを許可」欄の「ショートコードを実行」にチェックを入れます。
［次］をクリックします。
なお、広告の上に「スポンサーリンク」や「広告」といったラベルを表示する場合には、下記のように記述したものを、上図のように広告コードの上に貼り付けることをおすすめします。
そちらを利用する場合には、WordPressダッシュボードから［Advanced Ads］⇒［設定］と進み、「レイアウト/出力」項目にある「広告ラベル」にチェックを入れ、枠内に表示させたいテキストを入力します。
設定できたら、ページ最下部の［このページに設定を保存する］をクリックして下さい。
なお、広告ラベルの要否については、下記にて解説していますのでご覧下さい。
広告の「表示条件」を設定する
続いて、「表示条件」ページで、広告を表示させるページ、させないページを指定する設定を行います。
通常は、「お問い合わせ」や「プライバシーポリシー」といった固定ページには広告を表示させないので、投稿ページ（個別記事）だけに広告を表示させるように設定します。
「表示条件」枠内の［一部のページで広告を非表示にする］をクリックします。
「新しい条件」から「投稿タイプ」を選びます。
［追加］をクリックします。
「一致」が選択されていることを確認し、［投稿］をクリックします。
下図のようになればOKです。
「訪問者条件」の設定でPCとスマホの表示を使い分ける
パソコンとスマホのそれぞれで別の広告を表示させたい場合もあるでしょう。
パソコンにはダブルレクタングルを表示させ、スマホにはレスポンシブをシングル表示させたいようなケースですね。
「訪問者条件」を設定すると、この使い分けが可能になりますので、必要に応じて設定しましょう。
「訪問者条件」枠内の［一部のユーザーに対して広告を非表示］をクリックします。
「新しい条件」から「デバイス」を選択して［追加］をクリックします。
「モバイル」か「デスクトップ」のうち、“表示させたい方” を選択します。
言うまでもないと思いますが、スマホに表示させたければ「モバイル」、パソコンにだけ表示させたければ「デスクトップ」を選びます。
選んだら［次］をクリックしましょう。
以上が、使う広告の数だけ（記事上、記事中、記事下なら３回）作業する工程です。
記事上の広告設定
それでは、登録した３つの広告コードのうち、記事上の広告を自動的に表示させる場合の設定方法を説明して参ります。
WordPressダッシュボードの左サイドメニューから、［Advanced Ads］⇒［設置］と進みます。
「広告の設置」画面が表示されます。
今回、記事上の広告は「序文」と「最初の見出し」の間に表示させるので、下図のように「1．配置の種類を選択します。」の中から「コンテンツ」を選択します。
「2．名前を選択」で、自分が分かりやすい名前を入力します。
「3．広告またはグループを選択」で、記事上に表示させる広告タイトルを選択します。
できたら［新しい配置を保存］をクリックします。
詳細設定の画面に移るので、［すべてのオプションを表示］をクリックします。
下図のように設定します。
アイテム：「記事上」
配置：「前」（見出しの前）、「1」（１番目の見出し）、「見出し2（<h2>）」（h3見出しを使うなら「見出し3」）
広告のラベル：「既定」を選択、「配置」は、「中央」を選べば良いでしょう。
以上の設定が完了したら［配置を保存］をクリックします。これで、投稿記事の最初の見出しの前に記事上広告が表示されるようになりました。
記事下の広告設定
WordPressダッシュボードの左サイドメニューから、［Advanced Ads］⇒［設置］と進みます。
［配置の新規設定］をクリックします。
記事下の広告は、記事が終わった直後（SNSシェアボタンや「［前の記事］－［次の記事］」のようなリンクボタンの前）に表示させます。
下図のように「1．配置の種類を選択します。」の中から「コンテンツの後」を選択します。
「2．名前を選択」で、自分が分かりやすい名前を入力します。
「3．広告またはグループを選択」で、記事下に表示させる広告タイトルを選択します。
できたら［新しい配置を保存］をクリックします。
詳細設定の画面に移るので、［すべてのオプションを表示］をクリックして、下図のように設定します。
以上の設定が完了したら［配置を保存］をクリックします。これで、投稿記事の末尾に記事下広告が表示されるようになりました。
記事下の広告を「ダブルレクタングル」で表示する
記事下の広告を「ダブルレクタングル」で表示すると、広告が目立つだけでなく実際にクリック率や収益率を高める効果が期待できます。
「ダブルレクタングル」とは、その名の通り「レクタングル」タイプの広告を２つ横並びに表示させることです。下図のようなイメージですね。
ただし、この表示方法が使えるのはパソコン画面だけです。スマホ画面に適用するとレクタングル広告が縦に２つ並んでしまい、ポリシー違反の警告を受ける可能性があります。
そこで、
- パソコンだけに表示される「ダブルレクタングル」
- スマホ（モバイル）だけに表示される「レスポンシブ（シングル）」
という２つの広告タイプを用意し、「Advanced Ads」を使って設定します。
ダブルレクタングル広告の設定
① Googleアドセンスにログインし、［広告］⇒［広告ユニット］⇒［新しい広告ユニット］と進みます。
「テキスト広告とディスプレイ広告」を選択（クリック）します。
「長方形」に指定して、「レクタングル（大）」か「レクタングル」のどちらかを選択し、広告コードを取得します。
パソコン画面にしか表示させないので、どうせならより大きくて目立つ「レクタングル（大）」の方が良いでしょう（個人的には「レクタングル」の方がスッキリしていて好きですが・・・）。
【追記・・・2019年9月】
Googleアドセンスの新しい仕様では、「広告サイズ」で「固定」を選択して、「幅」を300に、「高さ」を250に設定の上、広告ユニットを作成して下さい。
レスポンシブ広告ではダブルレクタングルが上手く表示されないようです。
② 「ダブルレクタングル」表示にするには「テーブルタグ」を利用します。下記をコピペしてお使い下さい。
<div align="center">スポンサーリンク</div> <table> <tbody> <tr> <td style="border-style: none;">左に表示させたい広告のコード</td> <td style="border-style: none;">右に表示させたい広告のコード</td> </tr> </tbody> </table>
このテーブルタグの、
「左に表示させたい広告のコード」
「右に表示させたい広告のコード」
の部分に、それぞれレクタングル広告コードを貼り付けます。左右別々の広告コードを取得しても良いですし、同じ広告コードを左右に貼り付けてもOKです。
完成すると次のようになります。
<div align="center">スポンサーリンク</div>
<table>
<tbody>
<tr>
<td style="border-style: none;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下ダブルレクタングル -->
<ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
<td style="border-style: none;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下ダブルレクタングル -->
<ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
</tr>
</tbody>
</table>
③ これを、これまで解説した手順で「Advanced Ads」に記事下の広告として登録します。
その際に、パソコンだけに表示されるように設定します。
「訪問者条件」枠内の［一部のユーザーに対して広告を非表示］をクリックします。
「新しい条件」から「デバイス」を選択して［追加］をクリックします。
ここで「デスクトップ」を選択すればOKです。
スマホ用レスポンシブ広告のシングル表示設定
① Googleアドセンスから、レスポンシブ広告コードを取得します。
② この広告コードを、上記と同じ手順で「Advanced Ads」に記事下の広告として新たに登録します。
③ 今度はスマホ（モバイル）だけに表示されるように設定します。
「訪問者条件」枠内の［一部のユーザーに対して広告を非表示］をクリックします。
「新しい条件」から「デバイス」を選択して［追加］をクリックします。
ここで「モバイル」を選択すればOKです。
以上で、パソコン画面では「ダブルレクタングル」が、スマホ画面では「レスポンシブ」のシングルが表示されるようになります。
記事中の広告設定
これまでの設定で、「記事上」と「記事下」の広告については自動で表示されるようになりましが、「記事中」の広告については任意の場所に配置したいケースが多いので、手動で表示させることにします。
表示方法は以下の手順です。
WordPressの投稿画面を「ビジュアル」モードにすると、上段のパーツの中に［Ad］という水色のボタンが表示されているはずです。
広告を表示させたい場所をクリックで指定しておき、この［Ad］をクリックすると、下図のようなポップ画面が開きます。
「空欄」と書かれたボタンをクリックするとプルダウンメニューが表示されるので、「広告」の中から表示させたい広告タイトルをクリックで選択します。
［ショートコードを追加］をクリックします。
広告を表示するショートコードが挿入されました。
このように手動でも簡単に表示することができるので、忘れないように気をつけさえすれば便利ですね。
以上、プラグイン「Advanced Ads」を使ったアドセンス広告の設置方法でした。ご自分のブログプランに合わせて工夫してみて下さい。
コメントを残す