Adsense ads on a single page app not loading and how to fix

Part of our guide on tools for broken affiliate links

Why Adsense fails to load on SPA route changes

Adsense ads depend on scripts that run on page load to define and display ads. Single page apps (SPAs) update content and URL without a full page reload, so those scripts don’t automatically rerun.

After SPA navigation, the Adsense script doesn’t detect the new content or URL, so ads do not refresh or appear. This is the key reason ads don’t load on SPA route changes.

The SPA changes the DOM dynamically but doesn’t fire the normal browser 'load' event that Adsense relies on to initialize ads.

Browsers treat SPAs as a single page, so external scripts like Adsense don’t restart. Without manual intervention, the ads remain blank or show previous content. We cover why my rss to wordpress posts drop images in its own article.

Lazy loading and user consent settings can also prevent ads from loading if not handled properly during SPA navigation.

How to programmatically refresh Adsense ads after SPA navigation

You must call Adsense’s ad refresh method after every SPA route change to reload ads. Adsense provides window.adsbygoogle.push({}) to request ad rendering on new content.

After your SPA updates the DOM for the new route, trigger this push command targeting the new ad slot elements to load fresh ads. There is more on wordpress login fails after update in a separate guide.

Place this code inside your SPA’s routing event handler or lifecycle hook that runs on every page change.

If you don’t refresh ads programmatically, they’ll remain empty or stale because Adsense scripts only run once at initial load.

You can detect route changes using framework-specific hooks and run ad refresh logic there. Always run it after the new ad containers exist in the DOM. There is more on refresh page every 10 seconds in a separate guide.

If your SPA uses dynamic content loading techniques such as infinite scroll or content replacement without URL changes, you must trigger the ad refresh every time new ad slots are inserted, not just on route changes. For example, if a React app loads more articles dynamically under the same route, call window.adsbygoogle.push({}) after rendering the new ad elements in the DOM to ensure fresh ads display.

Carefully check the timing of your refresh call: it must occur after the ad container exists in the DOM and is visible. Calling the push method too early, before the ad slot HTML is present, will cause Adsense to ignore the request. For example, in Angular, you might use the ngAfterViewInit lifecycle hook to guarantee the ad element has been rendered before calling the refresh.

1. Identify SPA route change event or hook.
2. Ensure new ad slot HTML is inserted into the DOM.
3. Call window.adsbygoogle.push({}) to refresh ads.
4. Verify ads appear or reload in the new route.
5. Repeat on every route change.

Common SPA frameworks and specific fixes if any

React, Angular, and Vue have different ways to hook into route changes, but all require manual Adsense refresh calls after navigation. Before you commit to anything, it is worth looking at verify refresh timing.

In React, use the useEffect hook watching route changes or a componentDidUpdate lifecycle method in class components.

In Angular, listen for NavigationEnd events from the Router and trigger ad refresh after the new view loads.

Vue’s router.afterEach hook works well to run Adsense refresh logic after each route transition. There is more on comparing product research workflows in a separate guide.

Framework-specific plugins or components sometimes wrap Adsense and handle refresh automatically. Otherwise, implement the standard push call yourself.

For React developers, if you use React Router, the useLocation hook combined with useEffect is an effective pattern: inside useEffect, watch the location object and trigger the ad refresh whenever it changes. For example, useEffect(() => { window.adsbygoogle.push({}); }, [location]); ensures ads reload on navigation. Ensure this runs only after the new ad slot elements appear to avoid errors.

In Vue applications using Vue Router, you can add your Adsense refresh logic inside the router.afterEach() hook. This hook fires after every route change and is ideal for refreshing ads. For example: router.afterEach(() => { window.adsbygoogle.push({}); });. If you face issues with timing, consider wrapping the push call in a nextTick or setTimeout to delay until the DOM updates.

