为了账号安全,请及时绑定邮箱和手机立即绑定

在Angular网站部署Google广告

标签:
Html5 AngularJS

在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>

注意

如果是定义的公共模块,需要在模块里面申明

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消