2021/03/13
2017/08/15

Googleアドセンス審査通過後の広告掲載手順

Googleアドセンス（Google AdSense）の審査を通過後、サイトにアドセンス広告を設置ためのやり方を本ブログを例にご紹介します。

スマホで見る

1. アドセンス広告設置作業をする前にやるべきこと
2. アドセンス広告設置場所の例 ※本ブログの2017/08/15(火)時点
3. Googleアドセンス審査通過後の広告掲載手順 ※本ブログの2017/08/15(火)時点、WordPress使用
4. Googleアドセンス広告作成までの流れのキャプチャメモ
5. 最後に
6. 参考サイト

アドセンス広告設置作業をする前にやるべきこと

もし Adblock Plus のような広告をブロックするプラグインを有効にしている場合はそもそも無効にするか、対象のサイトを訪れて上記の画像のようにプラグインアイコンからサイト毎に効果を無効にする設定をしてください。そうしないと何か特別な対策をしていない限り、いくら自分のサイトに張り付けても広告を確認できません。

無効化したあとはリロードを！

アドセンス広告設置場所の例 ※本ブログの2017/08/15(火)時点

画像でざっと位置を流し見ます。

HOMEのページ。サイド下エリアとページ下エリアに設置。

ABOUTページ。HOMEと同様にサイド下エリアとページ下エリアに設置。

CONTACTページ。ここもHOMEやABOUTと同様にサイド下エリアとページ下エリアに設置。

各記事ページ。ここはサイド下エリアとページ下エリアに加え、Moreタグ部分にも設置。

Googleアドセンス審査通過後の広告掲載手順 ※本ブログの2017/08/15(火)時点、WordPress使用

「01. AdSenseで広告を作成＞ 02. サイトに広告コードを記載」が手順です。「03. カスタムチャンネル作成」も合わせて解説します。

◆ 01. 広告ユニット作成

まずはこれを作成しないと始まりません。自分のサイトに適した広告を選択して作成しましょう。
当サイトでは用途的に合いそうな記事内広告を選択して作成しました。

「広告の設定＞コンテンツ＞広告ユニット＞新しい広告ユニット」から広告を作成します

「記事内広告」を選択

作業完了

作成後のイメージ

Article_SizeR_01 … page bottom（ページ下エリア）
Article_SizeR_02 … article more after（Moreタグ部分）
Article_SizeR_03 … sidebar（サイド下エリア）

上記3つの広告を作成しました。

◆ 02. サイトに広告コードを記載

「01. 広告ユニット作成」で作成された広告コードをサイトの各所に記載します。

・【Article_SizeR_01】… single.php、index.php、page.php


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display:block; text-align:center;"
 data-ad-format="fluid"
 data-ad-layout="in-article"
 data-ad-client="xxxxxxxxxx"
 data-ad-slot="xxxxxxxxxx"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

「Article_SizeR_01 … page bottom（ページ下エリア）」、単純に広告コードを各ページへ挿入します。

・【Article_SizeR_02】… functions.php（more差し替え）


//more位置へ挿入
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$adTags = <<< EOF
<section class="article-more-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display:block; text-align:center;"
 data-ad-format="fluid"
 data-ad-layout="in-article"
 data-ad-client="xxxxxxxxxx"
 data-ad-slot="xxxxxxxxxx"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>
EOF;

$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
return $contentData;
}

「Article_SizeR_02 … article more after（Moreタグ部分）」、Moreタグ部分に動的に広告コードを挿入できるように「function.php」へ記述します。

・【Article_SizeR_03】… WPウィジェット「テキスト」


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display:block; text-align:center;"
 data-ad-format="fluid"
 data-ad-layout="in-article"
 data-ad-client="xxxxxxxxxx"
 data-ad-slot="xxxxxxxxxx"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

「Article_SizeR_03 … sidebar（サイド下エリア）」、当サイトではサイドバーの管理を「WordPress ＞外観＞ウィジェット」で行っているので、新規に「テキスト」ウィジェットを作成し、内容に広告コードを挿入します。

◆ 03. カスタムチャンネル作成

これを作っておくと「掲載広告の位置や効果を自己分析するのに役立ったり、広告主に対してより自分のサイトに適した広告を表示できる可能性がある」などのメリットがあるようです。

OZPA（おつぱ）さんのブログの記事でも「絶っっっ対に設定した方が良い」とあったので、見よう見まねで設定しました。

一先ず広告の数分設定しました

名前： page bottom
広告ユニット： Article_SizeR_01
広告の掲載位置：下中央

名前： article more after
広告ユニット： Article_SizeR_02
広告の掲載位置：上中央

名前： sidebar
広告ユニット： Article_SizeR_03
広告の掲載位置：右中央

・カスタムチャンネル設定例

名前： [各チャンネル]
広告ユニット： [各チャンネル]
ターゲット設定： [チェック] このカスタムチャンネルをターゲット設定可能な広告プレースメントとして広告主に表示する
広告の掲載先： design、web design、html、css、js、jsx、php、wordpress、photoshop、illustrator、adobe、自動化、便利ツール、業務効率化など制作現場で役立つ情報まとめブログ
広告の掲載位置： [各チャンネル]
説明： Web Design、Photoshop自動化JSX、Wordpress、Adobe、JS、xampp、便利ツール、業務効率化など制作現場で役立つ情報まとめブログ。広告の種類：記事内広告。サイズ：レスポンシブ。