Tuesday, June 9, 2020

Add Google AdSense verification code inside Nuxt JS

As we all know, Google AdSense is one of the most popular services to earn Ad revenue. When running a blog using Nuxt JS, it is very important to add in some SEO-related code as well as AdSense verification code before closing the </head> tag.

Nuxt JS already comes with Vue Meta package integrated. So adding all the Meta tags, CSS links, Script tags, etc becomes very easy to do. You can get more info about working with the <head> tag here and on the official Vue Meta site as it is very nicely explained there.

Google AdSense provides us a code like this:

<script data-ad-client="ca-pub-1234567890" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Now to add this All we have to do is open the nuxt.config.js file and then add/update the code for the head tag as below:

head: function(){
    return {
      script: [
        {
          'data-ad-client': "ca-pub-1234567890",
          async:true,
          src:"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        }
      ],
    }
},

Make sure you update the ‘data-ad-client‘ value to the one you have got in your AdSense code otherwise it will not work.

I have also tried a package called @nuxtjs/google-adsense which also works very nicely, but I prefer not to install any package if there is already a feature inbuilt with Nuxt JS.