HomeAbout MeContact

Adding Google Analytics 4 to your SharePoint Site

Published in SPFx
June 10, 2023
1 min read
Adding Google Analytics 4 to your SharePoint Site

Table Of Contents

Development Process:

In accordance with Google’s guidelines:

Effective from July 1, 2023, standard Universal Analytics properties will cease to process data. This comprehensive guide will assist you in seamlessly incorporating Google Analytics 4 into your SharePoint Sites, enabling you to effectively monitor and analyze your site.


Before we start our development, please ensure the following requirements and has the corresponding versions installed. We will be creating an SPFx Application Customizer to incorporate Google Analytics into your SharePoint Online Site.

  1. NodeJS v16.13+ Since the SPFx version we will use is 1.17.2 currently v16.13+ is the compabtible version.
  2. NPM any latest version would work v5, v6, v7, v8
  3. Ready your favourite IDE, mine is Visual Studio Code
  4. Yeoman Generator 3.1.1
  5. Gulp 3.1.1
  6. Of course, you will need your O365 tenant with SharePoint Online to work with.

Development Process:

  1. Assuming you already have a Google Analytics Property prepared and possess a Google Tag ID or Tracking ID, we can proceed with the development process. If you do not have a Google Tag ID, please refer to the following guide for assistance: https://support.google.com/analytics/answer/9539598?hl=en

Sample Google Tag
Sample Google Tag

Once we got the Google Tag ID, we can now start working on developing our solution

  1. Let us open our PowerShell script and create the SPFx Solution using the Yeoman generator:
yo @microsoft/sharepoint

Yeoman Generator
Yeoman Generator

What is your solution name? g-4-analytics-sample-webpart

Which type of client-side component to create? Extension

Which type of client-side extension to create? Application Customizer

Add new Application Customizer to solution g-4-analytics-sample-webpart.

What is your Application Customizer name? G4SPFx

  1. Open the solution in Visual Studio Code.

  2. Navigate to ‘\src\extensions\g4SpFx\G4SpFxApplicationCustomizer.ts’ and insert the following code snippet under the ‘onInit’ method

export default class G4SpFxApplicationCustomizer
extends BaseApplicationCustomizer<IG4SpFxApplicationCustomizerProperties> {
public onInit(): Promise<void> {
const trackingID = "G-GSKY9SSX99" // This is my Google Tag ID / Tracking ID
const gtagScript = document.createElement("script"); //We will look for the script element in our html page
gtagScript.type = "text/javascript";
gtagScript.src = `//www.googletagmanager.com/gtag/js?id=${trackingID}`;
gtagScript.async = true;
window.dataLayer = window.dataLayer || [];
function gtag(){
gtag('js', new Date());
gtag('config', '${trackingID}')
return Promise.resolve();

For simplicity, I have directly hardcoded my Google Tag ID / Tracking ID. However, it is recommended to place it in the appropriate location, such as the Property Bag of the Site Collection, to monitor the desired site.

  1. Let us test the implementation by running “gulp serve”.
gulp serve

To verify that your code is functioning correctly, inspect the page and locate the Google Tag script.

Here is the script tag added by the solution
Here is the script tag added by the solution

  1. Once you have confirmed that your code is functioning as expected, we can proceed to compile and deploy it to our App Catalog. Please note that as this is an SPFx App Customizer, it can only be deployed in the App Catalog at the Farm Level.


O365M365SharePoint OnlineSPFx


Previous Article
Create a Bingo Game Using Power Apps

Related Posts

SPFx Tutorial for basic CRUD Operation based on ReactJS
SPFx Tutorial for basic CRUD Operation based on ReactJS
November 25, 2020
3 min

Quick Links

About MeContact Me

Social Media