Ionic framework 如何在桌面平台的ionic4项目中显示谷歌广告？_Ionic Framework_Ionic4

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

ionic-framework

Ionic framework 如何在桌面平台的ionic4项目中显示谷歌广告？,ionic-framework,ionic4,Ionic Framework,Ionic4,由于我是离子框架的新手，我对离子框架知之甚少。在文档中，他们展示了如何在移动平台上显示广告。但是他们没有展示如何在桌面平台上显示广告的文档。它们展示了adMobfree和adMobPro在移动平台上的使用。有没有办法在爱奥尼亚项目的桌面平台上显示广告。有人，请告诉我一种在爱奥尼亚项目的桌面平台上显示广告的方法。使用ng2 adsensenpm软件包对我没有帮助。但我找到了解决这个问题的简单方法。首先，您需要像这样在head标记中添加脚本 <head> <scrip

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

使用

ng2 adsense

npm软件包对我没有帮助。但我找到了解决这个问题的简单方法。首先，您需要像这样在

head

标记中添加脚本

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

我已经设置了

style=“display:none；”“

，这样你就可以看到广告。如果你看到广告，那就意味着广告意识正在发挥作用。现在，您可以添加逻辑来显示您想要的广告。

在我的例子中，我只使用Web平台标准Web组件，没有Angular、Vue或React等框架。如果您寻求相同的解决方案，这可能会有所帮助。下面是一个适用于我的stencil.js组件。在我的例子中，现在，我只是对它进行了硬编码以呈现单个广告，但是你可以通过标签属性扩展这个想法，这样每个标签使用都可以更加定制，很像IBRAHIM KHALIL上面描述的ng2 adsense（我稍后会谈到这一点）

这需要在单页应用程序的index.html标题中包含针对Google Adsense的标准javascript include。例如：

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

从'@stencil/core'导入{Component，h}；
宣布全球{
界面窗口{adsbygoogle:any；}
}
@组成部分({
标签：“gls adsense广告”，
})
出口级GlsAdsenseAd{
谷歌广告：任何；
componentDidRender（）{
（this.adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
}
render（）{
返回(
);
}
}

您可以在my site（我的网站）上博客文章页面的右栏中看到这一点，这是一个使用Ionic 4和Stencil.js构建的静态网站：

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

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