This library adds a simple way to integrate Google Analytics in your Blazor WASM/Serverside app. Make your integration of Google Analytics GDPR compliant by using our BytexDigital.Blazor.Components.CookieConsent library.
Install-Package BytexDigital.Blazor.Components.GoogleAnalytics.NET >= 5.0
Beneath
</Router>add
<BytexDigital.Blazor.Components.GoogleAnalytics.NavigationAnalyticsTracker />Add the following call with your desired settings.
builder.Services.AddGoogleAnalytics(options =>
{
options.TrackingId = "G-YOUR_ID";
options.AutomaticallyInitialize = true;
options.AutomaticallyEnableTracking = true;
});Inside your index.html/_Host.cshtml, add the required JS include where you see fit.
<script src="_content/BytexDigital.Blazor.Components.GoogleAnalytics/Analytics.js"></script>Usage together with BytexDigital.Blazor.Components.CookieConsent
Using BytexDigital.Blazor.Components.CookieConsent, you can easily make the usage of Google Analytics in your app GDPR compliant by delaying initialization of Google Analytics until user consent for tracking has been given.
To enable this scenario, you should first disable automatic initialization:
builder.Services.AddGoogleAnalytics(options =>
{
options.TrackingId = "G-YOUR_ID";
options.AutomaticallyInitialize = false; // Disabled
options.AutomaticallyEnableTracking = true;
});After installing the CookieConsent library and following it's installation instructions, you can add a "Google Analytics" category, which the user has to give consent to for Google Analytics to load and start tracking user behaviour on the website.
The category could be added as follows with the name analytics:
builder.Services.AddCookieConsent(o =>
{
// .. Other non related configuration omitted
//
o.Categories.Add(new CookieCategory
{
Identifier = "analytics", // Unique name for this category
IsPreselected = false, // In a GDPR compliant scenario, non-essential categories may not be preselected, hence, this has to be false.
TitleText = new Dictionary<string, string>
{
["en"] = "Analytics"
},
DescriptionText = new Dictionary<string, string>
{
["en"] = "Allows the integration and usage of Google Analytics to track user behavior on our website."
},
Services = new List<CookieCategoryService>
{
new()
{
Identifier = "analytics",
PolicyUrl = "https://policies.google.com/privacy",
TitleText = new Dictionary<string, string>
{
["en"] = "Google Analytics"
},
ShowPolicyText = new Dictionary<string, string>
{
["en"] = "Show policy"
}
}
}
});
});Inside your App.razor, you can now listen for the CookieConsent library to broadcast the event that the user has changed his cookie preferences and use the given preferences to determine whether the GoogleAnalytics library can now initialize and begin tracking, for example as follows:
// Prior RazorHMTL content of your App.razor
@code {
[Inject]
public GoogleAnalyticsService GoogleAnalyticsService { get; set; }
[Inject]
public CookieConsentService CookieConsentService { get; set; }
protected override void OnInitialized()
{
// Subscribe to the CookiePreferencesChanged event so we can react to given consent.
CookieConsentService.CookiePreferencesChanged += async (sender, preferences) => await OnPreferencesChangedAsync();
}
protected async Task OnPreferencesChangedAsync()
{
// Fetch the now active cookie preferences.
var preferences = await CookieConsentService.GetPreferencesAsync();
if (preferences.AllowedServices.Contains("analytics"))
{
// If analytics are allowed by user consent, initialize GoogleAnalytics.
await GoogleAnalyticsService.InitializeAsync(default);
}
}
}Click to expand!
- Initial release
This library contains code from the following sources.
/*
https://github.com/isc30/blazor-analytics
MIT License
Copyright (c) 2019 Ivan Sanz Carasa
*/