How to integrate google analytics 4 with angular.

Posted By :Rajat Soni |30th March 2023

 

Google Analytics is a powerful tool that allows website owners to track their traffic and gather insights about their audience. Google Analytics 3 has been a popular tool for many years, but Google Analytics 4 is now available with enhanced features and an improved user experience. If you are currently using Google Analytics 3 and would like to migrate to Google Analytics 4.

To integrate Google Analytics 4 with an Angular application, follow these steps:

1. Create a new Google Analytics 4 property.

  • You will need to create a new property in your Google Analytics account. Log in to your Google Analytics account and select “Admin” from the bottom left corner of the page. Under the “Property” column, click “Create Property” and select “Google Analytics 4.”
  • Follow the setup wizard to get your measurement ID       
  • After creating your GA4 property, you will need to set up the tracking code on your website. The GA4 tracking code differs from the GA3 code. You can find the tracking code by clicking on “Data Streams” in the property column and selecting “Web” as the source. Follow the instructions provided to set up your tracking code.                                                                              

2. Install the Google Analytics 4 gtag.js script

In your Angular project, open the index.html file and add the following code before the closing head tag:

 

 Replace GA_MEASUREMENT_ID with your measurement ID.

 

3. Create a service for Google Analytics

Create a new file in your Angular project called google-analytics.service.ts

Add the following code:

 

This service will allow you to send events to Google Analytics.

 

4. Use the service to track events

In your Angular components or services, inject the GoogleAnalyticsService and call the event method to track events.

 

 

This code will track a button click event with the category "UI" and label "my_button".

That's it! With these steps, you should be able to integrate Google Analytics 4 with your Angular application and track events.

 

 


About Author

Rajat Soni

Rajat Soni is working as a Frontend Developer with approx 2+ years of experience and holding certification in the domain. He is skilled in AWS services ( EC2, S3 bucket, Open search), HTML/CSS, ReactJS, Client Management, Solution Architect and many more related technologies. He has been a part many successful projects namely Konfer project, where he has migrated the project from Angular js to Angular 12 , Virgin Media Project, I-Infinity project & many more along with leading the team to handling the project end to end.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us