Menu
I'm trying to use the Google Analytics with angular 4, but i can't find any @type to ga.js in ts.
For a quick solution I used this in every component:
declare let ga: any; Following how I resolved it:
Create a function to load the GA dynamically that inserts the GA script with current trackingId and user.
loadGA(userId) { if (!environment.GAtrackingId) return; let scriptId = 'google-analytics'; if (document.getElementById(scriptId)) { return; } var s = document.createElement('script') as any; s.type = "text/javascript"; s.id = scriptId; s.innerText = "(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', { trackingId: '" + **environment.GAtrackingId** + "', cookieDomain: 'auto', userId: '" + **userId** + "'});ga('send', 'pageview', '/');"; document.getElementsByTagName("head")[0].appendChild(s); } Create the service to implement the methods that you will need.
import { Injectable } from '@angular/core'; import { environment } from '../../../environments/environment'; declare let ga: any; @Injectable() export class GAService { constructor() { } /** * Checks if the GA script was loaded. */ private useGA() : boolean { return environment.GAtrackingId && typeof ga !== undefined; } /** * Sends the page view to GA. * @param {string} page The path portion of a URL. This value should start with a slash (/) character. */ sendPageView( page: string ) { if (!this.useGA()) return; if (!page.startsWith('/')) page = `/${page}`; ga('send', 'pageview', page); } /** * Sends the event to GA. * @param {string} eventCategory Typically the object that was interacted with (e.g. 'Video') * @param {string} eventAction The type of interaction (e.g. 'play') */ sendEvent( eventCategory: string, eventAction: string ) { if (!this.useGA()) return; ga('send', 'event', eventCategory, eventAction); } } Then I finally use the service injected in component.
constructor(private ga: GAService) {} ngOnInit() { this.ga.sendPageView('/join'); } 
951
Adding Google Analytics to your Angular app is easy. Well, adding it to an Angular SPA is not quite as easy compared to static websites but it can be done quickly if you know what you're doing. There's no need to sweat like a pig.
Fill in the signup form and click on Get Tracking ID . It will take you to your Google Analytics dashboard page. Step 2: Copy your tracking code. OK, now we are done with the registration and now have our tracking code.As the instruction said, copy it and paste it into the code of every page you want to track.
While it might be intimidating and hard to use, it's clear that GA4 is the future of Analytics, and you should be prepared for that. That said, there's no reason you can't run a Universal Analytics property at the same time to get all the benefits of both. In fact, we recommend running both!
First of all, you need to install typings for Google Analytics in your devDependencies
npm install --save-dev @types/google.analytics Then add your tracking code in the base index.html, and remove the last line as shown bellow:
<body> <app-root>Loading...</app-root> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXX-ID', 'auto'); // <- add the UA-ID // <- remove the last line </script> </body> The next step consists to update your home component constructor for event tracking.
constructor(public router: Router) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { ga('set', 'page', event.urlAfterRedirects); ga('send', 'pageview'); } }); } If you want to track some specific event, you can also create a service and inject it into any component that you want to implement event tracking.
// ./src/app/services/google-analytics-events-service.ts import {Injectable} from "@angular/core"; @Injectable() export class GoogleAnalyticsEventsService { public emitEvent(eventCategory: string, eventAction: string, eventLabel: string = null, eventValue: number = null) { ga('send', 'event', { eventCategory, eventLabel, eventAction, eventValue }); } } So if you want track a click on your home component for example, all you need to do is to inject the GoogleAnalyticsEventsService and call the emitEvent() method.
The updated home component source code:
constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { ga('set', 'page', event.urlAfterRedirects); ga('send', 'pageview'); } }); } submitEvent() { // event fired from home.component.html element (button, link, ... ) this.googleAnalyticsEventsService.emitEvent("testCategory", "testAction", "testLabel", 10); } I'm surprised nobody here mentioned Google's Tag Manager yet (which is the version of the script that the Google Analytics console outputs for me in the last few years, whenever I add a new identity).
Here's a solution that I came up with today, which is a variation of the solutions already mentioned in the other answers, adapter to Google's Tag Manager script. I think it would be useful for people who migrated from ga() to gtag() (a migration that is recommended as far as I know).
analytics.service.ts
declare var gtag: Function; @Injectable({ providedIn: 'root' }) export class AnalyticsService { constructor(private router: Router) { } public event(eventName: string, params: {}) { gtag('event', eventName, params); } public init() { this.listenForRouteChanges(); try { const script1 = document.createElement('script'); script1.async = true; script1.src = 'https://www.googletagmanager.com/gtag/js?id=' + environment.googleAnalyticsKey; document.head.appendChild(script1); const script2 = document.createElement('script'); script2.innerHTML = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '` + environment.googleAnalyticsKey + `', {'send_page_view': false}); `; document.head.appendChild(script2); } catch (ex) { console.error('Error appending google analytics'); console.error(ex); } } private listenForRouteChanges() { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { gtag('config', environment.googleAnalyticsKey, { 'page_path': event.urlAfterRedirects, }); console.log('Sending Google Analytics hit for route', event.urlAfterRedirects); console.log('Property ID', environment.googleAnalyticsKey); } }); } } Prerequisites:
app.module.ts.<router-outlet> tag in its template), inject the AnalyticsService and call this.analytics.init() as early as possible (e.g. ngOnInit)googleAnalyticsKey: 'UA-XXXXXXX-XXXX'
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
