Angular 2组件中的Google AdSense广告？ [英] Google AdSense ads in Angular 2 components?

问题描述

我正在尝试在我的应用程序的 AdComponent 中加载一些自适应广告。该组件非常简单：

I'm trying to load some Responsive ads in an AdComponent in my app. The component is dead simple:

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>

我发现这些脚本标记未进入用户界面，并且这似乎是一个有目的的决定。

I'm finding that these script tags don't make it into the UI and this seems to be a purposeful decision.

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

I might be able to move around some of the code such as the js reference into the head of my index.html and the window.adsbygoogle part into the component constructor but I'm not sure if these kinds of modifications are allowed or if there's a better alternative to get these ads to work in Angular 2.

有人对Google Adsense广告有任何经验吗？在Angular 2中工作？有其他合适的方法吗？

Does anybody have any experience with Google's Adsense ads working in Angular 2? Is there a different, proper way to do this?

推荐答案

这就是我想出并正在努力的事情。我承认这可能会扩展adsense的请勿修改我们的代码规则，但我正在竭尽所能，使代码的核心做应做的事情：

Here's what I've come up with and have working. I admit it may be stretching the "don't modify our code" rule of adsense, but I am doing my best to keep the heart of the code doing the same thing it's supposed to be doing:

// 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卡中包含广告，因此这是视图中的两个外部div 。剪切并剪切< ins> 标签，并粘贴adsense给我的标签。

The design of my website has ads in Material Design Lite cards so that's the 2 outer divs in the view. The <ins> tag is cut and paste exactly the same tag adsense gave me.

我使用的 AfterViewInit ，因为adsense似乎监视 adsbygoogle 数组，以了解何时扫描DOM中的新广告。在DOM具有< ins> 标记之前，您不希望修改此数组。

I used AfterViewInit because it seems that adsense watches the array adsbygoogle to know when to scan for a new ad in the DOM. You don't want to modify this array until the DOM has the <ins> tag.

我包装了在try / catch中显示该行，因为使用广告拦截器进行的测试表明，启用了拦截器后，该组件会抛出错误。在传统页面中，错误会发生而没有副作用。在Angular 2页面中，它停止了更改检测。

I wrapped the line in a try/catch because testing with an ad blocker showed that the component would throw an error when the blocker was turned on. In traditional pages the error would happen without side effects. In an Angular 2 page it stops the change detection.

我竭尽全力保持adsense提供的代码应该执行的工作以及如何执行的精神打算表现。我的目标是将他们过时的要求引入功能性的Angular 2应用程序中。目前在所有浏览器的Angular 2 RC4中都可以正常工作。

I have done my best to keep with the spirit of what the adsense provided code is supposed to do and how it is intended to behave. My goal is to bring their out-of-date requirements into a functional Angular 2 application. This currently works just fine in Angular 2's RC4 across all browsers.

这里希望他们不会在TOS中断时看到它。

Here's hoping they don't see it as TOS break...

要使Typescript同意所有这些，您需要在.d.ts文件中添加几行：

To get Typescript to agree with all this you'll need to add a few lines to a .d.ts file:

declare interface Window {
  adsbygoogle: any[];
}

declare var adsbygoogle: any[];

这些将使Typescript接受（adsbygoogle = window.adsbygoogle || [ ]）。push（{}）; 行。

These will make Typescript accept the (adsbygoogle = window.adsbygoogle || []).push({}); line in the ad component.

这篇关于Angular 2组件中的Google AdSense广告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！