Angular SPA developers should subscribe to the Router's NavigationEnd event to detect route changes reliably. In the event handler, after confirming the new view is rendered, call window.adsbygoogle.push({}). For example, router.events.subscribe(event => { if (event instanceof NavigationEnd) { window.adsbygoogle.push({}); }});. This approach ensures ads refresh only after navigation completes.

Verifying Adsense ads are loading correctly after the fix

Once you implement the refresh logic, confirm ads load by inspecting the network and DOM after SPA route changes.

Use browser developer tools to watch for requests to Google ad servers and verify ad iframes appear in the page.

Ads should appear within seconds of the route change and refresh call, not remain blank or show errors.

Monitor the console for Javascript errors related to Adsense that may indicate implementation problems.

Testing on different devices and connections ensures your fix works reliably for users.

A reliable check involves monitoring network traffic for requests to Google’s ad servers such as pagead2.googlesyndication.com or googleads.g.doubleclick.net immediately after navigation and ad refresh. If these requests do not occur, the refresh code likely did not execute properly or ad slots were missing.

Additionally, the DOM should contain iframe elements inside the ad containers post-refresh. The absence of these iframes indicates ads failed to load. Use the browser’s Elements panel to verify iframes are created and contain ad content.

If ads fail to load but requests are made, check for Javascript errors or warnings in the console related to Adsense or ad blockers interfering. Errors like "adsbygoogle.push() called before slot is added" indicate incorrect timing of your refresh call.

For example, after implementing the fix, navigate between SPA routes and observe the network tab showing a new ad request within 2-3 seconds, with the iframe injected in the ad slot container. This confirms the refresh is working as intended.

• Network tab: watch requests to pagead2.googlesyndication.com
• Elements tab: check for new ad iframes after route change
• Console tab: look for Adsense script errors
• Test slow network to confirm ads still load
• Check consent banner impact on ad visibility

Other factors blocking Adsense ads on SPAs

Lazy loading can delay ads until the user scrolls them into view, which may prevent ads from displaying immediately after route changes.

If lazy loading is enabled, ensure your code triggers refresh only after ads are visible or disable lazy loading for testing.

User consent frameworks for GDPR or CCPA may block Adsense scripts until explicit consent is given, causing no ads to load on SPA transitions if consent is not rechecked.

Confirm your consent management platform reinvokes Adsense loading on SPA route changes and updates consent state accordingly.

Ad blockers can also prevent ads from loading, but that is a separate user-side problem.

Another factor that can block Adsense ads is restrictive Content Security Policies (CSP) set on your SPA. If your CSP does not allow requests or script execution from Google Adsense domains, ads will silently fail to load. Check your CSP headers and ensure they include the required Adsense domains under script-src and frame-src directives.

Similarly, if your SPA implements strict cookie policies or SameSite attributes that block third-party cookies, Adsense may fail to serve personalized ads, causing ads to be blank or show errors. Testing with cookies enabled can help isolate this issue.

If you use server-side rendering (SSR) or static pre-rendering for your SPA, verify that Adsense scripts are only run on the client side after hydration. Running Adsense scripts during SSR may cause unexpected behavior or errors. Ensure your Adsense initialization code executes exclusively in the browser environment.

• Lazy loading: check if ads are waiting off-screen to load
• Consent: confirm consent state is valid after route change
• Ad blockers: test with blockers disabled
• Check Adsense console for warnings about consent or ad requests

Summary: Adsense ads on a single page app not loading adsense

Adsense ads don’t load on SPA route changes because scripts only run once on initial page load, so you must manually refresh ads after navigation.

Use framework-specific route hooks to trigger window.adsbygoogle.push({}) after inserting new ad slots.

Check for lazy loading or consent blockers that can prevent ads from appearing and address those as needed.

Verify by inspecting network requests and DOM changes to ensure ads load reliably.

This approach solves the core problem and avoids common mistakes that block ads.

Questions people still ask

I’ve implemented Adsense in multiple SPAs and found that manual refresh on route change is the only reliable fix.