Complete guide to inject Google Ad Units in you Angular 18 Application

Step-by-step guide to integrating Google AdSense in Angular 18 SPAs covering script setup, reusable ad components, lifecycle handling, and best practices to display ads correctly without duplication or UX issues.

By Updated 5 min read
Complete guide to inject Google Ad Units in you Angular 18 Application cover image

This guide walks you through a reliable, production-ready approach to integrating Google AdSense ad units into an Angular 18 single-page application (SPA). Instead of relying on outdated patterns that only work on traditional multi-page websites, we’ll build a reusable, lifecycle-aware solution that renders ads correctly on route changes, avoids duplication, and keeps your UX clean.

Understanding the Challenge (Angular SPA + AdSense)

AdSense was designed with traditional page loads in mind. On a classic website, every navigation triggers a full document refresh, which gives AdSense a clean moment to scan the DOM and render ad units. In an Angular SPA, navigation happens client-side. The page does not reload, the DOM is partially updated, and scripts are not re-executed automatically.

This difference creates three common problems:

  • Ads not rendering: AdSense does not detect newly inserted ad elements.
  • Duplicate ads or errors: Re-initializing ads incorrectly can trigger console warnings.
  • Layout shifts: Ads load late and push content around, hurting UX and Core Web Vitals.

A working integration must respect Angular’s lifecycle while also triggering AdSense at the correct moment. That means explicitly pushing ads into the adsbygoogle queue after the component is rendered and cleaning up when the component is destroyed.

Step 1: Add the Google AdSense Script to index.html

Start by adding the AdSense script globally. This ensures the library is loaded once and available across all routes. 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=your_ads_client_id" crossorigin="anonymous"></script>

Replace your_ads_client_id with your real AdSense client ID. This script must be included only once. Adding it multiple times can break ad rendering or trigger policy issues.

After adding the script, deploy and verify that it loads correctly using the browser DevTools network tab.

Step 2: Create a Dedicated Ad Component

Instead of placing ad code directly in templates, create a reusable Angular component. This keeps your codebase clean and ensures consistent behavior across pages. 

ng g c components/ads/vertical-ad-responsive

You can create multiple components for different ad types, such as:

  • Responsive display ads
  • In-article ads
  • Sidebar ads
  • Sticky footer ads

This modular approach also helps with A/B testing and layout adjustments later.

Step 3: Build the Ad Component (Angular 18)

The core idea is simple: render the AdSense <ins> element, then push it into the AdSense queue after Angular finishes rendering the view.

Template

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="your_ads_client_id"
     data-ad-slot="your_ad_slot"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>

Component Logic

import { AfterViewInit, Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-vertical-ad-responsive',
  standalone: true,
  templateUrl: './vertical-ad-responsive.component.html',
})
export class VerticalResponsiveAdComponent implements AfterViewInit, OnDestroy {

  private initialized = false;

  ngAfterViewInit() {
    if (!this.initialized) {
      try {
        (window as any).adsbygoogle = (window as any).adsbygoogle || [];
        (window as any).adsbygoogle.push({});
        this.initialized = true;
      } catch (e) {
        console.error('AdSense error:', e);
      }
    }
  }

  ngOnDestroy() {
    this.initialized = false;
  }
}

This approach ensures that:

  • The ad is initialized only once per component lifecycle.
  • Angular rendering is complete before AdSense runs.
  • Errors are caught and logged instead of breaking the app.

Step 4: Handle Route Changes Properly

Since Angular does not reload pages, ads must be re-triggered when navigating between routes. The component lifecycle already handles most cases, but for complex layouts (like persistent layouts with router outlets), you may need additional control.

A simple strategy is to place ad components inside routed views rather than global layout containers. This ensures they are destroyed and recreated on navigation.

For advanced setups, you can listen to router events: 

this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
    setTimeout(() => {
      try {
        (window as any).adsbygoogle.push({});
      } catch {}
    }, 100);
  }
});

Use this carefully. Over-triggering can cause duplicate ad requests or policy issues.

Step 5: Prevent Duplicate Ads and Errors

One of the most common issues is pushing the same ad multiple times. This can result in errors like:

  • adsbygoogle.push() error: All ins elements already have ads

To avoid this:

  • Ensure each ad component renders a fresh <ins> element.
  • Avoid reusing the same DOM node across route changes.
  • Do not manually call push() multiple times for the same element.

A clean lifecycle (init on mount, reset on destroy) is usually enough.

Step 6: Optimize for UX and Core Web Vitals

Ads should not break your layout. A common mistake is allowing ads to resize dynamically without reserving space, which causes layout shifts.

To fix this, define a minimum height: 

.ad-container {
  min-height: 250px;
}

This prevents content jumping when ads load and improves CLS (Cumulative Layout Shift).

You should also:

  • Limit the number of ads per page.
  • Avoid placing ads too close to clickable UI elements.
  • Keep ads clearly distinguishable from content.

Step 7: Placement Strategy for Better Monetization

Where you place ads matters as much as how you implement them. In Angular apps, common placements include:

  • Above the fold (top banner)
  • Between content sections
  • Sidebar (desktop only)
  • End of article

Avoid overloading the page with ads. A balanced layout improves both user experience and long-term revenue.

Step 8: Testing and Debugging

Before going live, test your integration carefully:

  • Check console errors in DevTools.
  • Verify ads load on route changes.
  • Test different screen sizes.
  • Use AdSense preview tools where possible.

If ads do not show immediately, remember that AdSense may take time to approve new units or domains.

Common Mistakes to Avoid

  • Adding the AdSense script multiple times.
  • Using the same ad slot repeatedly without spacing.
  • Triggering push() too often.
  • Ignoring layout shifts and UX impact.
  • Testing only on localhost without production checks.

Final Thoughts

Integrating Google AdSense into an Angular 18 SPA requires a slightly different mindset compared to traditional websites. Once you understand the interaction between Angular’s lifecycle and AdSense’s rendering model, the implementation becomes predictable and reusable.

The key is to treat ads as components, not static snippets. Initialize them after rendering, clean them up properly, and test behavior across route changes. Combined with thoughtful placement and UX considerations, this setup allows you to monetize your Angular application without breaking performance or user experience.

With this structure in place, you can scale your ad strategy confidently while keeping your application clean, maintainable, and compliant with AdSense guidelines.

View all →