Tracking code in Tenant Wide Extensions list

I was experimenting with Tenant Wide Deployment of SPFx Extensions. This post describes how you can use the Tenant Wide Extensions list to manage your Google Analytics tracking code on your SharePoint online environment.

How to manage the tracking code

The following video demonstrates how you can easily manage your Google Analytics code in a SharePoint list.

Tenant Wide Extensions list

When you deploy a SharePoint framework extension to the whole tenant it get’s registered in a list called Tenant Wide Extensions. This list also has a column for component properties. You can use this to store values for custom properties, in our case the tracking code. So you don’t have to provision any list yourself to be able to store the tracking code in a central place.

Looking for code

In on-premises SharePoint deployments adding a tracking code for Analytics purposes was a very common scenario. So my first thought was to look for existing code on the internet. I came across this nice blogpost of Chris O’Brien on how to add an Instrumentation key of Application Insights in SharePoint Online.

The great thing was that he also showed that there is a NPM package for Application Insights.

Using ReactGA

This gave me the idea to do a quick search if there already is a NPM Google Analytics package. Of course I found several. I decided to use the most popular one called ReactGA. At the top of my code I only had to add the import statement to test it.

I use a custom property to store the Google Analytics tracking code.

After that import and creating the custom property it was possible to initialize the Google Analytics tracking code. In this case I am only tracking pageviews.

You can add your custom property to the ClientSideInstance file, like below.

The source code can be found on GitHub.

Other ideas

Tenant Wide deployments can be pretty useful when you want to deploy a custom action to your entire SharePoint online environment. You can find a lot of nice examples on the sp-dev-fx-extensions GitHub repository.

When I started I thought about creating a company footer or FAQ chatbot but in the end I went for a simple idea, adding a Google Analytics tracking code.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.