Then, based on the configurations of your Google Analytics account (either through the Management API or User Interface), Google Analytics processes the data and convert those data into a format that is ready for analysis.<\/p>\n\n\n\n
\u00a0Anyone can use it to track and report the traffic on their website.<\/p>\n\n\n\n
In this article, we are going to see how with use of Google Analytics Data API<\/a>\u00a0 we can fetch data from\u00a0Google Analytics<\/a>\u00a0in the simplest way.<\/p>\n\n\n\n Google Analytics is without doubt the most powerful and popular analytics tool that can be used for free. You can monitor all kinds of metrics like page views, sessions, bounces, visits and user engagement. It allows you to easily see how users are interacting with your website or application and make wiser marketing and business choices.<\/p>\n\n\n\n It was originally created for static websites and wasn’t designed for single page applications created with Angular (or other web libraries and frameworks). This makes it a bit trickier to add Google Analytics to an Angular application but it is doable and really not that hard.<\/p>\n\n\n\n If you want to discover how users are interacting with an Angular application then Google Analytics is definitely the cheapest, easiest and quickest way to get started.<\/p>\n\n\n\n One of the biggest disadvantages of using Google Analytics is\u00a0privacy<\/strong>.<\/p>\n\n\n\n PS:<\/em><\/strong><\/span> remember also that most users that care about privacy have already installed firewalls and browser extensions to block Google Analytics.<\/em><\/p>\n\n\n\n When integrating Google Analytics into our Angular application we have two options.<\/p>\n\n\n\n <\/p>\n\n\n\n Obviously, the first choice is the easiest and quickest way to use Google Analytics with Angular. But it might not offer the customization and tracking that we need. In that case we’ll need to create our own service that communicates with the Google Analytics services.<\/p>\n\n\n\n Go to the \u00a0<\/a>Google Analytics<\/a>\u00a0home page and create your account.<\/p>\n\n\n\n If you already have an account then you can sign in instead.<\/p>\n\n\n\n Next we’ll have to create a new property.<\/p>\n\n\n\n Give your new property a name and properly configure the other options.<\/p>\n\n\n\n Answer the business information questions and then click create.<\/p>\n\n\n\n Then select your platform. In this case it will be\u00a0 Now you’ll need to specify the URL of your website as well as the name of the new data stream (the data coming in from your Angular application to Google Analytics).<\/p>\n\n\n\n This should take you to a page that displays the new web stream details. The\u00a0 The first step is to install the\u00a0ngx-google-analytics<\/a>\u00a0package.<\/p>\n\n\n\n Once installed, you’ll need to import it into your\u00a0 Run your Angular application and you should see a new user show up in the Google Analytics real-time report.<\/p>\n\n\n\n There’s a problem though. <\/strong>?<\/p>\n\n\n\n With the current configuration the Google Analytics package for Angular is not<\/strong> sending the various page views to the analytics service. This means that as a user navigates your Angular application you won’t be able to see what pages they’re navigating to.<\/p>\n\n\n\n To fix this all we have to do is import the\u00a0 PS: <\/span><\/strong>You can learn more about this package and all of it’s options, by reading the documentation\u00a0here<\/a><\/em><\/p>\n\n\n\n The first step is to go into the settings for your Google Analytics property and find the\u00a0 You want to copy the global site tag into the It should look sorta like this.<\/p>\n\n\n\n This is a good start but again there is a problem<\/strong>. We’re not quite finished because Google Analytics is not notified when we route to a page inside our SPA.<\/p>\n\n\n\n To fix that, we’ll subscribe to the Angular router inside the\u00a0 That^s it. We’ve installed Google Analytics and are now sending page views to the Google Analytics servers.<\/p>\n\n\n\n We need three values to fetch the data:<\/p>\n\n\n\n First, you need to get To get this you need to follow these steps:<\/p>\n\n\n\n To get\u00a0 And then you will be prompted to enter the name of the project. After entering the name click on the\u00a0Next<\/strong>\u00a0button<\/p>\n\n\n\n Then you will be prompted to download the credential file as JSON.<\/p>\n\n\n\n After downloading that file. You will find Now you have all the necessary information or keys.<\/p>\n\n\n\n To fetch the data you need to install a\u00a0@google-analytics\/data<\/a>\u00a0package. You can do that by simply running the following command in the terminal.<\/p>\n\n\n\n Let assume we are using Next.js<\/a>, so we will use Next.js API Routes<\/a><\/p>\n\n\n\n Let”s create an API route\u00a0 This is all you need to fetch the data. and It will return the response.<\/p>\n\n\n\n PS:<\/span><\/em><\/strong> You can do the same thing with different frameworks.<\/em><\/p>\n\n\n\nShould I use Google Analytics with Angular?<\/h4>\n\n\n\n
Disadvantages of using Google Analytics with Angular<\/h4>\n\n\n\n
How do you use Google Analytics with Angular?<\/h4>\n\n\n\n
Google Analytics Setup<\/a><\/h4>\n\n\n\n
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-9.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-10.png\")
<\/figure><\/div>\n\n\n\nWeb<\/code>.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-4.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-5.png\")
<\/figure><\/div>\n\n\n\nMEASUREMENT ID<\/code>\u00a0is important and we’ll need it for the next step.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-6.png\")
<\/figure><\/div>\n\n\n\nhow to add Google Analytics to Angular application?<\/h4>\n\n\n\n
Alternative 1<\/em><\/span><\/h4>\n\n\n\n
npm install --save ngx-google-analytics<\/code><\/pre>\n\n\n\napp.module.ts<\/code>\u00a0file like this.<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgxGoogleAnalyticsModule } from 'ngx-google-analytics';\r\n\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n NavBarComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n NgxGoogleAnalyticsModule.forRoot('MEASUREMENT-ID')\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-7.png\")
<\/figure><\/div>\n\n\n\nNgxGoogleAnalyticsRouterModule<\/code>\u00a0module. Like this.<\/p>\n\n\n\nimport { HttpClientModule } from '@angular\/common\/http';\r\nimport { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';\r\n\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { NavBarComponent } from '.\/core\/nav-bar\/nav-bar.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n NavBarComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n HttpClientModule,\r\n NgxGoogleAnalyticsModule.forRoot('MEASUREMENT-ID'),\r\n NgxGoogleAnalyticsRouterModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/code><\/pre>\n\n\n\nAlternative <\/em>2<\/span><\/h4>\n\n\n\n
Global site tag<\/code>.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-8.png\")
<\/figure><\/div>\n\n\n\nhead<\/code> of your index.html<\/code> file.<\/p>\n\n\n\n<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Angular Application<\/title>\r\n <base href=\"\/\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\">\r\n <!-- Global site tag (gtag.js) - Google Analytics -->\r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=MEASUREMENT-ID\"><\/script>\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n\r\n gtag('config', 'MEASUREMENT-ID');\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <app-root><\/app-root>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n\n\n\napp.component.ts<\/code>\u00a0file and send the new routes to Google Analytics.<\/p>\n\n\n\nimport { Component } from '@angular\/core';\r\nimport { NavigationEnd, Router } from '@angular\/router';\r\n\r\ndeclare const gtag: Function;\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n constructor(public router: Router) {\r\n this.router.events.subscribe((event) => {\r\n if (event instanceof NavigationEnd) {\r\n gtag('config', 'MEASUREMENT-ID', { 'page_path': event.urlAfterRedirects });\r\n } \r\n })\r\n }\r\n}<\/code><\/pre>\n\n\n\nHow to use Google Analytics Data API?<\/h4>\n\n\n\n
Requirements<\/h4>\n\n\n\n
GA_PROPERTY_ID<\/code><\/li>GA_CLIENT_EMAIL<\/code><\/li>GA_PRIVATE_KEY<\/code><\/li><\/ul>\n\n\n\nGA_PROPERTY_ID<\/span><\/code><\/h5>\n\n\n\nGA_PROPERTY_ID<\/strong><\/code> of the Google Analytics project from which you want to fetch the data.<\/p>\n\n\n\n![\"This](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image.png\")
<\/figure>\n\n\n\nGA_CLIENT_EMAIL<\/code>\u00a0<\/strong><\/span>and\u00a0GA_PRIVATE_KEY<\/span><\/strong><\/code><\/p>\n\n\n\nGA_CLIENT_EMAIL<\/code>\u00a0and\u00a0GA_PRIVATE_KEY<\/code>\u00a0you need to visit Google Analytics Data API’s\u00a0documentation<\/a>\u00a0and then click on\u00a0Enable the Google Analytics Data API v1<\/strong>\u00a0button as shown in the image below:<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-1.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-2.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2023\/01\/image-3.png\")
<\/figure><\/div>\n\n\n\nprivate_key<\/code> and client_email<\/code> properties in that JSON file. Save these two in your .env.local<\/code>.<\/p>\n\n\n\nInstalling Dependency<\/h4>\n\n\n\n
npm i @google-analytics\/data<\/code><\/pre>\n\n\n\nUsing Google Analytics Data API in Project<\/h4>\n\n\n\n
pages\/api\/ga.ts<\/code>:<\/p>\n\n\n\nimport { NextApiRequest, NextApiResponse } from \"next\";\r\nimport { BetaAnalyticsDataClient } from \"@google-analytics\/data\";\r\n\r\n\/\/ ? Setting PropertyId\r\nconst propertyId = process.env.GA_PROPERTY_ID;\r\n\r\nconst analyticsDataClient = new BetaAnalyticsDataClient({\r\n credentials: {\r\n client_email: process.env.GA_CLIENT_EMAIL,\r\n private_key: process.env.GA_PRIVATE_KEY?.replace(\/\\n\/gm, \"\\n\"), \/\/ replacing is necessary\r\n },\r\n});\r\n\r\nexport default async function handler(\r\n _req: NextApiRequest,\r\n res: NextApiResponse\r\n) {\r\n \/\/ ? Running a simple report\r\n const [response] = await analyticsDataClient.runReport({\r\n property: `properties\/${propertyId}`,\r\n dateRanges: [\r\n {\r\n startDate: `7daysAgo`, \/\/? e.g. \"7daysAgo\" or \"30daysAgo\"\r\n endDate: \"today\",\r\n },\r\n ],\r\n dimensions: [\r\n {\r\n name: \"year\", \/\/ data will be year wise\r\n },\r\n ],\r\n metrics: [\r\n {\r\n name: \"activeUsers\", \/\/ it returs the active users\r\n },\r\n ],\r\n });\r\n\r\n \/\/ Returning the respose.\r\n return res.status(200).json({\r\n response,\r\n });\r\n}<\/code><\/pre>\n\n\n\n<\/code><\/pre>\n\n\n\nReference:<\/h5>\n\n\n\n