{"id":26147,"date":"2020-09-30T00:00:00","date_gmt":"2020-09-29T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/google-analytics\/"},"modified":"2021-05-20T18:22:39","modified_gmt":"2021-05-20T16:22:39","slug":"google-analytics","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/google-analytics\/","title":{"rendered":"Google Analytics <3 Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

As part of the development of an e-commerce platform, which a front-end has been developed with Angular 8, the customer asked us to track user activities, using Google Analytics, in order to have live statistics on products sold on the site.<\/p>\n\n\n\n

Google Analytics is undoubtedly the best-known tracking product, and it offers several ways to track user visits on a website, time spent by users on each page and actions that he performs.<\/p>\n\n\n\n

Tracking user activities is necessary for most companies in the world as it helps to provide valuable data to create effective marketing campaigns and improve the user experience.<\/p>\n\n\n\n

Another feature is the monitoring of loading times and the accessibility of the site so that a developer could optimize his Web application.<\/p>\n\n\n\n

Google Analytics was designed for multi-page applications, as it calculates the number of views by tracking the user’s navigation from one page to another.<\/p>\n\n\n\n

Angular, on the other hand, is a framework for single-page applications (SPA), which means that the browser technically only loads one page and, whenever a page “changes”, the DOM is simply updating parts of it, by changing the components that form it.<\/p>\n\n\n\n

So, even if the link in the address bar changes dynamically, we are always on the same page, and Google Analytics naturally cannot know – in its basic implementation – that we are on a different view.<\/p>\n\n\n\n

Before starting the integration, we must register our application with Google Analytics and obtain a tracking ID. We go to the Google Analytics web page and log in with our Google credentials.<\/p>\n\n\n\n

A drop-down menu will appear and we can click on the “Analytics” link.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once logged in, we can fill the registration form with the details of the web application; then we must accept the terms and conditions and finally click the “Get Tracking ID” button.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We are led back to the dashboard where we can see our tracking ID, which we will use in our application.<\/p>\n\n\n\n

In the administration section Tracking Info -> Tracking Code, we can obtain the javascript code to insert in our pages. It contains a link to an external file and the definition of the gtag () function, which is the main function for the integration of Google Analytics with others’ frameworks.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The code in the Global Site Tag section (gtag.js) must be inserted in the index.html file, as the last element of the head tag.<\/p>\n\n\n\n

In this way, we can use the gtag () function in our entire Web application according to our needs.<\/p>\n\n\n\n

As mentioned above, our Angular applications run within a page, and, in order to properly monitor pages through Google Analytics, we need to know the URL that the user navigates to without loading a new page.<\/p>\n\n\n\n

To obtain the URL, we can subscribe to the router events and check if they are of type NavigationEnd and, if so, invoke gtag() passing the urlAfterRedirects property of the subscribed event as a parameter.<\/p>\n\n\n\n

The call to gtag (), specifically gtag (‘config’, ‘[Tracking Id]’, { \u2018page_path\u2019: \u2018[url]\u2019}), records that the user has viewed the page at that URL.<\/p>\n\n\n\n

To have a first (and certainly faster) integration of Google Analytics, which will allow us to track the user’s URLs, we can insert the instructions just typed in app.component.ts, since it is the main application file which is loaded at the highest level. Our app.component.ts file will look like this:<\/p>\n\n\n

\nimport{Router, NavigationEnd} from '@angular\/router';\n \ndeclare let gtag: Function;\n \nexport class AppComponent {\n constructor(public router: Router){ \n this.router.events.subscribe(event => {\n if(event instanceof NavigationEnd){\n gtag('config', 'xx-xxxxx-xx',\n  {\n 'page_path': event.urlAfterRedirects\n  }\n );\n  }\n  }\n  )}\n}\n<\/pre><\/div>\n\n\n
There are other parameters we can use to further enrich the tracking stats. The list of all parameters is available on the official documentation page (https:\/\/developers.google.com\/analytics\/devguides\/collection\/gtagjs\/pages<\/a>).<\/p>\n\n\n\n
Another fundamental feature of Google Analytics is the tracking of events, which adds an additional layer of data to the Analytics statistics.<\/p>\n\n\n\n
To make the integration consistent and reduce the amount of duplicate code in our application, we can create an Angular service to use in our components.<\/p>\n\n\n\n
Through the Angular CLI we can generate a service and add it to app.module.ts with the instruction:<\/p>\n\n\n\n
ng generate s GoogleAnalytics<\/code><\/p>\n\n\n\n
Our app.module.ts will be:<\/p>\n\n\n
\nimport {GoogleAnalyticsService} from '.\/google-analytics.service';\n...\n@NgModule({\n providers: [GoogleAnalyticsService],\n});\nexport class AppModule { }\n<\/pre><\/div>\n\n\n
Inside GoogleAnalyticsService, we create an eventEmitter public function that will essentially run gtag() making sure the formatting is correct.<\/p>\n\n\n\n
Of course, we must declare the gtag() function in order to expose the service to the outside.<\/p>\n\n\n\n
Our GoogleAnalyticsService will look like:<\/p>\n\n\n
\ndeclare let gtag:Function;\nexport class GoogleAnalyticsService {\n public eventEmitter( \n eventName: string, \n eventCategory: string, \n eventAction: string, \n eventLabel: string = null, \n eventValue: number = null ){ \n gtag('event', eventName, { \n eventCategory: eventCategory, \n eventLabel: eventLabel, \n eventAction: eventAction, \n eventValue: eventValue\n  })\n  }\n}\n<\/pre><\/div>\n\n\n
We created the GoogleAnalyticsCartService service which is a wrapper for GoogleAnalyticsService:<\/p>\n\n\n
\nexport class GoogleAnalyticsCartService {\npublic addToChart(productId) {\nthis\n .googleAnalyticsService\n .eventEmitter(\u2018add_to_cart\u2019, \u2018shop\u2019, \u2018cart\u2019, \u2018click\u2019, productId);\n  }\n \npublic removeFromChart(productId) {\nthis\n .googleAnalyticsService\n .eventEmitter(\u2018remove_from_cart\u2019, \u2018shop\u2019, \u2018cart\u2019, \u2018click\u2019, productId);\n  }\n}\n<\/pre><\/div>\n\n\n
To use this service, we need to import it into the component and run it when something happens (like a button click event) and pass the values \u200b\u200bwe want to monitor to the eventEmitter for execution.<\/p>\n\n\n\n
In our implementation, we used the eventEmitter function to track the following events:<\/p>\n\n\n\n