【问题标题】:How to Lazy Load Adsense Ads?如何延迟加载 Adsense 广告?
【发布时间】:2021-11-01 07:41:21
【问题描述】:

有没有延迟加载Adsense Ads的工作方法?

我在堆栈溢出和谷歌中检查了几个答案,所有这些方法都只是延迟加载,我只需要在视口中对用户可见时加载广告;就像延迟加载图像一样。

【问题讨论】:

  • Adsense 默认实现了该功能。如果您在视口下方有广告 - 当用户靠近它们时,它们将被加载(发送广告请求)。
  • @MikitaBelahlazau 我非常怀疑,因为如果视口下方的广告是延迟加载的,我不会在 Adsense 控制面板的优化部分收到任何通知,上面写着“确保您的广告被看到”。跨度>

标签: lazy-loading adsense


【解决方案1】:

是的,可以延迟加载 Adsense,您需要使用像 LazyHTML 这样的开源库来延迟加载 Adsense 广告,而无需修改 Adcode。

在以下示例中,将 ca-pub-xxx 替换为您的 Google Adsense 客户端 ID,您还必须替换插槽 ID。根据需要进行更改。

将以下代码添加到 Head

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

将广告代码包装在 lazyhtml 包装器中。

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

步骤和注意事项:

  1. 在 Head 中添加 LazyHTML 和 adsbygoogle.js Javascript,它是异步加载的。
  2. 在 LazyHTML Wrapper 中包装所有 Adsense 代码。
  3. 如果您想延迟加载所有 Adsense 广告,您必须将所有 Adsense 标签包装在 LazyHTML 包装器
  4. 请注意,包装器内不允许使用 HTML、CSS 或 JS cmets。
  5. onvisble 属性会在 Adsense adunit 对用户完全可见时加载它。
  6. 尽量避免 Adsense Autoads。

帮助链接:

来源:Lazy Loading Adsense Ads

惰性 HTML 包装器:LazyHTML Converter

【讨论】:

  • 是否可以在阈值之前加载广告?
  • 是的,而不是使用可见使用阈值和值。示例 threshold="50" 它将在 50% 的视口之前加载广告。
  • 这是一个很棒的库@Niresh,干得好
猜你喜欢
  • 1970-01-01
  • 2019-04-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-24
  • 1970-01-01
  • 2018-01-16
  • 1970-01-01
相关资源
最近更新 更多