Microsoft 365 Community SharePoint, 29 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build SPFx extension to track SharePoint usage with Google Analytics

Description

📺 In this 12 minute developer-focused demo, Samir Daoudi walks us through the steps necessary to track SharePoint usage with Google Analytics: Create the Google Analytics property to get the tracking ID, scaffold an #SPFx project, Overwrite the OnInit property to inject the Google Analytics script, bundle and package the SPKKG solution and upload it to App Catalogue to let it shine!

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Demo Presenter
• Samir Daoudi (LogiSam) | @daoudi_samir

📖 Learn more
• Microsoft Viva - https://www.microsoft.com/en-us/microsoft-viva
• Overview of Viva Connections - https://learn.microsoft.com/en-us/viva/connections/viva-connections-overview
• Overview of Viva Connections Extensibility - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
• SharePoint Framework 1.18 preview release notes - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

Sharepoint usage using Google analytics, obviously you get some analytics with the SharePoint in terms of page page view is very, very limited analytics, but if you want to take it to the next level and uh leverage Google analytics within your SharePoint uh tenant, you can you can use spfx and today the demo will be around creating spfx solution, which is an application customizer. The role of this spfx solution is to inject the Google analytics code in your uh in your tenant, so it can be either to specific site or all the SharePoint sites. So.

A

um I'm uh yeah, my name is Samuel I'm Power, Platform architect, I've been working with SharePoint for a long time before that I was a more Pro developer. A.Net developer and um yeah I spent um most of my time working with Microsoft Technology, so um I try to blog uh regularly. So you can hit me on Twitter LinkedIn or follow me on my blog. There is also a blog post about what we will see today. uh So if I'm going uh too fast, you can go back to to my blog and review the steps.

A

um So in terms of the agenda or the the steps for today, uh we will first create Google analytics property uh to track the usage of our SharePoint sites. Next, we will use your man generator to scaffold in spfx solution. uh We will override it on any function of our spfx solution, our application uh customizer. So it's going to be an extension uh where we will just uh inject some some code in the on in it and we'll bundle ship, the spfx solution and add it to the SharePoint app catalog um right.

A

So I'm gonna switch to my VM to do that. uh First, we're gonna create a folder for our solution. So, let's call this uh uh SP Google, Analytics I will call human generator to do that.

A

Entire move templates I have only the SharePoint template, which is more than enough for today, um the solution name, you can go with a SP Google analytics. It is an extension not to report, so the users won't see anything and the uh the type of the client-side extension is an application customizer.

A

You can give it a more user-friendly name it and we can wait for human generator to discover the solution, while it's doing that, I will switch uh uh to Google analytics just to create the property. So here I'm in my Google analytics dashboard and you can have different accounts, different properties so for today's demo, I'm going to create a new property and let's call this um I, don't know demo SP give it some information here.

A

Need these, but they are mandatory, so we have to to go buy it, though so, let's say the business side this morning and the target is get Baseline reports. Okay, now we created our property and we have three different types of collecting data. If you can have, you can use the web platform Android app or an IOS app. Obviously we go with web platform for SharePoint usage. It asks you for a website. This will be our SharePoint tenant, okay and the screen name.

A

This is just the internal name just to identify the property you are looking at. So we call this stream.

A

Basically, this is all we need from Google analytics site. There is no additional configuration or endpoints or anything like that, and, to be more precise, the only information we need is the measurement ID previously called tracking ID, so we're going to leave it as it is. Let's switch back to uh our VM and see. How are we doing here? This may take a couple of minutes so.

A

I will see if I can show you.

A

um I think I had sorry I think I had uh another place where about the old.

A

So I created a solution before this, because the the scaffolding may take a long time and uh it has the spgi demo I've not done anything with that. It's.

A

