Google AdSense 广告在 Angular 2 个组件中？

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.

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

Answer 1

这是我想出并正在工作的内容。我承认它可能延伸了 adsense 的 "don't modify our code" 规则，但我正在尽最大努力让代码的核心做它应该做的同样的事情：

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

有一个模块非常适合我：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 3

这对我有用：

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 4

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

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

Google AdSense 广告在 Angular 2 个组件中？

Google AdSense ads in Angular 2 components?

adsense

angular