具有InFeed Ads支持的Vue.js Google Adsense组件

vue-google-adsense (vue-google-adsense)

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

具有InFeed和InArticle Ads支持的Vue.js Google Adsense组件

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

使用模板vuejs-template-plugin用Vue-CLI生成的骨架

View demo 查看演示 Download Source 下载源

什么是Feed和文章广告？ (What is In Feed and In Article Ads?)

At least there is three (3) type ads in Google Adsense :

Google Adsense中至少有三(3)种类型的广告：

• Responsive Ads: A simple way to get ads on your page. Choose the size, placement and style you want to display.

  自适应广告 ：一种在页面上展示广告的简单方法。 选择要显示的大小，位置和样式。

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

  在文章广告中 ：可以无缝地插入页面各段之间的广告，以增强阅读体验。

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

  在Feed广告中 ：广告会自然地在您网站上的文章或产品列表中流动，从而提供出色的用户体验。

如何使用 (How to use)

安装 (Installation)

Need dependencies vue-script2, you need to install :

需要依赖vue-script2 ，您需要安装：

npm install vue-script2 vue-google-adsense --save

在main.js使用 (Use in main.js)

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

模板 (Template)

VueAdsense Template :

VueAdsense模板：

<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>

VueInArticleAdsense Template :

VueInArticleAdsense模板：

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

VueInFeedAdsense Template :

VueInFeedAdsense模板：

<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>

发展历程 (Development)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production demo with minification
npm run build

# build for plugin distribution file
npm run pack

# run build and pack
npm run dist

翻译自: https://vuejsexamples.com/vue-js-google-adsense-component-with-infeed-and-inarticle-ads-support/