如何将 Google Adsense 添加到 Svelte/Sapper 网络应用程序？

Posted 2023-03-07

【中文标题】如何将 Google Adsense 添加到 Svelte/Sapper 网络应用程序？

【英文标题】：How to add Google Adsense to a Svelte/Sapper web app?

【发布时间】：2021-11-04 12:32:00

【问题描述】：

我正在尝试在我的 Sapper 构建的网站中设置 AdSense，但没有成功。我已将代码添加到 template.html 文件并且它可以工作，但我想使用组件在特定页面上显示它。

目标是在资源页面的侧边栏上展示广告（见图）。它上面的小部件是一个由 index.svelte 页面加载的组件，所以我想对 Ad 做同样的事情。

resource page

目前，我有以下内容：

template.html 文件中的 AdSense 脚本，然后 在组件 OnMount 函数中，我从 template.html 文件中获取 Adsense 代码并将其放在 div 内的组件上，然后将其从 template.html 文件中删除。

模板.html

<footer>
    <!-- GoogleAdsence Script. -->
    <div id="gAdsense-code" style="display: none;">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-X0X0X0X0X0X0X" crossorigin="anonymous"></script>
        <!-- Resource page Ad -->
        <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-X0X0X0X0X0X0X"
            data-ad-slot="X0X0X0X0X0X0"
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push();
        </script>   
    </div>
</footer>

adswidget.svelte

<script>

    import  onMount  from 'svelte';

onMount(() => 

        window.addEventListener( 'load', () => 
             //get ads-widget div
            let adWidget = document.getElementById('ads-widget');
            let adCode = document.getElementById('gAdsense-code');
            let adHtml = adCode.innerHTML;

            adCode.remove();
            
            //append Adsence code from the head on resources index file
            adWidget.innerHTML = adHtml;
        );
);
</script>

<div id="ads-widget"><!-- Adsence code inserted onMount --></div>

这会将 Adsense 代码放置在正确的位置，但广告不会显示。 我在控制台上遇到的错误是：“adsbygoogle.push() 错误：availableWidth=0 没有插槽大小”（见图） console error

我还引用了这个 article 没有成功。

任何帮助将不胜感激:)

【参考方案1】：

在看到一个article 展示了如何在 React 中实现 Adsense 之后，我能够对其进行调整以在 Svelte 中工作。因此，发布答案以防对其他人有帮助：

加载脚本应该放在 template.html 文件中，在结束 body 标记之前

template.html

...     
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-X0X0X0X0X0X0X" crossorigin="anonymous"></script>
  </body>
</html>

将“adsbygoogle”代码放在组件的 OnMount() 函数中。但是，稍作修改。而不是(adsbygoogle = window.adsbygoogle ...) 你会做(window.adsbygoogle = window.adsbygoogle ...)

此外，在您的样式后的同一组件内添加<ins> 标签。所以文件看起来像这样：

AdsWidget.svelte

<script>
       onMount(() => 
      (window.adsbygoogle = window.adsbygoogle || []).push();
    );
</script>

<style>
...
</style>

<div class="ads-widget-container">
  <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-X0X0X0X0X0X0X"
      data-ad-slot="X0X0X0X0X0X0"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
</div>

当然，请确保将组件导入需要显示的位置。

仅此而已。希望这可以帮助某人节省一些时间。