Cloudflare’s “Cache Everything” and AdSense Ad Unit Issue

Implementing Cloudflare’s “cache everything” rule while serving Google AdSense is a great idea. It can help improve your site’s performance and generate revenue through advertising. But that can only be done with AdSense Auto Ads. On the other hand, using any manual ad unit code may throw TagError: adsbygoogle.push() and not show any advertisements.

Cloudflare’s “cache everything” rule

Cloudflare CDN does not cache dynamic HTML by default. Therefore, integrating a CMS like WordPress and the Cloudflare CDN will bypass the HTML pages.

However, a WordPress blog usually has a lot of static content that doesn’t change often. That’s why some people may use Cloudflare to fully cache the website using the “cache everything” rule. It is a caching strategy that tells Cloudflare to cache all resources, including HTML pages, images, scripts, and stylesheets.  

When you enable this rule, Cloudflare caches all resources that pass through its network, whether static or dynamic. Then, Cloudflare can serve it quickly to visitors without repeatedly fetching it from the origin server. It can also help reduce the load on the origin server and improve the site’s overall performance. 

AdSense showing empty advertisements

Commonly, it is okay to use the Cloudflare “cache everything” rule with the AdSense advertisement. That rule does not affect any external content. Therefore, it will not affect AdSense ads, as they are using JavaScript to call external content (from Google servers). 

However, that is true if you are using AdSense Auto Ads. Meanwhile, using a manual ad unit can cause some issues, including: 

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Hence, the website will show empty advertisements from Google AdSense. As a result, it may affect the revenue from advertising. 

Solution

You need this solution only if you use AdSense manual ad units. There are three simple steps, including reconfiguring the plugin (if any), changing the AdSense code, and testing the result.

1. Reconfigure the plugin (if any)

Usually, you can use a WordPress plugin (e.g., Ad Inserter) to add AdSense code dynamically in a given position. This is done on the server, and then the result is sent as finished HTML. That’s why using the “cache everything” rule may affect it and give an unexpected result.  

In this case, you need to alter this behavior. So, the plugin will give a script that adds dynamic objects, only after the HTML is sent to the client. It means that the HTML will be changed later. If we use the Ad Inserter plugin, we could change this behavior by taking a few steps:

1. In the Ad Inserter, go to Setting (or ⚙ symbol) > General tab > Frontend tab
2. Use client-side insert value in the Dynamic blocks option.

2. Modify the AdSense’s ad units code

When using cache, the HTML may not be fully rendered when AdSense calls for an ad. Therefore, it may show “TagError: adsbygoogle.push() error: No slot size for availableWidth=0.” The workaround for this problem is to change the ad call script.

You need to change:

(adsbygoogle = window.adsbygoogle || []).push({});

to

window.addEventListener("load", function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

Therefore, in the AdSense ad unit code, the results will be like this:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>

<script>
    window.addEventListener("load", function() {
      (adsbygoogle = window.adsbygoogle || []).push({});
    });
</script>

3. Test the result

After you have completed all the steps above, you must test your AdSense ads. It is to make sure they display correctly on your site. You can do this by visiting your website and checking to see if the ads appear in the right places. We hope you don’t see any “TagError: adsbygoogle.push()” again.