0

I have a SPA website that displays ads from Google AdSense.

The framework used for the SPA experience is Turbo (Hotwired) which has superseeded Turbolinks.

The issue I am having is that ads don't display when on subsequent page loads (i.e. when links are followed). This is related to how Turbo works:

When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.

Initial page load - Auto Ads

Ads display correctly

Initial page load - Manual Ad Units

Ads display correctly

2nd page loads - Auto Ads

Auto ads are not displaying

2nd page loads - Manual Ad Units

Manual Ad Units are not displaying. However, I have managed to fix this issue using the turbo:load event listener:

var previousPageVisited = false;
document.addEventListener('turbo:load', () => {
    if (previousPageVisited) {
        var ads = document.querySelectorAll('.adsbygoogle');
        ads.forEach(function (ad) {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    }
    previousPageVisited = true;
});

So the only issue that I am still having is with Auto Ads when following links on the website. I've tried using the turbo:before-cache event listener to see if deleting elements with the .google-auto-placed class would help. However, AdSense still doesn't see "new content" on these page requests.

Is there a way to force AdSense to reload or is the only option to disable Turbo?

Martin
  • 1,066
  • 3
  • 20
  • 36

1 Answers1

0

I am not entirely sure if this is still valid and working but this helped me a few years ago: https://developers.google.com/publisher-tag/guides/control-ad-loading

Like you disable the initial load and then load ads on demand once you're sure turbo is done.

However, I am not certain this will work with auto ads.

magicbyt3
  • 143
  • 9