vue-google-adsense

by mazipan

πŸ’° Vue.js Google Adsense Component with InFeed and InArticle Ads support

153 Stars 30 Forks Last release: 3 months ago (1.8.3) MIT License 188 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

πŸ’° Vue Google Adsense

License Size on Bundlephobia Travis version downloads All Contributors

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

Template

VueAdsense Template :


VueInArticleAdsense Template :


VueInFeedAdsense Template :


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' })

: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 | Boolean |
false
| Attribute
data-full-width-responsive
from adsense | | is-non-personalized-ads | Boolean|
false
| Props for request
non-personalized
ads, read more |

:metal: 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

npm run build

Support me


Copyright © 2018 Built with ❀️ by Irfan Maulana

Contributors

Thanks goes to these wonderful people (emoji key):


Irfan Maulana

πŸ’»

Cody Nguyen

πŸ’»

C-Bass

πŸ’» πŸ“–

schneefux

πŸ’» πŸ›

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.