Nuxt Google Adsense

October 4, 2020

Via Nuxt Plugin

NOTE: The plugin has not been updated since Jan 2018, but it still works.

Install

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

Edit nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/google-adsense'
  ],
  'google-adsense': {
    id: 'ca-pub-8122716156XXXXXX'
  }
}

NOTE: Adsense is disabled in development mode

Via Meta Head Script

Edit layouts/default.vue

<script>
export default {
  head() {
    let productionScripts = []
    if (process.env.NODE_ENV === 'production') {
      productionScripts = [
        { hid: 'adsense', src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', defer: true, 'data-ad-client': 'ca-pub-8122716156XXXXXX' },
      ]
    }

    return {
      title: "Test Adsense",
      script: [

      ].concat(productionScripts),
    }
  },
}
</script>

You might get the following warning, but it should be fine.

adsbygoogle.js:218 AdSense head tag doesn't support data-n-head attribute.
adsbygoogle.js:218 AdSense head tag doesn't support data-hid attribute.

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags: