如何在桌面平台的 ionic4 项目中显示谷歌广告？答案

【问题标题】：How to show google ads in ionic4 project for desktop platform?如何在桌面平台的 ionic4 项目中显示谷歌广告？
【发布时间】：2020-01-05 08:46:26
【问题描述】：

由于我是 Ionic 框架的新手，我对 ionic 知之甚少。在文档中，他们展示了如何在移动平台上展示广告。但他们没有展示如何在桌面平台上展示广告的文档。他们展示了 adMobfree 和 adMobPro 在移动平台上的使用。有没有办法在离子项目的桌面平台上展示广告。请有人告诉我一种在 ionic 项目中在桌面平台上展示广告的方法。

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

就我而言，我仅使用 Web 平台标准 Web 组件，没有使用 Angular、Vue 或 React 等框架。如果您寻求相同的解决方案，这可能会有所帮助。这是一个适合我的 stencil.js 组件。就我而言，现在，我只是将其硬编码以呈现单个广告，但您可以使用标签属性扩展这个想法，以便每次使用标签时都可以更加自定义，就像 IBRAHIM 上面描述的 ng2-adsense KHALIL（我打算稍后再谈）。

这要求您在单页应用程序的 index.html 头部还包含用于 Google Adsense 的标准 javascript。例如：

  <!-- Global site tag - Google Adsense -->
  <script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

然后，这里是模板组件，gls-adsense-ad.tsx...

import { Component, h } from '@stencil/core';

declare global {
    interface Window { adsbygoogle: any; }
}

@Component({
    tag: 'gls-adsense-ad',
})
export class GlsAdsenseAd {

    adsbygoogle:any;

    componentDidRender() {
        (this.adsbygoogle = window.adsbygoogle || []).push({});
    }

    render() {
        return (
            <div>
            <ins class="adsbygoogle"
                style={{ display: `block` }}
                data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
                data-ad-slot="XXXXXXXXXX"
                data-ad-format="auto"
                data-full-width-responsive="true"></ins>
            </div>
        );
    }
}

您可以在我的网站上的博客文章页面的右侧栏中看到这一点，这是一个使用 Ionic 4 和 Stencil.js 构建的静态网站：https://codyburleson.com

【讨论】：

【解决方案2】：

使用ng2-adsense npm 包对我没有帮助。但我找到了解决这个问题的简单方法。首先，您需要像这样在head标签中添加脚本。

<head>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>

之后，你需要在你的body标签中写下这段代码。

<body>
<div>
  <ins class="adsbygoogle"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" 
    data-ad-slot="XXXXXXXXXX" 
    data-ad-format="link"
    data-full-width-responsive="true" 
    data-full-width-responsive="true">
  </ins>
<!-- data-ad-slot=Your ad Unit number that you have created -->
</div>
<app-root style="display: none;"></app-root>
<script>
  window.onload = function () {
    (adsbygoogle = window.adsbygoogle || []).push({});
    console.log(adsbygoogle);
  }
  </script>
</body>

就是这样。编写此代码后，您将看到广告。顺便说一下，您需要提供有效的 google ad-sense 帐户的data-ad-client id 来查看广告。您需要disable your ad-blocker 才能看到广告。如果您看到像这样的console.log，则表示您的广告即将投放。

{loaded: true, push: ƒ}

我已设置style=" display: none;"，以便您可以看到广告。如果您看到的广告意味着广告感知正在发挥作用。现在您可以添加逻辑以在您想要的位置展示广告。

【讨论】：