如何延迟加载 Adsense 广告? [英] How to Lazy Load Adsense Ads?

问题描述

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

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

解决方案

是的，可以延迟加载 Adsense，您需要使用开源库，例如 LazyHTML 无需修改 Adcode 即可延迟加载 Adsense 广告.

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

将以下代码添加到Head.

-->

步骤&备注:

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

帮助链接:

来源:延迟加载 Adsense 广告

Lazy HTML Wrapper:LazyHTML 转换器

Is there any working method of Lazy loading Adsense Ads?

I have checked few answers in stack overflow & Google, All Those methods are only defer loading, I need to load Ads only when it is visible to user in the viewport; Like lazy loading an Image.

解决方案

Yes it is possible to Lazy Load Adsense, You need to use opensource libraries like LazyHTML to Lazy Load Adsense Ads without modifying Adcode.

In the following example replace ca-pub-xxx with your Google Adsense client ID, You must also replace the slot ID. Make changes as per your need.

Add the Following Code into 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>

Wrap the adcode in lazyhtml wrapper.

<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>

Steps & Notes:

1. Add LazyHTML & adsbygoogle.js Javascript into Head, It is Async loaded.
2. Wrap all Adsense Codes in LazyHTML Wrapper.
3. If you want to Lazy Load all Adsense ads, You must wrap all the Adsense Tags in LazyHTML wrapper
4. Note that No HTML, CSS or JS comments are allowed inside the wrapper.
5. onvisble attribute loads the Adsense adunit when it is exactly visible to user.
6. Try to avoid Adsense Autoads.

Help Links:

Source: Lazy Loading Adsense Ads

Lazy HTML Wrapper: LazyHTML Converter

这篇关于如何延迟加载 Adsense 广告?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！