GA4, GTM, Search Console

Angular 19+ alkalmazásba a Google Analytics 4 (GA4), Google Tag Manager (GTM) és Google Search Console integrálása így néz ki — strukturáltan, optimalizáltan:

🧭 1. GA4 integrálása (Google Analytics 4)

✅ Ajánlott: GTM-en keresztül

→ Ne közvetlenül GA4 scriptet illessz be, hanem GTM konténerből lődd be GA4-t, így jobban kontrollálható.

Ha mégis közvetlenül:

a) GA4 script elhelyezése (index.html)

<!-- index.html, <head> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    // eslint-disable-next-line prefer-rest-params
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

b) Navigációkövetés Angular router alapján

// analytics.service.ts
@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
      .subscribe((event) => {
        gtag('config', 'G-XXXXXXX', {
          page_path: event.urlAfterRedirects
        });
      });
  }
}

gtag() típusdefinícióhoz: declare function gtag(...args: any[]): void;

🧭 2. GTM integrálása (Google Tag Manager)

✅ Lépések:

a) Script beillesztése (index.html)

<!-- index.html, <head> -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

<!-- index.html, <body> -->
<noscript>
  <iframe
    src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0"
    width="0"
    style="display:none;visibility:hidden"
  ></iframe>
</noscript>

b) SPA kompatibilitás: route változás figyelés

@Injectable({ providedIn: 'root' })
export class GtmService {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
      .subscribe((event) => {
        window.dataLayer?.push({
          event: 'pageview',
          pagePath: event.urlAfterRedirects
        });
      });
  }
}

🧭 3. Google Search Console

A cél: igazold, hogy te vagy a domain tulajdonosa.

✅ Megoldások:

HTML meta tag a head-be:

<meta name="google-site-verification" content="VERIFICATION_CODE_HERE" />

vagy: Search Console → letöltött HTML fájl feltöltése
- nem Angular-specifikus: src/assets/google1234567890abcdef.html és Angular angular.json-ben benne van az assets mezőben, így elérhető lesz:
  https://domain.hu/assets/google1234567890abcdef.html

🧪 Bonus: csak production környezetben töltsd be őket

if (environment.production) {
  // betölteni a GTM/GA4 scripteket
}

🧩 Összefoglalás

Eszköz	Mit csinál	Hogyan?
GA4	Webanalitika	GTM-en keresztül ajánlott
GTM	Script- és eventkezelő	index.html + route event tracking
Search Console	SEO / domain hitelesítés	`<meta>` vagy `.html` fájl

Ha szeretnéd, bekonfigurálom neked mindhárom lépést konkrét fájlokba (analytics.service.ts, gtm.service.ts, index.html) production-only módon.