SPFX Application Customizer with Azure App Insight and Custom Script

Previously i have explained how you can configure Azure App Insight in SharePoint Online classic mode.

As Microsoft driving towards SharePoint modern sites where it is not possible to edit Master Page to add your custom artefacts. However, you can still run custom scripts using different pnp provisoning engine templates etc.

In this post, I would like to show you following two scenarios

  1. How you can configure Azure Application Insight within SharePoint modern site using SPFX Application Customizer.
  2. How to add custom javascript snippet

Before i jump into more detail i would like to give credit to Chris O’ Brien. He has written wonderful article on. Use an SPFx Application Customizer to add JavaScript (e.g. header) to every page in a site

Step 1 : Create Application Customizer empty project

Here are wonderful tutorials available by microsoft Getting Started with SPFX Application Customizer

Step2 : Install below npm package and import into your solution

👉 npm install applicationinsights-js

Prerequisite

  1. Make sure you have valid Azure App Insight key
  2. Create a custom property called ‘instrumentationKey’ and add valid Azure App Insight Key under serve.json file under config folder

👉 Here is code snippet

Happy SharePoint modernization!