Angular 2组件中的Google AdSense广告？

Question

我正在尝试AdComponent在我的应用中加载一些自适应广告.该组件很简单:

import { Component } from '@angular/core';
import { FORM_DIRECTIVES, CORE_DIRECTIVES } from '@angular/common';

@Component({
  selector: 'ad',
  templateUrl: 'app/views/ad.html',
  directives: [ FORM_DIRECTIVES, CORE_DIRECTIVES ]
})
export class AdComponent {}

ad.html:

<div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">
  <div class="mdl-card__supporting-text">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-0123456789"
        data-ad-slot="0123456789"
        data-ad-format="rectangle, horizontal"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</div>

我发现这些脚本标签没有进入UI,这似乎是一个有目的的决定.

我可以将一些代码(例如js引用)移动到我的index.html的头部,将window.adsbygoogle部分转移到组件构造函数中,但我不确定是否允许这些修改或者是否有更好的替代方法让这些广告在Angular 2中运行.

有没有人对使用Angular 2的谷歌Adsense广告有任何经验？有没有不同的,正确的方法来做到这一点？

Answer 1

这就是我提出并开始工作的原因.我承认它可能会延伸"不要修改我们的代码"adsense规则,但我正在尽最大努力保持代码的核心做它应该做的同样的事情:

// ad component
import { Component, AfterViewInit } from '@angular/core';
import { FORM_DIRECTIVES, CORE_DIRECTIVES } from '@angular/common';

@Component({
  selector: 'ad',
  templateUrl: 'app/views/ad.html',
  directives: [ FORM_DIRECTIVES, CORE_DIRECTIVES ]
})
export class AdComponent implements AfterViewInit {

  ngAfterViewInit() {
    try {
      (adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {}
  }
}

// ad.html
<div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">
  <div class="mdl-card__supporting-text">
    <ins class="adsbygoogle" style="display:inline-block;width:330px;height:120px" data-ad-client="my_client_number" data-ad-slot="my_ad_slot_number"></ins>
  </div>
</div>

我的网站设计在Material Design Lite卡中有广告,因此视图中有2个外部div.该<ins>标签被剪切和粘贴一模一样的标签站长给我.

我AfterViewInit之所以使用,是因为看起来adsense会观察数组adsbygoogle以了解何时在DOM中扫描新广告.在DOM具有<ins>标记之前,您不希望修改此数组.

我在try/catch中包装了该行,因为使用广告拦截器进行测试表明,当阻止程序打开时,该组件会抛出错误.在传统页面中,错误会发生而没有副作用.在Angular 2页面中,它会停止更改检测.

我已尽力遵守adsense提供的代码应该做的事情以及它的行为方式.我的目标是将他们过时的需求带入功能强大的Angular 2应用程序.目前在所有浏览器中Angular 2的RC4都可以正常使用.

这里希望他们不认为这是TOS突破......

要让Typescript同意所有这些,你需要在.d.ts文件中添加几行:

declare interface Window {
  adsbygoogle: any[];
}

declare var adsbygoogle: any[];

这些将使得Typescript接受(adsbygoogle = window.adsbygoogle || []).push({});广告组件中的行.

Answer 2

这对我有用:

TopBannerComponent.ts ==>

    import {Component,OnInit,AfterViewInit} from '@angular/core'

    @Component({
      moduleId: module.id,
      selector: 'google-adsense',
      template: ` <div>
            <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-0443011292983797"
                data-ad-slot="8184819393"
                data-ad-format="auto"></ins>
             </div>   
                <br>            
      `,

    })

    export class TopBannerComponent implements AfterViewInit {

      constructor() {    
      } 

      ngAfterViewInit() {
         setTimeout(()=>{
          try{
            (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
          }catch(e){
            console.error("error");
          }
        },2000);
     }     
    }

在您希望展示广告的html中添加此内容

<google-adsense></google-adsense>

在主html文件中添加google adsense脚本

 <script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>

Answer 3

有一个模块非常适合我：ng2-adsense。

如果您选择使用它，您的 HTML 代码将如下所示：

<ng2-adsense
  [adClient]="'ca-pub-7640562161899788'"
  [adSlot]="7259870550">
</ng2-adsense>

安装模块后，您需要导入它并将其添加到您的 NgModule 中：

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AdsenseModule, // <--- Add to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并在您的index.html中添加这个标准的adsense代码：

<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>