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

<!-- Describe the issue that you're seeing. -->

## Expected Behaviour

<!-- What should've happened? -->

## Additional Information

<!-- (Optional) Any additional info that you think might come in handy for debugging. -->


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature Request
about: Propose feature additions to the project.
title: ''
labels: enhancement
assignees: mazipan

---

## Description

<!-- Describe the proposed feature and how the project could benefit from it. -->

## Implementation Model

<!-- (Optional) If available, outline the possible steps to take (e.g. lines of code to change, architectural details, etc.) to implement the feature. -->

## Tasks

<!-- (Optional) List any available tasks for this issue with checkbox lists. -->

- [ ] ...
- [ ] ...
- [ ] ...


================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
Closes <!-- mention the issue that you're trying to close with this PR -->

## Description

<!-- Describe your implementation plan and approach -->

## Current Tasks

<!-- (Optional) List the tasks that you're planning to do in this PR.
This is to indicate how much you have been progressing before this PR is ready for review -->

- [ ] (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
<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>
```

VueInArticleAdsense Template :

```html
<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InArticleAdsense>
```

VueInFeedAdsense Template :

```html
<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>
```
### 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<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> 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 <mazipanneh@gmail.com>",
  "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
<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>
```

VueInArticleAdsense Template :

```html
<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InArticleAdsense>
```

VueInFeedAdsense Template :

```html
<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>
```
### 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<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> 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
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>💰 Vue Google Adsense | Irfan Maulana</title>

  <meta name="language" content="en-EN" />
  <meta name="author" content="Irfan Maulana" />
  <link rel="author" href="https://plus.google.com/u/0/+irfanmaulana-mazipan/posts" />
  <link rel="publisher" href="https://plus.google.com/u/0/+irfanmaulana-mazipan" />
  <meta name="keywords" content="vue adsense, vue google adsense, vuejs adsense, vuejs google adsense" />
  <meta name="description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
  <meta property="og:title" content="💰 Vue Google Adsense | Irfan Maulana" />
  <meta property="og:description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
  <meta property="og:url" content="https://mazipan.github.io/vue-google-adsense/" />
  <meta property="og:site_name" content="💰 Vue Google Adsense" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@maz_ipan" />
  <meta name="twitter:creator" content="@maz_ipan" />
  <meta name="twitter:title" content="💰 Vue Google Adsense | Irfan Maulana" />
  <meta name="twitter:description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
  <meta name="twitter:domain" content="https://mazipan.github.io/vue-google-adsense/" />
  <link rel="home" href="https://mazipan.github.io/vue-google-adsense/">

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-25065548-2"></script>
  <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-25065548-2');</script>

</head>

<body>
  <noscript>
    <strong>We're sorry but vue-currency-filter doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

================================================
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
================================================
<template>
  <router-view />
</template>

<script>
export default {
  name: 'App',
}
</script>


================================================
FILE: packages/demo/src/components/Box.vue
================================================
<template>
  <b-card :title="title">
    <b-card-text>
      {{ description }}
    </b-card-text>
    <a :href="link" rel="noreferrer noopenner" target="_blank"
      ><b-button class="mb-2 mr-2" variant="outline-success"> Learn More </b-button></a
    >
    <router-link :to="demo"><b-button class="mb-2" variant="success"> See the demo </b-button></router-link>
  </b-card>
</template>

<script lang="js">
export default {
  name: 'Home',
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    link: {
      type: String,
      default: '/vue-google-adsense/'
    },
    demo: {
      type: String,
      default: '/'
    },
  }
}
</script>


================================================
FILE: packages/demo/src/components/Header.vue
================================================
<template>
  <div class="hero">
    <b-row mb="4" textAlign="center" align="center" justify="center" direction="column">
      <h1>Vue Google Adsense</h1>
      <h3>Vue.js Google Adsense Component with InFeed and InArticle Ads support</h3>
    </b-row>

    <b-row mb="2" align="center" justify="center" direction="column">
      <a href="https://github.com/mazipan/vue-google-adsense">
        <b-button variant="success">Github Repo</b-button>
      </a>
    </b-row>

    <b-row align="center" justify="center">
      <a href="https://www.npmjs.com/package/vue-google-adsense" target="_blank" rel="noopener noreferer" style="margin-right: 0.5rem">
        <img alt="NPM Version" src="https://img.shields.io/npm/v/vue-google-adsense.svg" />
      </a>
      <a href="https://github.com/mazipan/vue-google-adsense" target="_blank" rel="noopener noreferer">
        <img alt="GitHub Stars" src="https://img.shields.io/github/stars/mazipan/vue-google-adsense.svg?style=social" />
      </a>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'Header',
}
</script>


