Nuxt.jsにGoogleアドセンスを導入するときに、これだけは気をつけろ！

2019.09.30に公開
2020.04.10に更新

小ネタ集
2. Nuxt.js

この記事に書かれていること

この記事には、以下の内容が書かれています。

Nuxt.jsにGoogleアドセンスを導入するには「@nuxtjs/google-adsense」を使う
@nuxtjs/google-adsenseモジュールのセットアップ方法
アドセンス広告を設定する時に気をつけるべき2つのこと

自力でやってみたが無理だった

最初は「モジュールを使わなくてもいけるのでは？」と思い、自力でheadタグに認証コードを埋め込みました。

広告を表示することには成功しましたが、ページが切り替わる度に表示したり、しなかったり。。

結果、うまくいきませんでした。

あくまで予測ですが、Nuxt.jsのレンダリングの関係でうまく表示出来なかったんだと思います。

今からアドセンス導入するに方は、素直に@nuxtjs/google-adsenseを導入しましょう。

筆者のように人生消耗します。

まずはアドセンスを導入するために、@nuxtjs/google-adsenseをインストールします。

ターミナルに移動して、以下のコマンドを実行してください。

$ yarn add @nuxtjs/google-adsense

続いて@nuxtjs/google-adsenseのセットアップを行います。

nuxt.config.jsを開いてください。

@nuxtjs/dotenvを導入している場合

@nuxtjs/dotenvとは、環境変数を簡単に扱えるNuxt.jsのモジュールです。

@nuxtjs/dotenvの導入方法はこちらの記事に書いています。

Contentfulからブログ記事を取得してNuxt.jsで表示するための手順書

.env

BASE_URL=https://サイトURL.com
GA_ADSENSE_ID=ca-pub-###########
GA_TRACKING_ID=UA-###########

...

nuxt.config.js

const domain = process.env.BASE_URL.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1]

export default {

  modules: [
    ['@nuxtjs/google-adsense', {
      id: process.env.GA_ADSENSE_ID,
      pageLevelAds: true,
      analyticsUacct: process.env.GA_TRACKING_ID, // アナリティクスと連携する場合のみ必要
      analyticsDomainName: domain                 // アナリティクスと連携する場合のみ必要
    }]
  ],
}

const domain = ...

URLから、ドメインだけを取得するコードです。

process.env.BASE_URLには、"https://blog.cloud-acct.com"が入っており、ここから"blog.cloud-acct.com"だけを取得しています。

別途、.envファイルにDOMEINという環境変数を登録してセットしても構いません。

これは、あくまで筆者のやり方です。ドメインをセットできれば、その方法は自由です。
pageLevelAds: true

自動広告を有効にする場合、trueにします。デフォルトはfalseです。
analyticsUacct: process.env.GA_TRACKING_ID

アナリティクスと連動する場合、アナリティクスIDをセットします。

アナリティクスの連携方法は以下に記載されています。

AdSense とアナリティクスをリンクする - AdSense ヘルプ
analyticsDomainName: domain

アナリティクスに登録しているドメインをセットします。

このプロパティも、アナリティクスと連動する場合にのみ設定します。

@nuxtjs/dotenvを導入していない場合

nuxt.config.js

  modules: [
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-############',
      pageLevelAds: true,
      analyticsUacct: 'UA-########',
      analyticsDomainName: 'example.com'
    }]
  ],

アドセンスコンポーネントを導入する

以上でadsbygoogleコンポーネントが利用できるようになります。

基本的な使い方は、ad-slotに広告ユニットIDをセットします。

表示したい場所にコンポーネントをセットしましょう。

<template>
  <adsbygoogle ad-slot="123456789" />
</template>

よしこれでアドセンスは表示出来た。しかし大切なのはここからだ！

さて、、、ここまではいいんです。

公式サイトにも、他のブログにも書かれている内容です。

こんな情報はどうでもいいんです。

大切なのはここからです。

実務で活用する場合の対応を書いていきます。

1、ad-formatには気をつけろ!

固定サイズの広告を表示したいときに気をつけるべきことです。

adsbygoogleコンポーネントには、ad-formatのpropsが用意されています。

デフォルトは"auto"となっていますが、固定サイズの広告を表示するときは、ここを明示的に空にする必要があります。

300x250の固定サイズの広告を表示する場合

<template>
  <adsbygoogle
    ad-slot="123456789"
    ad-format=""					// ここを空にする
    :ad-style="gadStyle"
   />
</template>

<script>
export default {
  data: () => ({
    gadStyle: {
      display:'inline-block',
      width:'300px',
      height:'250px'
    }
  })
}
</script>

なぜ必要か？

