Blazor Analytics #4483

mikermnv · 2026-01-26T15:42:57Z

mikermnv
Jan 26, 2026

Since the Fluent UI demo site is open source, I can view the source code and briefly check the parts related to Google Analytics and Microsoft Clarity. However, I cannot find any implementation that manually tracks user navigation.

So, my first question is: does it actually work correctly and track all user navigation events?
Also, as I understand, the demo site uses an older structure of a Blazor project.

My second question is about implementing analytics functionality in a standard Blazor web app with auto render mode.
What should I add to the default template to implement the analytics functionality similar to what the demo site has?

As I understand:

First of all, I need to add functionality similar to the demo, with cookie preferences.
This is implemented as a bunch of files in the folder Cookies (https://github.com/microsoft/fluentui-blazor/tree/f11be437332d09f51b3c553efd45229b31961114/examples/Demo/Shared/Components/Cookies).
I should also should register the following services in both the client and server projects:
```
services.AddScoped<CookieConsentService>();
```
Finally, I should add the CookieConsent component to MainLayout.

@*MainLayout.razor*@

<CookieConsent />
<div>
    <FluentLayout>
        <FluentHeader>
              @**@
        </FluentHeader>

        <FluentStack Class="body-stack" Orientation="Orientation.Horizontal" Width="100%" HorizontalGap="0">
            @* navmenu and body *@
        </FluentStack>

        <FluentFooter>
            @**@
        </FluentFooter>
    </FluentLayout>
</div>

So, the Router.razor looks like

<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
            <Authorizing>
                <p>Authorizing...</p>
            </Authorizing>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

and App.razor looks like

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<base href="/" />
	<ResourcePreloader />
	<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.css"]" />
	<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
	<link rel="stylesheet" href="@Assets["app.css"]" />
	<link rel="stylesheet" href="@Assets["App.Web.styles.css"]" />
	<ImportMap />
	<link rel="icon" type="image/png" href="favicon.png" />
	<HeadOutlet />
</head>

<body>
	<Routes />
	<ReconnectModal />
	<script src="_framework/blazor.web.js"></script>
	<script src="@Assets["Components/Account/Shared/PasskeySubmit.razor.js"]" type="module"></script>
</body>

</html>

Question:
Will this setup work as expected, or how should I properly implement a navigation tracker, since many people on the internet say it is necessary?
Also, where should I place Cookies folder (which project: client ot 3 shared project)? If shared, then which type of this project should be used so?

vnbaaij · 2026-01-26T17:19:12Z

vnbaaij
Jan 26, 2026
Maintainer

So, my first question is: does it actually work correctly and track all user navigation events?

We only use the standard functionality offered by those scripts, which does enough for our needs

Also, as I understand, the demo site uses an older structure of a Blazor project.

Don't see the relevance of that in relation to your question

My second question is about implementing analytics functionality in a standard Blazor web app with auto render mode.
What should I add to the default template to implement the analytics functionality similar to what the demo site has?

Yes, your code sums it up globally. Have not checked each and every step of course. But again, this is what we need and is by no means the way of implementing this.

1 reply

mikermnv Jan 26, 2026
Author

@vnbaaij Thank you for your response.
I use the Fluent UI Blazor library and decided to look into DevTools to see how analytics is implemented there. I noticed the scripts for analytics and then checked how it was set up, since open source projects for analytics integration are hard to find or sometimes do not exist at all. Therefore, I decided to rely on your solution for this task.

One of the key aspects of your approach is that analytics is already combined with user cookie preferences. That is why I started studying the project structure of the demo Fluent UI site. The way the project is organized (specifically the template structure) was unfamiliar to me, which led to my question.

It is not entirely clear to me how I can integrate your solution into a standard Blazor web app with render-mode=auto. It is worth noting that the Shared assembly is an RCL project, and many parts are moved out of the standard Server and Client projects into the Shared project. For example, components like MainLayout, App, and Router are located there, and the Server project does not even reference the Client project directly.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blazor Analytics #4483

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Blazor Analytics #4483

Uh oh!

Uh oh!

mikermnv Jan 26, 2026

As I understand:

Replies: 1 comment · 1 reply

Uh oh!

vnbaaij Jan 26, 2026 Maintainer

Uh oh!

mikermnv Jan 26, 2026 Author

mikermnv
Jan 26, 2026

Replies: 1 comment 1 reply

vnbaaij
Jan 26, 2026
Maintainer

mikermnv Jan 26, 2026
Author