如何在桌面平台的 ionic4 项目中显示 google 广告？

Question

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

Answer 1

使用 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>

就是这样。编写此代码后，您将看到广告。顺便说一句，要查看广告，您需要提供 data-ad-client 活跃的 google 广告感知帐户的 ID。您需要 disable your ad-blocker 才能看到广告。如果您看到 console.log 表示您的广告即将投放。

{loaded: true, push: ƒ}

我设置了 style=" display: none;" 这样你就可以看到广告了。如果您看到广告，则表示 Ad-Sense 正在发挥作用。现在您可以添加您的逻辑以在您想要的位置展示广告。

Answer 2

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

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

  <!-- 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>
        );
    }
}

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

如何在桌面平台的 ionic4 项目中显示 google 广告？

How to show google ads in ionic4 project for desktop platform?

ionic-framework

ionic4