2020/09/16
[NuxtJS]Google Adsenseの運用を開始する(審査通過後)
概要
Google Adsenseの審査に通ったので、運用を開始しました。運用開始前にいくつか設定が必要だったので、その作業ログを取っておきます。
※ 審査前の作業もある程度必要なのですが、この記事は審査に通ったあと〜最初の広告を表示させるところまでの紹介です。
半年くらい前に申し込んだときは落ちてしまっていたのですが、コツコツ記事を描き続け、100くらいたまってきたので、改めて審査に提出したところ
無事通過することができました!😃
ads.txtをアップする
ads.txt に関するガイド - AdSense ヘルプ の内容に従って、
ads.txtをアップします。
https://kumano-te.com/ads.txtで見れるようにします。
sellers.jsonにて販売者情報を公開する
sellers.json で販売者情報を提供する - AdSense ヘルプの内容に従って作業します。
- 販売者情報の公開設定で「機密」から「非機密」を選択するだけで良いようです。(特にサイトがわに変更をする必要はなさそうでした。)
横長広告を貼る
広告 > サマリー > 広告ユニットごと > 新しい広告ユニットの作成 から「横長タイプ」の広告枠を作成します。
生成されたコード
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- activity_detail_horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4776063042715973"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
vueに書いたコード
- nuxt-community/google-adsense-module: Google AdSense module for Nuxt.jsを使って実装しています。
ad-slot
をコピペして、adsbygoogle
のプロパティにセットします。
<adsbygoogle ad-slot="1234567890"></adsbygoogle>
これで無事広告が表示されていることを確認しました。(結構簡単でびっくりしました)
↓表示された広告↓
以上です。
関連する記事
Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。
Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します
NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。
AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました