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

Question

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

svelteadsensesapper

4

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

目标是在资源页面上的侧边栏中显示广告（参见图像）。其上面的小部件是由index.svelte页面加载的组件，因此我希望对广告做同样的处理。

资源页面

目前，我有以下内容：

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

template.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() error: No slot size for availableWidth=0"（见图像）控制台错误我也参考了这篇文章链接，但没有成功。

任何帮助都将不胜感激 :)

- Henry

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henry · Accepted Answer

在阅读了一篇关于如何在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>

当然，在需要显示组件的地方，确保您导入了该组件。

就是这样。希望这能帮助某人节省一些时间。