Add Google Analytics to SharePoint modern pages

2019-03-01 update: The bug on the navigatedEvent seems to be fixed now, so I have updated the code below. I have also sent a PR with the changes to the original repository (by João Ferreira) where you can get a full project.


I’ve been asked by a client to help them add Google Analytics to a modern SharePoint site in order to track all page views.
The first thing that came to my mind was to look for a solution available online as this is a fairly common scenario, which was also what the client tried to do and got stuck with some limitations on the solutions that they have found.
There are plenty of solutions available online, from complete implementations to blog posts with the relevant code snippets, but I was also unable to find one that was able to track full and partial page loads, so I decided to tweak one to work on the required scenarios.

The code below is based on the original solution provided by João Ferreira on this blog post where he uses a SPFx application customizer to load the script on every SharePoint page. When testing it, we found that it was not tracking all the page loads that we required, so we updated it slightly.

Additionally, the this.context.application.navigatedEvent event currently has a known bug and fires twice. The workaround provided by jonthenerd worked fine in this scenario.

Regarding tracking of pages that are only loaded partially, the code below simply uses the approach provided by Google for tracking Single Page Applications.

Hope you fins this useful, and feel free to leave comments or provide feedback.

export default class AnalyticsApplicationCustomizer
  extends BaseApplicationCustomizer<IAnalyticsApplicationCustomizerProperties> {

  private isInitialLoad = true;

  private getFreshCurrentPage(): string {
    return window.location.pathname + window.location.search;
  }


  private navigatedEvent(): void {

    let trackingID: string = this.properties.trackingID;
    if (!trackingID) {
      Log.info(LOG_SOURCE, `${strings.MissingID}`);
    } else {

      if (this.isInitialLoad) {
        this.initialNavigatedEvent(trackingID);
        this.isInitialLoad = false;

      }
      else {
        this.partialNavigatedEvent(trackingID);
      }
    }
  }

  private initialNavigatedEvent(trackingID: string): void {

    console.log("Tracking full page load...");

    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}');
        `);
  }

  private partialNavigatedEvent(trackingID: string): void {

    console.log("Tracking partial page load...");

    eval(`
        if(ga) {
          ga('create', '${trackingID}', 'auto');
          ga('set', 'page', '${this.getFreshCurrentPage()}');
          ga('send', 'pageview');
        }
        `);
  }

  @override
  public onInit(): Promise<void> {

    this.context.application.navigatedEvent.add(this, this.navigatedEvent);

    return Promise.resolve();
  }
}
Advertisements

8 thoughts on “Add Google Analytics to SharePoint modern pages

  1. Hi – Do you find that this is tracking pages reliably for you? I’ve been battling this situation for a while now and had arrived at pretty much the same code as you, but I still can’t get it behaving properly because of the double-post bug (which apparently is being fixed soon, but I’m not sure when). Using your code, the first page load tracks correctly, but clicking to a 2nd page doesn’t fire at all. Clicking to a 3rd page fires the code, but the page url it tracks is for the 2nd page. After a bit of clicking around it seems to somehow catch up with itself and it starts tracking the correct urls, but the behaviour for the first few page clicks is driving me mad!

    Like

    1. Hi, yes it was working reliability when I wrote the article, so I assume it is till the case. It was tracking full and partial page loads correctly, and only one page hit was being registered, not two. I have tested the double post bug last week and it was still happening… really hope that a fix for this is available soon.

      Like

    1. Hi Rod,

      Sorry the late reply…
      I have actually never checked this, but assume so as we are injecting a scrip tag on the page so we should be able to see it. You should also be able to see the script file being downloaded on the network tag within the browser dev tools.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s