vue-google-adsense v1.10.1
💰 Vue Google Adsense
Vue.js Google Adsense Component with InFeed and InArticle Ads support
🎉 Demo
https://mazipan.github.io/vue-google-adsense/
:question: 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)
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', isNewAdsCode: true })
:gift: Available Props
Attribute | Type | Default | Description |
---|---|---|---|
root-class | String | adswrapper | Class for fill in wrapper block |
ins-class | String | empty | Class for fill in ins tag |
ins-style | String | display:block; | Style for fill in ins tag |
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 |
data-ad-format | String | auto for Adsense Ads fluid for InFeed and InArticle Ads | Attribute data-ad-format from adsense Possible values are auto , horizontal , vertical , rectangle or fluid |
data-full-width-responsive | String (yes or no ) | no | Attribute data-full-width-responsive from adsense |
is-non-personalized-ads | String (yes or no ) | no | Props for request non-personalized ads, read more |
is-new-ads-code | String (yes or no ) | no | Use new Adsense code (per 19 july 2021), read more |
data-ad-region | String | empty | See PR #163 |
:metal: Who is using this library
Already used in production for these project :
- Blog-2.0
- Explore-Github
- Fire Jak
- Rumah Sakit Jakarta
- ChuckNorris
- Nuxt blog - Surmon.me
- Etc... // You can add the list here via pull request
🏃 Development
We are using pnpm, please read the Installation section first.
# install dependencies
pnpm install
# serve with demo page
pnpm run dev:demo
# build for production
pnpm run build:demo
pnpm run build:lib
Support me
- 👉 🇮🇩 Trakteer
- 👉 🌍 BuyMeACoffe
- 👉 🌍 Paypal
- 👉 🌍 Ko-Fi
Copyright © 2018 Built with ❤️ by Irfan Maulana
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago