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>

我发现这些脚本标记无法进入用户界面和this seems to be a purposeful decision。

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

是否有人对在Angular 2中使用Google的Adsense广告有任何经验？有没有不同的，正确的方法来做到这一点？

Answer 1

这是我提出并开始工作的地方。我承认它可能会延长“不要修改我们的代码”＃34; 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>标记被剪切并粘贴adsense给我的完全相同的标记。

我使用了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 ==＆gt;

    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>

Answer 4

基于上述解决方案，我创建了一个易于实现的简单解决方案。该解决方案可与Angular Universal SSR（服务器端渲染）一起使用

在index.html中添加Adsense提供的脚本

  <script data-ad-client="ca-pub-xxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

在component.ts文件中，

ngAfterViewInit() {
 try {
   (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
   
   // If you have two ad on the page, then add this again.
   //(window['adsbygoogle'] = window['adsbygoogle'] || []).push({});


 } catch (e) {}
}

在.html文件中，每当需要显示广告时，放置广告代码。

        <div  class="">
         <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-xxxxxxxxx"
            data-ad-slot="zzzzzzzz"
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>
        </div>

更新：如果广告没有显示，请在component.ts文件中设置超时

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

注意：在注册的域或子域上测试您的代码。在本地主机上，广告将不会展示。

Angular 2组件中的Google AdSense广告？

4 个答案: