原文地址:http://www.bowen-tech.top/art…
在Angular开发的网站部署Google广告
Google广告代码是包含script代码的,如果直接复制Google广告到Angular的html页面上,编译时是会去除掉script标签代码,具体可看这个GitHub文章:传送门
新建component
- component的template写上google广告的代码,不包含script标签的代码,如下:
template: `<div>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>`
- init方法初始化window.adsbygoogle
ngAfterViewInit() {
try{
(window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
}catch(e){
console.error("error");
}
- 完整代码
import { Component, AfterViewInit} from '@angular/core';
// <!-- tools网站纪念日计算横幅广告 -->
@Component({
selector: 'app-commemoration-ad',
template: `<div>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>`
})
export class CommemorationAdComponent implements AfterViewInit {
constructor() { }
ngAfterViewInit() {
try{
(window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
}catch(e){
console.error("error");
}
}
}
html引入模块
<!--在您希望展示广告的html中添加此内容-->
<app-commemoration-ad></app-commemoration-ad>
index.html引入js文件
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
注意
如果是定义的公共模块,需要在模块里面申明