Having an analytics tool monitoring your intranet is essential to understand the engagement of the users and how they are interacting with the content that is published. Google Analytics is widely used in the internet, it provides a concise analysis with reports of everything that happens in your site as well as real time reports, mostly targeted for public sites it also works on SharePoint intranets. Google Analytics is added to the sites using a script provided by Google, while this is not a problem for classic SharePoint Sites, with the modern no script site things are a bit different.
In this article, I explain step by step how to build and deploy an Application Customizer using the SharePoint Framework Extensions to add Google Analytics to the modern SharePoint following the best practices recommended by Microsoft.
How to setup Google Analytics
First things first, before we get into the SharePoint bits let’s set up google analytics and get everything you need.
Create the Application Customizer Extension project
The Application Customizer is one of the available extension types provided by the SharePoint Framework and allows you to add custom JavaScript to every page in a site or web, to achieve the steps below you need to have installed the SPFx v1.4 or higher.
Create a folder with the name of the project e.g. analytics.
Open the console window in the new directory.
Type the command yo @microsoft/sharepoint.
When prompted:
Build the extension
Now that you have the extension project created let's proceed and modify it to include the Google Analytics JavaScript code.
1export interface IAnalyticsApplicationCustomizerProperties { trackingID: string; }2
1
1 public onInit(): Promise<void> { let trackingID: string = this.properties.trackingID; if (!trackingID) { Log.info(LOG_SOURCE, "Tracking ID not provided";); }else{ var gtagScript = document.createElement("script"); gtagScript.type = "text/javascript"; gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${trackingID}`; gtagScript.async = true; document.head.appendChild(gtagScript); eval(` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${trackingID}'); `); } return Promise.resolve(); }2
This snippet is a modified version of the code provided by Google, it was converted from JavaScript to TypeScript to use the Tracking Id dynamically.
Package the analytics solution
To deploy the analytics solution to all the users it needs to be packaged and installed on SharePoint Online. The instructions below are specific for SPFx 1.4 or higher and will make use of the Asset Packaging functionality.
gulp bundle –ship.
3.
To get the installation package run the command gulp package-solution –ship.
4.
On your project structure navigate to sharepoint/solution, in this folder you will find the *.sppkg installation file.
Install Google Analytics on Modern SharePoint
Extensions won't be automatically enabled. SharePoint Framework extensions must be specifically associated to sites, lists, and fields programmatically to be visible to site users.
To achieve the steps described in this section you will need to install the SharePoint PnP PowerShell.
On your project go to src/extensions/analytics and open the AnalyticsApplicationCustomizer.manifest.json
Copy the id value.
Open the PowerShell command line.
To establish a connection, execute the command Connect-PnPOnline -UseWebLogin -Url https://yourtenant.sharepoint.com/.
7.
To enable the extension, execute the command Add-PnPCustomAction -ClientSideComponentId "id" -Name "Analytics" -Title "Analytics" -Location ClientSideExtension.ApplicationCustomizer -ClientSideComponentProperties: '{"trackingID":"UA-00000000-1"} -Scope site
``Replace the “id” by the client component id
Replace the “UA-00000000-1” by your own google analytics tracking id.
Conclusion
In this article, you learned how to add Google Analytics to the Modern SharePoint sites and how to create an application customizer step by step. If you were already using Google Analytics to monitor the SharePoint usage now you can combine your existent solution with this approach to get a complete overview of all sites and pages.
Joao Ferreira
SharePoint Developer