如何让Google AdSense插屏广告在表单提交按钮触发时显示？

AdSense插屏广告默认仅会绑定页面内的<a>硬链接（包括图片链接），不会自动监听表单提交按钮的点击事件。以下是两种可行的解决方案：

方法一：手动触发广告后提交表单 #

通过AdSense的API手动监听按钮点击，先触发插屏广告，待广告关闭后再执行表单提交逻辑。

实现代码： #

<form id="mainForm">
  <!-- 表单内容 -->
  <button type="button" id="submitBtn">提交</button>
</form>

<!-- 确保页面已加载AdSense脚本 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
document.getElementById('submitBtn').addEventListener('click', () => {
  const targetForm = document.getElementById('mainForm');

  // 检查AdSense是否已加载完成
  if (typeof adsbygoogle !== 'undefined' && adsbygoogle.ads.length > 0) {
    adsbygoogle.ads[0]
      .then(ad => {
        if (ad.isVisible()) {
          // 广告关闭后提交表单
          ad.addEventListener('close', () => targetForm.submit());
        } else {
          // 广告未正常显示，直接提交表单
          targetForm.submit();
        }
      })
      .catch(() => {
        // 广告加载失败，执行兜底提交
        targetForm.submit();
      });
  } else {
    // AdSense未就绪，直接提交表单
    targetForm.submit();
  }
});
</script>

注意：将按钮type设为button，避免默认的表单提交行为打断广告触发流程。

方法二：用<a>标签模拟表单提交 #

将提交按钮替换成<a>标签，通过脚本触发表单提交。AdSense会自动识别这类硬链接并触发插屏广告，无需手动调用API。

实现代码： #

<form id="mainForm">
  <!-- 表单内容 -->
  <a href="#" id="submitLink" class="button-style">提交</a>
</form>

<script>
document.getElementById('submitLink').addEventListener('click', (e) => {
  e.preventDefault(); // 阻止链接默认跳转行为
  document.getElementById('mainForm').submit(); // 触发表单提交
});
</script>

可通过CSS给<a>标签设置按钮样式，保持页面视觉一致性。

关键注意事项 #

• 严格遵守AdSense政策：广告必须由用户主动点击触发，禁止在页面加载、自动跳转等非交互场景触发，否则可能导致账号违规。
• 优先保障用户体验：无论广告是否加载成功，都要确保表单能正常提交，避免阻塞用户核心操作。
• 多场景测试：在不同浏览器、设备上验证广告触发和表单提交的流程是否正常。

内容的提问来源于stack exchange，提问作者Gökhan Polat