2019-11-05

nuxtでgoogle ads

Blog Nuxt化
Nuxt.js
Google Ads

Nuxt で Google Ads の設定方法。
単純にlayout/default.vueに記載したり、nuxt.config.jshead/scriptに記載してもうまく動きません。
@nuxtjs/google-adsenseを使います。

インストール

yarn add @nuxtjs/google-adsense  

nuxt.config.js の設定

ライブラリを modules に追加します。
Google Ads に使う id を設定するだけです。

export default {  
  modules: [['@nuxtjs/google-adsense', { id: 'ca-pub-xxxxxxxxxxxxxxxx' }]]  
}  

以上で Google Ads が利用できるようになりました。

ただ、この状態では複数の Layout ファイルによるページ切り替えをするとエラーが出てしまいます。
blog とトップページではレイアウトを変えたかったのですが、とりあえず共通化することで回避しました。
(TOOLSページはレイアウトを変えているので広告が消えてしまいます。)


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:シュタゲシリーズ / STARWARS スコドロ / BeatSaber / にゃんこ大戦争

→ Policy