Nuxt.jsにGoogle Adsenseの広告を好きなサイズで設置する

Nuxt.jsで@nuxtjs/google-adsenseを使用してAdnsenseの広告を設置します。

インストール

// npm
npm install --save-dev @nuxtjs/google-adsense

// yarn
yarn add --dev @nuxtjs/google-adsense

nuxt.config.jsで設定する

export default {
  modules: [
    //Adsense
    '@nuxtjs/google-adsense', {
      id: 'ca-pub-XXXXXXXXXXX', //広告ユニットタグ内のca-pub-XXXXXXXXXXXの文字列を使用
      pageLevelAds: true, //自動広告を有効
      analyticsUacct: 'UA-XXXXXXXX-X', //Google Analyticsと連携する場合、UAIDを指定
      analyticsDomainName: 'https://example.com' //Google Analyticsと連携する場合、ドメインを指定
    }
  ]
}

広告を設置

PC 正方形、スマホ 正方形

HTML

<div class="ad">
  <adsbygoogle :ad-slot="'1234567890'" :ad-style="{ display: 'block' }" :ad-format="'rectangle'" />
</div>

参考）広告サイズ

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選