コラム 3. プログラミング情報
2019年10月12日に更新

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

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

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

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

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

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

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

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

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

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

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

@nuxtjs/google-adsenseをインストールする

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

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

$ yarn add @nuxtjs/google-adsense

@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です。

  • 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(縦長)

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

デフォルトの"auto"のままだと、画面領域によってその他の3つのどれかが有効になり、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

対応1 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回デプロイしました。とほほ。。。

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

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

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
スポンサー広告