💵 Vue Google Adsense

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

🚀 Skeleton generated with Vue-CLI using template vuejs-template-plugin

🎉 Demo

https://mazipan.github.io/vue-google-adsense/

❓ What is In Feed and In Article Ads?

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

🚀 Getting started

Installation

Need dependencies vue-script2, you need to install :

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

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)

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 }
  ]
}

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>

🎁 Available Props

Attribute	Type	Default	Description
root-class	String	`adswrapper`	Class for fill in wrapper block
data-ad-client	String	`empty`	Attribute `data-ad-client` from adsense
data-ad-slot	String	`empty`	Attribute `data-ad-slot` from adsense
data-ad-layout-key	String	`empty`	Attribute `data-ad-layout-key` from adsense
data-ad-test	String	`empty`	Attribute `data-ad-test` from adsense

🤘 Who is using this library

Already used in production for these project :

🏃 Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production demo with minification
npm run build

# build for plugin distribution file
npm run pack

# run build and pack
npm run dist

For detailed explanation on how things work, consult the docs for vue-loader.

Contact Me :