ad-formatを空にしないと、設定したstyleが有効になりません。

筆者の場合、heightが勝手に600pxになりました。

ad-formatには、

auto
rectangle（レクタングル）
vertical（横長）
horizontal（縦長）

の４つの値を渡すことができます。

デフォルトの"auto"のままだと、画面領域によってその他の３つのどれかが有効になり、styleより優先されてしまうためです。

実際にGoogleアドセンスから取得したコードには、data-ad-formatがついていません。

Googleアドセンスから取得したコード

<!-- 300x250 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-###########"
     data-ad-slot="123456789"></ins>

ちなみに、"vertical"の値を渡すと、styleそっちのけで横長の広告が表示されました。こんちくしょうめ！

1、ad-formatには気をつけろ!のまとめ

固定サイズの広告を表示したいときは、ad-formatを空にしろ！

参考

レスポンシブ広告のタグパラメータの使用方法 - Adsenseヘルプ

2、広告を並べたければ display:inline-block に !important をつけろ！

これは、スタイルをclassで指定した場合の注意点であり、上記のようにstyleタグでdisplay:inline-blockを指定した場合を省きます。

筆者の場合、画面領域によって広告サイズを変える必要があり、スタイルをclassで指定しました。

画面領域によって広告サイズを変える場合

<template>
  <adsbygoogle
    ad-slot="123456789"
    class="adslot_1"
  />
</template>

<style lang="scss" scoped>
  .adslot_1 {
    display:inline-block !important; 		// !importantをつける
    width: 300px; 
    height: 250px;
  }
  @media (min-width: 960px) {
    .adslot_1 {
      width: 336px; 
      height: 280px;
    }
  }
</style>

なぜ必要か？

adsbygoogleコンポーネントには、ad-styleのpropsが用意されていますが、デフォルトはdisplay: 'block'が指定されています。

ad-style="display: inline-block;"と指定した場合、 display: 'block' は上書きされ、無効になります。

しかし、classで指定した場合ad-style=" display: block;"が優先され、広告が横並びになりません。

キィいいいー！

2、広告を並べたければ display:inline-block に !important をつけろ！のまとめ

display:inline-block !important を指定する。
デフォルトの値は目に見えない。だからこそ 公式サイトを良く確認する。

その他のエラー対応

ここから先は、筆者の場合だけだと思います。参考程度にしてください。

まだ明確なエラー理由もわかっていません。

エラー内容

ブラウザをリロードすると、記事のリストが表示されなくなりました。

エラー画像

2019-09-29 18-39-41

対応１ asyncData内でのgettersの呼び出しをやめた

当初、下記のようにasyncData内でgettersを使用していました。

エラーの原因だったコード

async asyncData({ error, params, payload, store }) {
  
  const hoge = store.getters.hogehoge() ? hoge : null
  
}

上記をgettersを使わずに書き直したところ、エラーは直りました。

対応2 子コンポーネントに渡す値を明確にした

子コンポーネントのpropsを修正すると、また同じエラーが発生しました。

エラーの原因だったコード

<template>
  <drawer-toolbar
    hideScroll
   />
</template>

上記は、drawer-toolbarという子コンポーネントに、hideScrollというBoolean型を渡しています。

通常、この書き方でtrueが渡されるのですが、エラーが発生したため渡す値を明示的にしました。

修正したコード

<template>
  <drawer-toolbar
    :hideScroll="true"
   />
</template>

これでエラーは無くなりました。

上記、2つのコードは決して間違っていない

注意して欲しいのは、上記はあくまで「@nuxtjs/google-adsense」を導入した場合に発生したエラーです。

Nuxt.js的に何ら間違っていません。

実際に開発環境では正しく動きます。

まとめ

「@nuxtjs/google-adsense」は、本番環境でしか広告が表示されないように設定されています。

なので、開発環境ではエラーに遭遇しません。

これがすごく厄介で、エラーに遭遇すると「一つ直してはデプロイし本番環境のURLで確認する」の繰り返しです。

筆者は計21回デプロイしました。とほほ。。。

この記事があなたの人生の消耗を回避できたなら、筆者は嬉しい限りです。

それではまたこのブログでお会いしましょう！

← Prev

2. Nuxt.js

【Nuxt.js】サーバーサイドレンダリングの仕組みと、動的なルーティングの追加

2. Nuxt.js

Nuxt.jsのUniversalモードとSPAモードの大きな違い

あなたの力になれること

私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。

独学プログラマのサービス

「独学プログラマ」の内容についてSlackで質問できますよ 0円/ALL FREE

【ココナラ】Rails、Nuxt.js周りの短期間・短時間メンターになります 5,500円/1h

小ネタ集の投稿