Google AdSenseを開始しました！

審査結果が届く

前回、Google AdSenseの審査のための準備という記事を書きました。申請をしたのは、この記事を書いた1日前（11月21日の深夜）です。

その後、Google AdSense（以下、AdSense）のホームページに

「審査には数日かかります、場合によっては2週間ほどかかります」

のようなメッセージが表示されていました。結果が出るのをリロードしながら待っていました。

審査の結果を心待ちにしていたら、AdSenseからメールが届きました！

お客様のサイトでAdSense広告を配信する準備が整いました

まず思ったのは審査が通って本当によかったということです！審査に通らず再審査になると、どんどん審査に通りづらくなるという話も聞いたことがあったので、１発で通ってよかったです！

そして審査結果が出るのも早かったです。申請してから1日半くらいで審査結果が出ました。

ads.txtの設定をする

AdSenseの設定をするのははじめてなので、まずメニューを見てみます。

ホーム、広告設定は広告などのメニューがあるのを確認していると、ホームを表示した時にいかにもアラートっぽいメッセージが表示されます。

ads.txtのアラート

なんだろうと思って今すぐ修正のリンクをクリックするとads.txtを作成してねというメッセージが表示されました。そのメッセージの下の方にダウンロードのリンクがあるので、自分用のads.txtをダウンロードします。

ads.txtを配置する

ads.txtはドキュメントルート直下に置くファイルなので、hexoのpublicディレクトリにおきます。

以下のURLで表示確認を行い完了です。

https://book-reviews.blog/ads.txt

アラートはなかなか消えない

設置してみたもののアラートは消えません…心配になりますが、ちゃんと設置できています。

ヘルプを見てみると以下の注意書きがありました。

注: 変更が AdSense に反映されるまでに数日かかる場合があります。サイトの広告リクエストが多くない場合は、最長で 1 か月ほどかかることがあります。

ん〜まぁまぁ時間がかかるみたいですね。PVが少ない＝広告リクエストの数は多くないのでアラートが消えるのは気長に待つことにします。

広告を設置する

AdSenseが利用できるようになったのであれば早速広告を設置してみます！

広告掲載の自動化

メニューの広告をクリックすると、広告掲載の自動化というメッセージがまず目に飛び込んできます。仕事でGoogle AdManagerを使って広告の設置を行ったりしていたので、思ったのと違うな〜と思いながら、自動広告をONにしてみました。

編集アイコンをクリックすると広告設定のプレビューで実際にどのように広告が表示されるのかを確認することができます。確認してみると記事上に画面幅と同じ幅の大きな広告が表示されていました。こういう風にしか設定できないのかと思って一旦その設定を適用しました。

広告ユニットを作成する

広告設定が自動のみなわけがなく、やはり設定する箇所がありました。

メニューで広告を選んだ状態で上の方にスクロールすると、広告ユニットごとというタブがありました。それをクリックすると、新しい広告ユニットの作成というメニューが出てきました。

推奨されているディスプレイ広告を作成します。広告ユニットの名前を入力のところに適切な名前をいれて、形をスクエア・横長タイプ・縦長タイプから選んで作成ボタンをクリックします。（広告サイズはレスポンシブのままにしておきます）

するとコードが表示されます。
一番上の<script async src=>のコードは審査時に貼っているので、その下のHTMLを表示したい箇所に貼ります。（hexoでsidebarに広告を貼る方法はまた別の機会にご紹介します）

実際に表示された広告を見てみると、スクエアを選んだはずが縦長の広告が表示されてしまっています…

スクエアが縦長に

原因はわかりませんが、他にも気になる点があるので調整していきます。

marginの調整

記事のmarginの調整

広告の高さは記事とあっていると見た目がよくみえます（個人的に）。なので高さを合わせます。

まず記事の方の更新日時の上が思ったより空いているので、調整します。

記事の上のマージンはarticleというclassで当てられています。
hexoでの定義箇所を探すとthemes/landscape/source/css/_partial/article.stylにありました

1 .article
2   margin: block-margin 0
3

marginはblock-marginという変数を利用していました。この変数に値をいれているところを探します。するとthemes/landscape/source/css/_variables.stylというファイルで指定されていることがわかりました。

43 // Layout
44 block-margin = 50px
45 article-padding = 20px
46 mobile-nav-width = 280px

こちらの数字を30pxにしてみます。hexo generateで適用します。

広告のmarginの調整

先ほど追加した広告にmargin-top: 60pxを適用します

<ins class="adsbygoogle"
     style="display:block;margin-top: 60px;"
     data-ad-client="ca-pub-1078092739514795"
     data-ad-slot="9239237218"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

調整後の確認

ページをリロードして確認してみます。

margin調整後

いい感じになりました！

まとめ

AdSenseの審査が通過したので、必要な設定（ads.txtの設置）を行い、広告タグを作成しました。広告を表示するにあたりレイアウトが気になったのでそちらを調整しました。

このまましばらく様子をみて、必要であればオーバーレイ広告を画面下に表示してみたいと思います。