Blazor
Add OnyxMetric analytics to your Blazor app
Where the tag goes depends on the hosting model: a Blazor Web App keeps its <head> in Components/App.razor, standalone WebAssembly in wwwroot/index.html, and Blazor Server on .NET 7 or earlier in Pages/_Host.cshtml.
Copy your tracking snippet
In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>YOUR_SITE_ID is the numeric ID of your site.
Add the snippet to Blazor
App.razor renders on the server, so it can read the ID from appsettings.json:
{ "OnyxMetric": { "SiteId": "YOUR_SITE_ID" } }@inject IConfiguration Configuration
@{
var onyxSiteId = Configuration["OnyxMetric:SiteId"];
}
<head>
<meta charset="utf-8" />
<base href="/" />
<HeadOutlet />
@if (!string.IsNullOrEmpty(onyxSiteId))
{
<script src="https://app.onyxmetric.com/api/script.js?siteId=@onyxSiteId" async></script>
}
</head>Override per environment with appsettings.Production.json or the variable OnyxMetric__SiteId.
wwwroot/index.html is a static file, so paste the tag straight into <head>:
<head>
<base href="/" />
<link rel="stylesheet" href="css/app.css" />
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>The site ID is visible in the page source on every platform, so a fixed value is fine here.
Add the OnyxMetric section to appsettings.json as in the first tab, then edit Pages/_Host.cshtml (or Pages/_Layout.cshtml in .NET 6 projects):
@page "/"
@inject IConfiguration Configuration
@{
var onyxSiteId = Configuration["OnyxMetric:SiteId"];
}
<head>
<base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
@if (!string.IsNullOrEmpty(onyxSiteId))
{
<script src="https://app.onyxmetric.com/api/script.js?siteId=@onyxSiteId" async></script>
}
</head>Blazor's router, NavigationManager.NavigateTo, and enhanced navigation all change the URL through the History API, so route changes are recorded as pageviews with no extra code.
Check that it works
Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.
If nothing arrives:
- View the page source and search for
script.js?siteId=to confirm the tag is present. - In the browser's Network tab, check that
script.jsreturns200and that requests go to/api/track. - Turn off ad blockers, or proxy the script through your own domain.
- Read script troubleshooting for other causes.
Troubleshooting
- Tag missing in a Blazor Web App:
App.razorreads server configuration. Check theappsettingsfile for the activeASPNETCORE_ENVIRONMENT; environment variables win over files. - WebAssembly PWA: the service worker caches
index.html, so visitors only get the new tag after you republish and the worker updates. - Content Security Policy: if you set one, allow
app.onyxmetric.cominscript-srcandconnect-src, or proxy the script through your own domain.
Next steps
- Track custom events such as signups, purchases, and clicks.
- Identify users to tie sessions to accounts.
- Proxy the script through your own domain to get past ad blockers.
- Script attributes let you skip or mask URLs and tag events.