Repository: mazipan/vue-google-adsense Branch: master Commit: fdffbea2cecc Files: 56 Total size: 68.3 KB Directory structure: gitextract_wxo3x_en/ ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── auto-comment.yml │ └── workflows/ │ ├── codeql-analysis.yml │ └── deploy.yml ├── .gitignore ├── .kodiak.toml ├── .prettierignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── package.json ├── packages/ │ ├── demo/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ ├── index.html │ │ │ ├── robots.txt │ │ │ └── site.webmanifest │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ ├── Box.vue │ │ │ │ ├── Header.vue │ │ │ │ └── ImageCard.vue │ │ │ ├── main.ts │ │ │ ├── registerServiceWorker.ts │ │ │ ├── router/ │ │ │ │ └── index.ts │ │ │ ├── shims-tsx.d.ts │ │ │ ├── shims-vue.d.ts │ │ │ └── views/ │ │ │ ├── Home.vue │ │ │ ├── InArticle.vue │ │ │ └── InFeed.vue │ │ ├── tsconfig.json │ │ └── vue.config.js │ └── lib/ │ ├── README.md │ ├── bili.config.ts │ ├── package.json │ ├── src/ │ │ ├── @types/ │ │ │ └── global.d.ts │ │ ├── VueGoogleAdsense.ts │ │ ├── ads/ │ │ │ ├── Adsense.ts │ │ │ ├── AdsenseComponent.vue │ │ │ ├── AutoAdsense.ts │ │ │ ├── InArticleAdsense.ts │ │ │ ├── InArticleAdsenseComponent.vue │ │ │ ├── InFeedAdsense.ts │ │ │ └── InFeedAdsenseComponent.vue │ │ ├── shims-vue.d.ts │ │ └── utils/ │ │ ├── assign.ts │ │ ├── constant.ts │ │ └── props.ts │ └── tsconfig.json ├── pnpm-workspace.yaml └── turbo.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*.{js,jsx,ts,tsx,vue}] charset = utf-8 indent_style = space end_of_line = lf indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: .eslintignore ================================================ node_modules dist ================================================ FILE: .eslintrc.js ================================================ module.exports = { root: true, env: { node: true, }, extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-tabs': 'off', '@typescript-eslint/ban-ts-comment': 'off', }, parserOptions: { parser: '@typescript-eslint/parser', }, } ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] patreon: # Replace with a single Patreon username open_collective: # Replace with a single Open Collective username ko_fi: mazipan tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username otechie: # Replace with a single Otechie username custom: ['https://mazipan.space/support'] ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug Report about: Something's not working as expected. title: '' labels: bug assignees: mazipan --- ## Description ## Expected Behaviour ## Additional Information ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature Request about: Propose feature additions to the project. title: '' labels: enhancement assignees: mazipan --- ## Description ## Implementation Model ## Tasks - [ ] ... - [ ] ... - [ ] ... ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ Closes ## Description ## Current Tasks - [ ] (task 1) - [ ] (task 2) - [ ] (task 3) ================================================ FILE: .github/auto-comment.yml ================================================ pullRequestOpened: > Thank you for raising your pull request. Please make sure you have followed @mazipan And please push ⭐ button in this repository ================================================ FILE: .github/workflows/codeql-analysis.yml ================================================ # For most projects, this workflow file will not need changing; you simply need # to commit it to your repository. # # You may wish to alter this file to override the set of languages analyzed, # or to provide custom queries or build logic. name: "CodeQL" on: schedule: - cron: '0 20 * * 2' jobs: analyze: name: Analyze runs-on: ubuntu-latest strategy: fail-fast: false matrix: # Override automatic language detection by changing the below list # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] language: ['javascript'] # Learn more... # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection steps: - name: Checkout repository uses: actions/checkout@v2 with: # We must fetch at least the immediate parents so that if this is # a pull request then we can checkout the head. fetch-depth: 2 # If this run was triggered by a pull request event, then checkout # the head of the pull request instead of the merge commit. - run: git checkout HEAD^2 if: ${{ github.event_name == 'pull_request' }} # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL uses: github/codeql-action/init@v1 with: languages: ${{ matrix.language }} # If you wish to specify custom queries, you can do so here or in a config file. # By default, queries listed here will override any specified in a config file. # Prefix the list here with "+" to use these queries and those in the config file. # queries: ./path/to/local/query, your-org/your-repo/queries@main # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # If this step fails, then you should remove it and run the build manually (see below) - name: Autobuild uses: github/codeql-action/autobuild@v1 # ℹ️ Command-line programs to run using the OS shell. # 📚 https://git.io/JvXDl # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines # and modify them (or add more) to build your code if your project # uses a compiled language #- run: | # make bootstrap # make release - name: Perform CodeQL Analysis uses: github/codeql-action/analyze@v1 ================================================ FILE: .github/workflows/deploy.yml ================================================ name: 'Build and Deploy' on: push: branches: [master] jobs: build_and_deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 with: persist-credentials: false fetch-depth: 0 - name: Cache turbo dir id: turbo-cache uses: actions/cache@v2 with: path: .turbo key: turbo-lite-packages-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }} restore-keys: | turbo-lite-packages-${{ runner.os }}- - name: Cache pnpm modules uses: actions/cache@v2 with: path: ~/.pnpm-store key: pnpm6-lite-packages-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }} restore-keys: | pnpm6-lite-packages-${{ runner.os }}- - name: pnpm install recursive uses: pnpm/action-setup@v2.2.1 with: version: 6.32.3 run_install: | - recursive: true args: [--frozen-lockfile] - name: Build library run: pnpm run build:lib - name: Build demo app run: pnpm run build:demo - name: GitHub Pages Deploy uses: peaceiris/actions-gh-pages@v3 with: personal_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./packages/demo/dist/ publish_branch: gh-pages ================================================ FILE: .gitignore ================================================ .DS_Store node_modules/ npm-debug.log yarn-error.log yarn.lock package-lock.json # Editor directories and files .idea *.suo *.ntvs* *.njsproj *.sln dist/ .turbo/ ================================================ FILE: .kodiak.toml ================================================ version = 1 [update] always = true # default: false ignored_usernames = ["dependabot", "snyk-bot"] [approve] auto_approve_usernames = ["ImgBotApp", "imgbot"] [merge.automerge_dependencies] versions = ["minor", "patch"] usernames = ["dependabot", "snyk-bot"] # https://kodiakhq.com/docs/recipes#better-merge-messages [merge.message] title = "pull_request_title" # default: "github_default" body = "pull_request_body" # default: "github_default" include_pr_number = true include_coauthors = true ================================================ FILE: .prettierignore ================================================ node_modules dist ================================================ FILE: .prettierrc.js ================================================ module.exports = { bracketSpacing: true, printWidth: 140, singleQuote: true, semi: false, trailingComma: 'es5', }; ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2018 Irfan Maulana Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 💰 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) ![next-verion](https://img.shields.io/npm/v/vue-google-adsense/next) ![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 ## 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](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2) ## 🎉 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-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install : ```javascript npm install vue-scriptx vue-google-adsense@next --save ``` ### Use in `main.js` ```javascript 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 ```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' 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 : ```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 ScriptX from 'vue-scriptx' app.use(ScriptX) import Ads from 'vue-google-adsense' app.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 run bs # 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 ================================================ FILE: package.json ================================================ { "name": "@vue-google-adsense/monorepo", "version": "2.0.1", "private": false, "description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support", "keywords": [ "vuejs adsense", "vue2 adsense", "vue adsense", "vuejs google adsense", "vue2 google adsense", "vue google adsense" ], "bugs": { "url": "https://github.com/mazipan/vue-google-adsense/issues" }, "repository": { "type": "git", "url": "https://github.com/mazipan/vue-google-adsense.git" }, "license": "MIT", "author": "Irfan Maulana ", "main": "dist/VueGoogleAdsense.min.js", "jsdelivr": "dist/VueGoogleAdsense.min.js", "unpkg": "dist/VueGoogleAdsense.min.js", "module": "dist/VueGoogleAdsense.min.js", "files": [ "dist" ], "scripts": { "bootstrap": "pnpm recursive install --reporter append-only && pnpm run build:all", "bs": "pnpm run bootstrap", "build:all": "turbo run build --scope=vue-google-adsense", "build:demo": "turbo run build --scope=@vue-google-adsense/demo", "build:lib": "turbo run build --scope=vue-google-adsense", "dev:demo": "turbo run dev --scope=@vue-google-adsense/demo", "lint:all": "eslint packages/** --fix", "test": "echo \"Error: no test specified\" && exit 0" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,ts,vue}": "pnpm run lint" }, "devDependencies": { "@babel/core": "^7.17.2", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-transform-runtime": "^7.17.0", "@babel/preset-env": "^7.16.11", "@typescript-eslint/eslint-plugin": "4.22.1", "@typescript-eslint/parser": "4.22.1", "@vue/cli-plugin-eslint": "4.5.12", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-standard": "6.0.0", "@vue/eslint-config-typescript": "7.0.0", "@vue/cli-service": "~4.5.15", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-node": "11.1.0", "eslint-plugin-promise": "5.1.0", "eslint-plugin-standard": "5.0.0", "eslint-plugin-vue": "7.9.0", "husky": "3.1.0", "lint-staged": "9.5.0", "prettier": "^2.5.1", "tslib": "2.2.0", "turbo": "^1.1.4", "typescript": "4.2.4" }, "peerDependencies": { "@vue/cli-service": "~4.5.15", "vue": "^3.0.0", "vue-scriptx": "^0.2.5" }, "engines": { "node": ">=14.17 <15", "pnpm": ">=6 <7", "yarn": ">=1.22.11" }, "packageManager": "pnpm@6.32.3" } ================================================ FILE: packages/demo/README.md ================================================ # 💰 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) ![next-verion](https://img.shields.io/npm/v/vue-google-adsense/next) ![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 ## 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](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2) ## 🎉 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-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install : ```javascript npm install vue-scriptx vue-google-adsense@next --save ``` ### Use in `main.js` ```javascript 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 ```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' 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 : ```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 ScriptX from 'vue-scriptx' app.use(ScriptX) import Ads from 'vue-google-adsense' app.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 run bs # 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 ================================================ FILE: packages/demo/babel.config.js ================================================ module.exports = { presets: ['@vue/cli-plugin-babel/preset'], } ================================================ FILE: packages/demo/package.json ================================================ { "name": "@vue-google-adsense/demo", "version": "2.0.1", "description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support", "author": "Irfan Maulana (https://github.com/mazipan/)", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "dev": "vue-cli-service serve", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "@types/node": "14.11.2", "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-pwa": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-plugin-typescript": "~4.5.15", "@vue/cli-plugin-vuex": "~4.5.15", "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.2.31", "babel-eslint": "10.1.0", "bulma-dracula": "1.0.4", "core-js": "3.6.5", "eslint": ">= 4.12.1", "prismjs": "1.21.0", "register-service-worker": "1.7.1", "sass": "^1.49.7", "sass-loader": "10.1.1", "tslib": "2.0.1", "typescript": "~4.1.5", "vue": "^3.0.0", "vue-google-adsense": "workspace:*", "vue-prism-component": "1.2.0", "vue-router": "^4.0.0", "vue-scriptx": "^0.2.5", "vuex": "^4.0.0", "webpack": "^5.69.0" }, "homepage": "https://mazipan.github.io/vue-google-adsense/", "license": "MIT", "dependencies": { "@popperjs/core": "^2.10.2", "bootstrap": "^5.1.3", "bootstrap-vue-3": "^0.1.5" } } ================================================ FILE: packages/demo/public/index.html ================================================ 💰 Vue Google Adsense | Irfan Maulana
================================================ FILE: packages/demo/public/robots.txt ================================================ User-agent: * Disallow: ================================================ FILE: packages/demo/public/site.webmanifest ================================================ { "name": "", "short_name": "", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } ================================================ FILE: packages/demo/src/App.vue ================================================ ================================================ FILE: packages/demo/src/components/Box.vue ================================================ ================================================ FILE: packages/demo/src/components/Header.vue ================================================ ================================================ FILE: packages/demo/src/components/ImageCard.vue ================================================ ================================================ FILE: packages/demo/src/main.ts ================================================ // Import Vue and libs import { createApp } from 'vue' // Create Vue App import App from './App.vue' // ScriptX import ScriptX from 'vue-scriptx' // Ads import Ads from 'vue-google-adsense' import './registerServiceWorker' // Router import router from './router' // Themes import BootstrapVue3 from 'bootstrap-vue-3' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue-3/dist/bootstrap-vue-3.css' const app = createApp(App) app.use(ScriptX) app.use(Ads.Adsense) app.use(Ads.InArticleAdsense) app.use(Ads.InFeedAdsense) app.use(router) app.use(BootstrapVue3) // Start App app.mount('#app') ================================================ FILE: packages/demo/src/registerServiceWorker.ts ================================================ /* eslint-disable no-console */ import { register } from 'register-service-worker' if (process.env.NODE_ENV === 'production') { register(`${process.env.BASE_URL}service-worker.js`, { ready() { console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB') }, registered() { console.log('Service worker has been registered.') }, cached() { console.log('Content has been cached for offline use.') }, updatefound() { console.log('New content is downloading.') }, updated() { console.log('New content is available; please refresh.') }, offline() { console.log('No internet connection found. App is running in offline mode.') }, error(error) { console.error('Error during service worker registration:', error) }, }) } ================================================ FILE: packages/demo/src/router/index.ts ================================================ import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'home', component: Home, }, { path: '/in-article', name: 'in-article', component: () => import(/* webpackChunkName: "in-article" */ '../views/InArticle.vue'), }, { path: '/in-feed', name: 'in-feed', component: () => import(/* webpackChunkName: "in-feed" */ '../views/InFeed.vue'), }, ] const router = createRouter({ history: createWebHashHistory(), routes: routes, }) export default router ================================================ FILE: packages/demo/src/shims-tsx.d.ts ================================================ import Vue, { VNode } from 'vue' declare global { namespace JSX { // tslint:disable no-empty-interface interface Element extends VNode {} // tslint:disable no-empty-interface interface ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any } } } ================================================ FILE: packages/demo/src/shims-vue.d.ts ================================================ declare module '*.vue' { import Vue from 'vue' export default Vue } ================================================ FILE: packages/demo/src/views/Home.vue ================================================ ================================================ FILE: packages/demo/src/views/InArticle.vue ================================================ ================================================ FILE: packages/demo/src/views/InFeed.vue ================================================ ================================================ FILE: packages/demo/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "module": "ESNext", "declaration": true, "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "noImplicitAny": false, "strictNullChecks": false, "experimentalDecorators": true, "allowJs": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "node" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] } ================================================ FILE: packages/demo/vue.config.js ================================================ module.exports = { publicPath: '/vue-google-adsense', pwa: { themeColor: '#000', }, } ================================================ FILE: packages/lib/README.md ================================================ # 💰 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) ![next-verion](https://img.shields.io/npm/v/vue-google-adsense/next) ![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 ## 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](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2) ## 🎉 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-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install : ```javascript npm install vue-scriptx vue-google-adsense@next --save ``` ### Use in `main.js` ```javascript 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 ```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' 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 : ```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 ScriptX from 'vue-scriptx' app.use(ScriptX) import Ads from 'vue-google-adsense' app.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 run bs # 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 ================================================ FILE: packages/lib/bili.config.ts ================================================ import { Config } from 'bili' const config: Config = { input: [ 'src/VueGoogleAdsense.ts', 'src/ads/Adsense.ts', 'src/ads/AutoAdsense.ts', 'src/ads/InArticleAdsense.ts', 'src/ads/InFeedAdsense.ts', ], plugins: { vue: true, }, } export default config ================================================ FILE: packages/lib/package.json ================================================ { "name": "vue-google-adsense", "description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support", "version": "2.0.1", "license": "MIT", "author": "Irfan Maulana (https://github.com/mazipan/)", "homepage": "https://mazipan.github.io/vue-google-adsense/", "source": "src/VueGoogleAdsense.ts", "main": "dist/VueGoogleAdsense.min.js", "module": "dist/VueGoogleAdsense.esm.min.js", "unpkg": "dist/VueGoogleAdsense.min.js", "typings": "dist/VueGoogleAdsense.d.ts", "scripts": { "build": "bili --format esm-min --format cjs-min" }, "files": [ "dist" ], "peerDependencies": { "vue": "^3.0.0", "vue-scriptx": "^0.2.5" }, "devDependencies": { "@vue/compiler-sfc": "^3.2.31", "@types/bluebird": "^3.5.36", "@types/node": "^14.18.12", "bili": "5.0.5", "rollup": "^2.67.2", "rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-vue": "^6.0.0", "ts-toolbelt": "^9.6.0", "tslib": "2.0.1", "vue": "^3.0.0" }, "keywords": [ "vuejs adsense", "vue2 adsense", "vue adsense", "vuejs google adsense", "vue2 google adsense", "vue google adsense" ], "repository": { "type": "git", "url": "https://github.com/mazipan/vue-google-adsense.git" }, "bugs": { "url": "https://github.com/mazipan/vue-google-adsense/issues" } } ================================================ FILE: packages/lib/src/@types/global.d.ts ================================================ declare global { interface Window { adsbygoogle: [] } } ================================================ FILE: packages/lib/src/VueGoogleAdsense.ts ================================================ import Adsense from './ads/Adsense' import InArticleAdsense from './ads/InArticleAdsense' import InFeedAdsense from './ads/InFeedAdsense' import AutoAdsense from './ads/AutoAdsense' export default { Adsense, InArticleAdsense, InFeedAdsense, AutoAdsense, } ================================================ FILE: packages/lib/src/ads/Adsense.ts ================================================ import AdsenseComponent from './AdsenseComponent.vue' const Adsense = { install: (app, options) => { app.component('Adsense', AdsenseComponent) }, } export default Adsense ================================================ FILE: packages/lib/src/ads/AdsenseComponent.vue ================================================ ================================================ FILE: packages/lib/src/ads/AutoAdsense.ts ================================================ import constant from '../utils/constant' const AutoAdsense = { install: (app, { adClient = '', isNewAdsCode = false }) => { if (!adClient) { return Error('AutoAdsense require "adClient" parameter') } const head = document.head const s = document.createElement('script') s.type = 'text/javascript' s.async = true if (isNewAdsCode) { s.crossOrigin = 'anonymous' s.src = `${constant.ADS_SCRIPT}?client=${adClient}` } else { s.src = constant.ADS_SCRIPT } s.onload = () => { // @ts-ignore ;(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: adClient, enable_page_level_ads: true, }) } head.appendChild(s) }, } export default AutoAdsense ================================================ FILE: packages/lib/src/ads/InArticleAdsense.ts ================================================ import InArticleAdsenseComponent from './InArticleAdsenseComponent.vue' const InArticleAdsense = { install: (app, options) => { app.component('InArticleAdsense', InArticleAdsenseComponent) }, } export default InArticleAdsense ================================================ FILE: packages/lib/src/ads/InArticleAdsenseComponent.vue ================================================ ================================================ FILE: packages/lib/src/ads/InFeedAdsense.ts ================================================ import InFeedAdsenseComponent from './InFeedAdsenseComponent.vue' const InFeedAdsense = { install: (app, options) => { app.component('InFeedAdsense', InFeedAdsenseComponent) }, } export default InFeedAdsense ================================================ FILE: packages/lib/src/ads/InFeedAdsenseComponent.vue ================================================ ================================================ FILE: packages/lib/src/shims-vue.d.ts ================================================ declare module '*.vue' { import Vue from 'vue' export default Vue } ================================================ FILE: packages/lib/src/utils/assign.ts ================================================ export default (target, varArgs) => { const to = Object(target) for (const nextKey in varArgs) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(varArgs, nextKey)) { to[nextKey] = varArgs[nextKey] } } return to } ================================================ FILE: packages/lib/src/utils/constant.ts ================================================ export default { ADS_SCRIPT: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', } ================================================ FILE: packages/lib/src/utils/props.ts ================================================ export default { rootClass: { type: String, default: 'adswrapper', }, insClass: { type: String, default: '', }, insStyle: { type: String, default: 'display:block;', }, dataAdClient: { type: String, default: '', }, dataAdSlot: { type: String, default: '', }, dataAdLayoutKey: { type: String, default: '-fg+5n+6t-e7+r', }, dataAdTest: { type: String, default: '', }, dataAdFormat: { type: String, default: 'auto', }, isNonPersonalizedAds: { type: String, default: 'no', }, dataFullWidthResponsive: { type: String, default: 'no', }, dataAdRegion: { type: String, default: '', }, // Read: https://support.google.com/adsense/answer/10627874 // Issue: https://github.com/mazipan/vue-google-adsense/issues/164 isNewAdsCode: { type: String, default: 'no', }, } ================================================ FILE: packages/lib/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "module": "ESNext", "declaration": true, "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "noImplicitAny": false, "strictNullChecks": false, "experimentalDecorators": true, "allowJs": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": ["node"], "paths": { "@/*": ["src/*"] }, "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ================================================ FILE: pnpm-workspace.yaml ================================================ packages: - 'packages/**' ================================================ FILE: turbo.json ================================================ { "$schema": "https://turborepo.org/schema.json", "baseBranch": "origin/master", "pipeline": { "build": { "dependsOn": ["^build"] }, "dev": { "cache": false } } }