That's my product, so it's exactly the same uh just to avoid waiting uh forever for scaffolding. To finish so, we will open this nvs squad. um I assume you already have a SharePoint framework development environment. If not, there are plenty of uh articles about that. You will find one in learned of microsoft.com with all the prerequisite um uh node.js called Yeoman the different generators, uh but um I hope you have a VMware. You can play with it. So now, I will open this uh uh project in in vs code or your preferred code.

A

Editor, the structure of foreign.

A

Of our code, I think you most of you are familiar with with the structure. Basically, you have the source. You can have different extensions here. We look at the extension here, but if you have read before you have some manifest or Json file, where you can change the description, the name of your extension, if you look at the uh the uh the extension itself, uh basically we have this on init property, and this is what runs when the um the uh the application is enabled in our tenant.

A

uh I will work with around this property uh this uh this function here, sorry um just to avoid wasting your time. I'm gonna go back to my um my blog, and um if you look here, the idea is um we're gonna, we're gonna store the tracking ID in an environment uh in our code and if you have usual analytics in the past, you may be familiar with with this part, but basically we create an element of type JavaScript.

A

uh The source of this script is coming from Google tag manager, and we will append this um after that itself. Just before uh the body section of the document, um I will copy everything.

A

Let's switch back to our code here and we pass this this part. Obviously all we need to change here is the tracking ID I will switch back to my measurement ID or track an ID. We can copy this value and this is why I identifies the property that we have just created, um because we have removed the predefined on init segment. So there are a couple of things that we may not need here, um I'm going to comment them for now.

A

That's pretty much it that's all we need to do. You can change the description, uh change some details about your application customizer, but uh for the timing, that's more than enough I will switch back to my terminal, and here we will do.

A

Basically, this is equivalent of saying compile my solution.

A

It may take a couple of seconds to do that.

A

All right so once it's on, we can populate the solution, so we're gonna, say gold bucket solution and.

A

Firstly, the adoption shape so basically, this will create a DOT SP packaging file within SharePoint folder and that's what we need to uh to upload to our SharePoint internet. So to do that, we need to go to SharePoint admin Center and we navigate to the app catalog. So from the the SharePoint admin Center, you go to more features and you have the app catalog here.

A

I, don't think I have anything in this tenant. um Let's, let's have a look yeah, just the Microsoft Internet pathway. So uh what.

A

You can do from here, you can just. Let me reveal this. This file.

A

Hello, I think I.

A

Basically, what we need to do here is to drag and drop the um the SP package you file into our uh app catalog in the SharePoint Talent.

A

All right so uh once we do that, we have the option of say, enable this uh custom application on all our sites. uh I mean across the tenant or you can just enable this application and you will have to go to the different um different sites and add the application individually. It's up to you so for today's demo, I'm gonna say enable this up across my tenant, so any site any traffic. Any um any details about the SharePoint usage will be captured by Google analytics within that within that tenant.

A

So I will enable the app all right. So my app has been enabled, as you can see, uh spj demo client-side solution enabled, and it's added to all all Sites perfect now I think I have a demo site.

A

So if, uh if I switch back to Google, Analytics and I will look at my property- okay, that's fine, it just says: sometimes it takes uh 48 hours to for the property to start capturing information, but um yeah I'm sure we can. We can start looking at this, so I can go to the different reports.

A

You can look at the report snapshot if you want to to see historical data or you can look at the real-time real-time data now I will and start navigating in my SharePoint uh site, just as um as I would expect any users to do. um I will open a couple of pages. Let's say customization instruction a week in life.

A

And here you go so at the moment in real time you have one user who's, an Edinburgh attributes, my location- and these are the page we are navigating to different events- have been captured, like page view, first visit scroll and so on.

A

um Obviously you can customize your your report and uh in Google analytics or you can pull this data back into Power bi and combine it with other information and other systems and uses data as you want, but so far, that's it under 10 minutes we created the application, created the property injected, the application, the app catalog, and we started to get some feed in Google analytics from SharePoint.

A

That's it for me over to you guys, foreign.