Vue.js Google Adsense Component with InFeed Ads support

by Vue.js Examples

vue-google-adsense

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

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

View demo Download Source

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.

  • In Article Ads: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience.

  • In Feed Ads: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience.

How to use

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)

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>

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

GitHub