================================================
FILE: packages/demo/src/components/ImageCard.vue
================================================
<template>
  <c-box maxW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
    <c-box p="6">
      <c-box d="flex" align-items="baseline">
        <c-badge rounded="full" px="2" variant-color="green"> New </c-badge>
        <c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase" ml="2">
          {{ property.beds }} beds &bull; {{ property.baths }} baths
        </c-box>
      </c-box>
      <c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
        {{ property.title }}
      </c-box>
      <c-box>
        {{ property.formattedPrice }}
        <c-box as="span" color="gray.600" fontSize="sm"> / wk </c-box>
      </c-box>
      <c-box d="flex" mt="2" align-items="center">
        <c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i" :color="i < property.rating ? 'green.500' : 'gray.300'" />
        <c-box as="span" ml="2" color="gray.600" font-size="sm"> {{ property.reviewCount }} reviews </c-box>
      </c-box>
    </c-box>
  </c-box>
</template>

<script>
export default {
  name: 'ImageCard',
  data() {
    return {
      property: {
        imageUrl: 'https://bit.ly/2Z4KKcF',
        imageAlt: 'Rear view of modern home with pool',
        beds: 3,
        baths: 2,
        title: 'Modern home in city center in the heart of historic Los Angeles',
        formattedPrice: '$1,900.00',
        reviewCount: 34,
        rating: 4,
      },
    }
  },
}
</script>


================================================
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
================================================
<template>
  <div class="home VueCurrencyFilter">
    <section class="container hero">
      <HeaderComponent />
    </section>

    <section class="container ads">
      <b-row align="center" justify="center" direction="column">
        <b-card w="100%" border-width="1px" rounded="lg" overflow="hidden">
          <Adsense
            style="width: 100%; min-width: 250px"
            ins-style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-5442972248172818"
            data-ad-slot="7319719723"
          >
          </Adsense>
        </b-card>
      </b-row>
    </section>

    <section class="container">
      <b-card :spacing="5">
        <Box
          title="Default Adsense"
          description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
          link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
          demo="/"
        />

        <Box
          title="In Article Adsense"
          description="Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience."
          link="https://support.google.com/adsense/answer/7320112?hl=en_GB"
          demo="/in-article/"
        />

        <Box
          title="In Feed Adsense"
          description="Ads that flow naturally inside a list of articles or products on your site, offering a great user experience."
          link="https://support.google.com/adsense/answer/7171765?hl=en_GB"
          demo="/in-feed/"
        />
      </b-card>
    </section>

    <section class="container ads">
      <b-row align="center" justify="center" direction="column">
        <b-card w="100%" border-width="1px" rounded="lg" overflow="hidden">
          <InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
        </b-card>
      </b-row>
    </section>

    <footer class="footer">
      <b-row m="2" align="center" justify="center">
        <p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
      </b-row>
    </footer>
  </div>
</template>

<script lang="js">
import HeaderComponent from '../components/Header'
import Box from '../components/Box'

