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 和 this seems to be a purposeful decision。

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

有人对在 Angular 2 中使用 Google 的 Adsense 广告有任何经验吗？有没有其他正确的方法可以做到这一点？

Answer 1

这对我有用：

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-XXXXXXXXXXXXXX"
                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 2

基于上述解决方案，我创建了一个易于实施的简单解决方案。 此解决方案适用于 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);
    }

注意： 在注册域或子域上测试您的代码。在 localhost 上，广告不会显示。

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

这是我想出的并正在工作的内容。我承认这可能会延伸 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({}); 行。