Blazor extensions for Analytics. Supported platforms: Google Analytics, GTAG, GTM and Facebook Pixel. AspNetCore Version: 5.0
https://www.nuget.org/packages/BlazorUniversalAnalytics/
https://github.com/welisonmenezes/blazor-universal-analytics
First, import the namespaces in _Imports.razor
@using BlazorUniversalAnalytics
@using BlazorUniversalAnalytics.BUA
Then, add the BUANavigationTracker
component below your Router in App.razor
.
The tracker listens to every navigation change while it's rendered on a page.
<Router ... />
+ <BUANavigationTracker />
Inside your main Startup
/Program
, call AddBUA
. This will configure your GTAG_ID automatically.
+ builder.Services.AddBUA("YOUR_GTAG_ID", "YOUR_FBPIXEL_ID", null);
If YOUR_GTM_ID is set, YOUR_GTAG_ID and YOUR_FBPIXEL_ID will be ignored as GTM will manage this for you. Pageview events will be heard if the embed of such scripts exists. Example:
builder.Services.AddBUA(null, null, "YOUR_GTM_ID");
See below an example:
@page "/counter"
@using Demo.Shared
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Inject]
protected IBUA Analytics { get; set; }
private WeatherForecast SampleData = new WeatherForecast
{
Date = DateTime.Now,
TemperatureC = 30,
Summary = "It's a hot day"
};
private void IncrementCount()
{
currentCount++;
// IMPORTANT: The object SampleDate are used below just as an example.
// You must to check the correct object properties on respective Analytic tool you are using.
// Google Analytics
//Analytics.TrackEventGtag("event-name", "event-value", "event-category", "event-label");
//Analytics.TrackEventGtag("event-name", SampleData);
// Facebook
//Analytics.TrackEventFacebookPixel("event-name", SampleData);
// Google Tag Manager
//Analytics.TrackEventGTM("event-name", SampleData);
}
}