export default {
  name: 'Home',
  components: {
    HeaderComponent,
    Box
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
pre:not(:last-of-type) {
  margin-bottom: 2rem;
}

.container {
  margin-top: 2em;

  padding-left: 1rem;
  padding-right: 1rem;

  @media (min-width: 760px) {
    padding-left: 14rem;
    padding-right: 14rem;
  }
}
</style>


================================================
FILE: packages/demo/src/views/InArticle.vue
================================================
<template>
  <div class="home VueCurrencyFilter">
    <section class="container hero">
      <b-row mb="4" align="center" justify="center" direction="column">
        <h1 as="h1" fontSize="5xl">In Article Adsense</h1>
      </b-row>
    </section>

    <section class="container">
      <p :mb="2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis in nulla porttitor ultrices. Sed dictum ante sit amet
        libero aliquam, vitae bibendum nisi blandit. Etiam id euismod est. Sed varius tristique libero quis porta. Nam ex ligula, semper eu
        nisl at, interdum viverra nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin
        vehicula commodo mauris. Sed eu blandit sem, hendrerit placerat dui. Maecenas non ante ante. Sed et mi ut quam porttitor egestas id
        in sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eros nulla,
        pulvinar id ante nec, vulputate bibendum lectus.
      </p>
      <p :mb="2">
        Suspendisse dapibus sodales lorem sed pharetra. Nam pellentesque posuere lorem, sed vulputate mi varius dapibus. Suspendisse
        potenti. Nulla non interdum libero. Duis ornare risus non leo posuere maximus. Fusce id urna in sapien tincidunt finibus nec eget
        diam. Vivamus vitae efficitur lacus. Curabitur vel ex urna. In scelerisque lorem tellus, nec tempus magna egestas vel. In eu erat
        vestibulum, euismod est eget, elementum felis.
      </p>
      <p :mb="2">
        Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
        consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
        sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
        ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
      </p>
      <p :mb="2">
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
        Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
        mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
        est.
      </p>
      <p :mb="2">
        Vestibulum congue convallis nisi nec vulputate. Pellentesque posuere suscipit quam, non vulputate augue porta ac. Ut quam justo,
        iaculis sed ipsum imperdiet, eleifend fermentum tortor. Nam facilisis imperdiet sollicitudin. Proin ultrices nisl vel odio congue,
        quis ornare turpis blandit. Proin felis odio, luctus sit amet urna id, luctus venenatis ligula. Maecenas tincidunt pulvinar diam
        vitae suscipit. Suspendisse feugiat mattis elit a interdum. Fusce fermentum fringilla odio non finibus. Integer pretium rutrum
        ligula, ut fringilla mauris facilisis dapibus. Integer mattis leo vel tincidunt porta.
      </p>

      <div class="ads">
        <b-row align="center" justify="center" direction="column">
          <c-box w="100%" overflow="hidden">
            <InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
          </c-box>
        </b-row>
      </div>

      <p :mb="2">
        Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
        consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
        sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
        ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
      </p>
      <p :mb="2">
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
        Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
        mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
        est.
      </p>

      <b-row>
        <p :mb="2" :mr="5">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis in nulla porttitor ultrices. Sed dictum ante sit amet
          libero aliquam, vitae bibendum nisi blandit. Etiam id euismod est. Sed varius tristique libero quis porta. Nam ex ligula, semper
          eu nisl at, interdum viverra nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin
          vehicula commodo mauris. Sed eu blandit sem, hendrerit placerat dui. Maecenas non ante ante. Sed et mi ut quam porttitor egestas
          id in sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eros nulla,
          pulvinar id ante nec, vulputate bibendum lectus.
        </p>

        <b-row align="center" justify="center" direction="column">
          <c-box minW="sm" overflow="hidden">
            <InArticleAdsense style="min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="2669016517" />
          </c-box>
        </b-row>

        <p :mb="2" :ml="5">
          Suspendisse dapibus sodales lorem sed pharetra. Nam pellentesque posuere lorem, sed vulputate mi varius dapibus. Suspendisse
          potenti. Nulla non interdum libero. Duis ornare risus non leo posuere maximus. Fusce id urna in sapien tincidunt finibus nec eget
          diam. Vivamus vitae efficitur lacus. Curabitur vel ex urna. In scelerisque lorem tellus, nec tempus magna egestas vel. In eu erat
          vestibulum, euismod est eget, elementum felis.
        </p>
      </b-row>

      <p :mb="2">
        Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
        consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
        sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
        ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
      </p>
      <p :mb="2">
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
        Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
        mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
        est.
      </p>
      <p :mb="2">
        Vestibulum congue convallis nisi nec vulputate. Pellentesque posuere suscipit quam, non vulputate augue porta ac. Ut quam justo,
        iaculis sed ipsum imperdiet, eleifend fermentum tortor. Nam facilisis imperdiet sollicitudin. Proin ultrices nisl vel odio congue,
        quis ornare turpis blandit. Proin felis odio, luctus sit amet urna id, luctus venenatis ligula. Maecenas tincidunt pulvinar diam
        vitae suscipit. Suspendisse feugiat mattis elit a interdum. Fusce fermentum fringilla odio non finibus. Integer pretium rutrum
        ligula, ut fringilla mauris facilisis dapibus. Integer mattis leo vel tincidunt porta.
      </p>

      <div class="ads">
        <b-row align="center" justify="center" direction="column">
          <c-box w="100%" overflow="hidden">
            <InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
          </c-box>
        </b-row>
      </div>
    </section>

    <section class="container">
      <c-stack :spacing="5" is-inline>
        <Box
          title="Default Adsense"
          description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
          link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
          demo="/"
        />

        <Box
          title="In Feed Adsense"
          description="Ads that flow naturally inside a list of articles or products on your site, offering a great user experience."
          link="https://support.google.com/adsense/answer/7171765?hl=en_GB"
          demo="/in-feed/"
        />
      </c-stack>
    </section>

    <section class="container ads">
      <b-row align="center" justify="center" direction="column">
        <c-box w="100%" border-width="1px" rounded="lg" overflow="hidden">
          <Adsense
            style="width: 100%; min-width: 250px"
            ins-style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-5442972248172818"
            data-ad-slot="7319719723"
          >
          </Adsense>
        </c-box>
      </b-row>
    </section>

    <footer class="footer">
      <b-row m="2" align="center" justify="center">
        <p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
      </b-row>
    </footer>
  </div>
</template>

<script lang="js">
import Box from '../components/Box'

export default {
  name: 'InArticle',
  components: {
    Box
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
pre:not(:last-of-type) {
  margin-bottom: 2rem;
}

.container {
  margin-top: 2em;

  padding-left: 1rem;
  padding-right: 1rem;

  @media (min-width: 760px) {
    padding-left: 14rem;
    padding-right: 14rem;
  }
}
</style>


================================================
FILE: packages/demo/src/views/InFeed.vue
================================================
<template>
  <div class="home VueCurrencyFilter">
    <section class="container hero">
      <b-row mb="4" align="center" justify="center" direction="column">
        <h1 as="h1" fontSize="5xl">In Feed Adsense</h1>
      </b-row>
    </section>

    <section class="container ads">
      <c-stack :spacing="5" is-inline :shouldWrapChildren="true" justify="center" wrap="wrap">
        <ImageCard />
        <ImageCard />
        <ImageCard />

        <c-box minW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
          <InFeedAdsense
            style="height: 380px; min-width: 250px; margin: 1em 0"
            root-class="wrapper VueInFeedAdsense"
            ins-class="ins-custom"
            data-ad-layout-key="-6h+ed+1l-6o+ab"
            data-ad-client="ca-pub-5442972248172818"
            data-ad-slot="5701222588s"
          />
        </c-box>
        <ImageCard />
        <ImageCard />

        <ImageCard />
        <ImageCard />
        <ImageCard />

        <ImageCard />
        <ImageCard />
        <c-box minW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
          <InFeedAdsense
            style="height: 380px; min-width: 250px; margin: 1em 0"
            root-class="wrapper VueInFeedAdsense"
            ins-class="ins-custom"
            data-ad-layout-key="-6h+ed+1l-6o+ab"
            data-ad-client="ca-pub-5442972248172818"
            data-ad-slot="5701222588s"
          />
        </c-box>
      </c-stack>
    </section>

    <section class="container">
      <c-stack :spacing="5" is-inline>
        <Box
          title="Default Adsense"
          description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
          link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
          demo="/"
        />

        <Box
          title="In Article Adsense"
          description="Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience."
          link="https://support.google.com/adsense/answer/7320112?hl=en_GB"
          demo="/in-article/"
        />
      </c-stack>
    </section>

    <section class="container ads">
      <b-row align="center" justify="center" direction="column">
        <c-box w="100%" border-width="1px" rounded="lg" overflow="hidden">
          <Adsense
            style="width: 100%; min-width: 250px"
            ins-style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-5442972248172818"
            data-ad-slot="7319719723"
          >
          </Adsense>
        </c-box>
      </b-row>
    </section>

    <footer class="footer">
      <b-row m="2" align="center" justify="center">
        <p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
      </b-row>
    </footer>
  </div>
</template>

<script lang="js">
import Box from '../components/Box'
import ImageCard from '../components/ImageCard'

export default {
  name: 'InFeed',
  components: {
    Box,
    ImageCard
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
pre:not(:last-of-type) {
  margin-bottom: 2rem;
}

.container {
  margin-top: 2em;

  padding-left: 1rem;
  padding-right: 1rem;

  @media (min-width: 760px) {
    padding-left: 14rem;
    padding-right: 14rem;
  }
}
</style>


================================================
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
<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>
```

VueInArticleAdsense Template :

```html
<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InArticleAdsense>
```

VueInFeedAdsense Template :

```html
<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>
```
### 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<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> 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
================================================
<template>
  <div :class="rootClass">
    <template v-if="isNewAdsCode === 'yes'">
      <scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
    </template>
    <template v-if="isNewAdsCode === 'no'">
      <scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
    </template>

    <ins
      :class="insClass"
      class="adsbygoogle"
      :style="insStyle"
      :data-ad-client="dataAdClient"
      :data-ad-slot="dataAdSlot"
      :data-ad-test="dataAdTest"
      :data-ad-format="dataAdFormat"
      :data-ad-region="dataAdRegion"
      :data-full-width-responsive="dataFullWidthResponsive === 'yes'"
    />
    <template v-if="isNonPersonalizedAds === 'yes'">
      <scriptx type="text/javascript">
        (adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
      </scriptx>
    </template>
    <template v-if="isNonPersonalizedAds === 'no'">
      <scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
    </template>
  </div>
</template>

<script>
import constant from '../utils/constant'
import props from '../utils/props'

export default {
  name: 'Adsense',
  props,
  data() {
    return {
      ADS_SCRIPT: constant.ADS_SCRIPT,
    }
  },
}
</script>


================================================
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
================================================
<template>
  <div :class="rootClass">
    <template v-if="isNewAdsCode === 'yes'">
      <scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
    </template>
    <template v-if="isNewAdsCode === 'no'">
      <scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
    </template>

    <ins
      :class="insClass"
      class="adsbygoogle"
      :style="insStyle"
      data-ad-layout="in-article"
      :data-ad-format="dataAdFormat"
      :data-ad-client="dataAdClient"
      :data-ad-slot="dataAdSlot"
      :data-ad-test="dataAdTest"
      :data-ad-region="dataAdRegion"
      :data-full-width-responsive="dataFullWidthResponsive === 'yes'"
    />
    <template v-if="isNonPersonalizedAds === 'yes'">
      <scriptx type="text/javascript">
        (adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
      </scriptx>
    </template>
    <template v-if="isNonPersonalizedAds === 'no'">
      <scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
    </template>
  </div>
</template>

<script>
import constant from '../utils/constant'
import props from '../utils/props'
import assign from '../utils/assign'

export default {
  name: 'InArticleAdsense',
  props: assign(props, {
    dataAdFormat: {
      type: String,
      default: 'fluid',
    },
  }),
  data() {
    return {
      ADS_SCRIPT: constant.ADS_SCRIPT,
    }
  },
}
</script>


================================================
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
================================================
<template>
  <div :class="rootClass">
    <template v-if="isNewAdsCode === 'yes'">
      <scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
    </template>
    <template v-if="isNewAdsCode === 'no'">
      <scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
    </template>

    <ins
      :class="insClass"
      class="adsbygoogle"
      :style="insStyle"
      :data-ad-format="dataAdFormat"
      :data-ad-layout-key="dataAdLayoutKey"
      :data-ad-client="dataAdClient"
      :data-ad-slot="dataAdSlot"
      :data-ad-test="dataAdTest"
      :data-ad-region="dataAdRegion"
      :data-full-width-responsive="dataFullWidthResponsive === 'yes'"
    />
    <template v-if="isNonPersonalizedAds === 'yes'">
      <scriptx type="text/javascript">
        (adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
      </scriptx>
    </template>
    <template v-if="isNonPersonalizedAds === 'no'">
      <scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
    </template>
  </div>
</template>

<script>
import constant from '../utils/constant'
import props from '../utils/props'
import assign from '../utils/assign'

export default {
  name: 'InFeedAdsense',
  props: assign(props, {
    dataAdFormat: {
      type: String,
      default: 'fluid',
    },
  }),
  data() {
    return {
      ADS_SCRIPT: constant.ADS_SCRIPT,
    }
  },
}
</script>


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