Skip to content
This repository has been archived by the owner on Jul 22, 2022. It is now read-only.
/ vue-google-adsense Public archive

๐Ÿ’ฐ Vue.js Google Adsense Component with InFeed and InArticle Ads support

License

Notifications You must be signed in to change notification settings

mazipan/vue-google-adsense

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ’ฐ Vue Google Adsense

License Size on Bundlephobia install size Build and Deploy version next-verion downloads All Contributors

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

Vue 2

You are seing vue-google-adsense@2.x.x which ONLY compatible for Vue 3, if you want to support Vue 2, please use vue-google-adsense@1.x.x.

Documentation for vue-google-adsense@1.x.x can be found on the branch v1-for-vue2

๐ŸŽ‰ 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-scriptx, you need to install :

npm install vue-scriptx vue-google-adsense@next --save

Use in main.js

import ScriptX from 'vue-scriptx'
app.use(ScriptX)

import Ads from 'vue-google-adsense'
app.use(Ads.Adsense)
app.use(Ads.InArticleAdsense)
app.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'

import ScriptX from 'vue-scriptx'
app.use(ScriptX)

app.use(Adsense)
app.use(InArticleAdsense)
app.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 ScriptX from 'vue-scriptx'
app.use(ScriptX)

import Ads from 'vue-google-adsense'
app.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })

๐ŸŽ 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

๐Ÿค˜ Who is using this library

Already used in production for these project :

๐Ÿƒ Development

We are using pnpm, please read the Installation section first.

# install dependencies
pnpm run bs

# serve with demo page
pnpm run dev:demo

# build for production
pnpm run build:demo
pnpm run build:lib

Support me


Copyright ยฉ 2018 Built with โค๏ธ by Irfan Maulana