如何在Svelte/Sapper应用中通过组件实现Google Adsense广告加载

问题原因 #

报错No slot size for availableWidth=0的核心原因是广告初始化时，承载广告的容器宽度被识别为0：你原方案中广告代码放在display: none的隐藏节点中，直接移动innerHTML到侧边栏后，广告初始化逻辑执行时还没计算到新容器的实际宽度，加上执行时序混乱，就触发了该错误。 #

修复方案 #

第一步：调整template.html配置 #

删掉footer中隐藏的广告代码块，仅保留全局AdSense脚本在<head>标签内即可，全局脚本只需要加载一次，所有页面的广告位都可以复用：

<head>
  <!-- 原有头部内容 -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-X0X0X0X0X0X0X" crossorigin="anonymous"></script>
</head>

第二步：重写adswidget.svelte组件 #

不要用移动DOM节点的方式加载广告，直接把广告位代码写在组件内，等组件挂载完成、容器已经渲染出实际尺寸后再触发广告初始化，同时给广告位设置最小宽高避免宽度识别为0：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // 组件挂载完成后再初始化广告，此时容器已经有明确尺寸
    (adsbygoogle = window.adsbygoogle || []).push({});
  });
</script>

<ins class="adsbygoogle"
     style="display:block;min-width: 300px;min-height: 250px;"
     data-ad-client="ca-pub-X0X0X0X0X0X0X"
     data-ad-slot="X0X0X0X0X0X0"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

额外说明 #

如果是Sapper单页路由切换场景，路由加载到该广告组件时onMount会自动执行初始化逻辑，不需要额外处理。如果侧边栏宽度小于300px，可以根据实际布局调整min-width的数值，只要保证初始化时容器有明确的非0宽度即可。

内容的提问来源于stack exchange，提问作者Henry