# vue-google-adsense > Vue.js Google Adsense Component with InFeed and InArticle Ads support Latest version **1.10.1** (published 2021-07-28) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-google-adsense pnpm add vue-google-adsense yarn add vue-google-adsense bun add vue-google-adsense ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.10.1 | | Published | 2021-07-28 | | First published | 2018-01-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 67 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 254 | | Author | Irfan Maulana | | Maintainers | irfan.maulana | | Keywords | vuejs adsense, vue2 adsense, vue adsense, vuejs google adsense, vue2 google adsense, vue google adsense | ## Links - npm: https://www.npmjs.com/package/vue-google-adsense - Repository: https://github.com/mazipan/vue-google-adsense - Homepage: https://mazipan.github.io/vue-google-adsense/ - Issues: https://github.com/mazipan/vue-google-adsense/issues - npm.io page: https://npm.io/package/vue-google-adsense ## Recent versions - 1.10.1 (latest) — 2021-07-28 - 2.0.0 (next) — 2022-03-21 - 1.10.0 — 2021-07-28 - 1.9.3 — 2021-05-05 - 1.9.2 — 2021-01-26 - 1.9.1 — 2020-12-01 - 1.9.0 — 2020-09-24 - 1.8.3 — 2020-06-25 - 1.8.2 — 2020-06-25 - 1.8.1 — 2020-03-12 - 1.8.0 — 2019-10-21 - 1.7.0 — 2019-08-27 - 1.6.2 — 2019-08-26 - 1.6.1 — 2019-08-13 - 1.6.0 — 2019-05-21 - … 15 more at https://npm.io/package/vue-google-adsense/versions ## README # 💰 Vue Google Adsense ![License](https://img.shields.io/github/license/mazipan/vue-google-adsense.svg?maxAge=3600) [![Size on Bundlephobia](https://badgen.net/bundlephobia/minzip/vue-google-adsense)](https://bundlephobia.com/result?p=vue-google-adsense) [![install size](https://packagephobia.com/badge?p=vue-google-adsense)](https://packagephobia.com/result?p=vue-google-adsense) [![Build and Deploy](https://github.com/mazipan/vue-google-adsense/actions/workflows/deploy.yml/badge.svg)](https://github.com/mazipan/vue-google-adsense/actions/workflows/deploy.yml) [![version](https://img.shields.io/npm/v/vue-google-adsense.svg?maxAge=60)](https://www.npmjs.com/package/vue-google-adsense) ![downloads](https://img.shields.io/npm/dt/vue-google-adsense.svg?maxAge=3600) [![All Contributors](https://img.shields.io/github/contributors/mazipan/vue-google-adsense)](#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](https://support.google.com/adsense/answer/6002575?hl=en_GB) - **In Article Ads**: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience. [Learn more](https://support.google.com/adsense/answer/7320112?hl=en_GB) - **In Feed Ads**: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience. [Learn more](https://support.google.com/adsense/answer/7171765?hl=en_GB) ## 🚀 Getting started ### Installation Need dependencies [vue-script2](https://github.com/taoeffect/vue-script2), you need to install : ```javascript npm install vue-script2 vue-google-adsense --save ``` ### Use in `main.js` ```javascript 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 ```javascript 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 : ```javascript 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 : ```javascript module.exports = { plugins: [ { src: '~/plugins/vue-google-adsense', ssr: false } ] } ``` ### Usage in Gridsome Insert these code in `src/main.js`: ```javascript // 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 : ```html ``` VueInArticleAdsense Template : ```html ``` VueInFeedAdsense Template : ```html ``` ### Auto Ads Usage ```js 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](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) | | `is-new-ads-code` | String (`yes` or `no`) | `no` | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) | | `data-ad-region` | String | `empty` | See PR [#163](https://github.com/mazipan/vue-google-adsense/pull/163) | ## :metal: Who is using this library Already used in production for these project : + [Blog-2.0](https://github.com/mazipan/blog-2.0) + [Explore-Github](https:///mazipan.github.io/explore-github) + [Fire Jak](https://mazipan.github.io/FireJak) + [Rumah Sakit Jakarta](https://mazipan.github.io/RumahSakitJakarta) + [ChuckNorris](https://mazipan.github.io/chucknorris) + [Nuxt blog - Surmon.me](https://github.com/surmon-china/surmon.me) + Etc... // You can add the list here via pull request ## 🏃 Development We are using [pnpm](https://pnpm.js.org/), please read the [Installation](https://pnpm.js.org/en/installation) section first. ``` bash # 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](https://trakteer.id/mazipan?utm_source=github) - 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github) - 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github) - 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan) --- Copyright © 2018 Built with ❤️ by Irfan Maulana --- _Source: https://npm.io/package/vue-google-adsense · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._