angular项目接入google adsense

zccen

已于 2023-08-01 10:47:58 修改

阅读量246

点赞数

文章标签：前端 angular

于 2023-05-28 21:54:54 首次发布

本文链接：https://blog.csdn.net/scdnzzb/article/details/130917999

版权

angular接入google adsense有两种方法：

一，与普通接入类似，暂定名为原生接入

1，在index.html <head>标签加入自动广告代码（注意：广告码换成自己的）:

2，在希要插入广告的组件中.ts文件加入：

((<any>window)['adsbygoogle'] = (<any>window)['adsbygoogle'] || []).push({

});

3，在组件的.html加入ins代码(即在adsense后台拷贝的广告点代码):

<ins class="adsbygoogle"

style="display:block;width:360px;height:110px" // 测试宽度有效，高度无效

data-ad-client="ca-pub-xxxxxx"

data-ad-slot="xxxxxx"

data-ad-format="auto"

data-full-width-responsive="true">

</ins>

二，使用插件 ng2-adsense

1，安装插件: npm install ng2-adsense，如果提示版本不对，安装对应合适版本: npm install ng2-adsense@xxx.xxx.xxx

2，在app.module.ts加入: import { AdsenseModule } from 'ng2-adsense';

imports: [

...,

AdsenseModule.forRoot({

adClient: 'ca-pub-xxxxxxxxxxxxxxx',

})]

3，在index.html <head>标签加入自动广告代码（注意：广告码换成自己的）:

4，在需要插入广告的组件的.html加入:

<div>

<ng-adsense

[adClient]="'ca-pub-xxxxxx'"

[adSlot]="xxxxxx"

[display]="'block'"

[width]="320"

[height]="108">

</ng-adsense>

</div>

ng-adsense参数：

adClient   string   account ca-pub-XXXXXXXXXXXXXXXX
adSlot   string/number   ad slot/number
adFormat   string   adsense ad format: auto,rectangle,vertical,horizontal,inline(可以组合，例: "rectangle,horizontal")
adRegion   string   older adsense code to make all ads on page the same
display   string   element display style
fullWidthResponsive   boolean   enable full width responsive ad
height   number   element height in px
width   number   element width in px
layout   string   used for in-feed ads
layoutKey   string   used for in-feed ads
pageLevelAds   boolean   enable page-level ads
adtest   string   sets up some sort of google test ad
className   string   add custom class names to the "ins" element