Best Vue.js Components for Adsense

Best Vue.js Adsense Components 2021

Best Vue.js Adsense Components

If you have a blog or web app, one of the ways to monetize it is via Adsense. If you are creating your blog or webapp with Vue.js then here are the components you may consider using.

(a).

Vue.js Google Adsense Component with InFeed and InArticle Ads support

At least there is three (3) type ads in Google Adsense :

  • Responsive Ads: A simple way to get ads on your page. Choose the size, placement and style you want to display. Learn more
  • In Article Ads: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience. Learn more
  • In Feed Ads: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience. Learn more

Installation

Need dependencies vue-script2, you need to install :

npm install vue-script2 vue-google-adsense --save

Usage

Use in main.js

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

Use partial import

Import only AdsType you need

import Adsense from 'vue-google-adsense/dist/Adsense.min.js'
import InArticleAdsense from 'vue-google-adsense/dist/InArticleAdsense.min.js'
import InFeedAdsense from 'vue-google-adsense/dist/InFeedAdsense.min.js'

Vue.use(require('vue-script2'))

Vue.use(Adsense)
Vue.use(InArticleAdsense)
Vue.use(InFeedAdsense)

Usage in Nuxt.js

Create file plugins/vue-google-adsense.js, with code :

import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

Then update your nuxt.config.js, with code :

module.exports = {
  plugins: [
    { src: '~/plugins/vue-google-adsense', ssr: false }
  ]
}

Usage in Gridsome

Insert these code in src/main.js:

// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue, { router, head, isClient }) {
 if (isClient) {
   Vue.use(require('vue-script2'));
   Vue.use(require('vue-google-adsense/dist/Adsense.min.js'));
   Vue.use(require('vue-google-adsense/dist/InArticleAdsense.min.js'));
   Vue.use(require('vue-google-adsense/dist/InFeedAdsense.min.js'));
 }
}

Template

VueAdsense Template :

<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>

VueInArticleAdsense Template :

<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InArticleAdsense>

VueInFeedAdsense Template :

<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>

Auto Ads Usage

import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT' })

Reference

Read more here.

Related Posts