GoogleAnalytics.Blazor

Blazor extensions for Google Analytics

Forked from Blazor-Analytics, itself MIT License, Copyright (c) 2019 Ivan Sanz Carasa.

Developed by Material-Blazor.

---

---

Configuration

All Projects

First, import the namespaces in _Imports.razor

+@using GoogleAnalytics.Blazor

Then, add the GBAnchor component to the end of App.razor.

+<GBAnchor/>

ServerSide Specific Configuration

Edit _Layout.cshtml:

<scriptsrc="_framework/blazor.server.js"></script>
+ <scriptsrc="_content/GoogleAnalytics.Blazor/googleanalytics.blazor.js"></script>

WebAssembly Specific Configuration

Edit index.html and apply the following change:

<scriptsrc="_framework/blazor.webassembly.js"></script>
+ <scriptsrc="_content/GoogleAnalytics.Blazor/googleanalytics.blazor.js"></script>

Setting up GoogleAnalytics

Inside Program.cs, call AddGBService. This will configure [YOUR_GTAG_ID] automatically. You can elect to omit the tag id and call SetTargetId from the service injected into a component or service at a later stage; this is helpful if for instance you need to run a back end query in order to determine the tag.

+builder.Services.AddGBService("[YOUR_GTAG_ID]");

You may wish to set additional config info and/or globally applicable event params (i.e. applied to every call to TrackEvent):

+builder.Services.AddGBService(+"[YOUR_GTAG_ID]",+additionalConfigInfo:newDictionary<string,object>()+{+{"user_id","[YOUR_USER_ID]"}+},+globalEventParams:newDictionary<string,object>()+{+{"user_id","YOUR_USER_ID"}+});

You can set all three of these items using IGBAnalyticsManager.SetTrackingId(), IGBAnalyticsManager.SetAdditionalConfigInfo() and IGBAnalyticsManager.SetGlobalEventParams() respectively, after having injected the IGBAnalyticsManager service into a component or another service (either scoped or transient).

How to trigger an Analytics Event

1. Inject IGBAnalyticsManager wherever you want to trigger the event.
2. Call IGBAnalyticsManager.TrackEvent passing the EventName and EventData (an object containing the event data).

Or

Call IGBAnalyticsManager.TrackEvent passing the EventName, Value and Category (optional).

@usingGoogleAnalytics.Blazor
@inject IGBAnalyticsManager AnalyticsManager
AnalyticsManager.TrackEvent("generate_lead",new{currency="USD",value=99.99});

How to disable tracking on any page

1. Inject IGBAnalyticsManager into a blazor component.

@usingGoogleAnalytics.Blazor
@inject IGBAnalyticsManager AnalyticsManager

2. Suppress tracking for just the current page.

protectedoverridevoidOnInitialized(){AnalyticsManager.SuppressNextPageHitTracking();}

3. Disable page tracking for the whole application.

protectedoverridevoidOnInitialized(){AnalyticsManager.DisableGlobalTracking();}

4. Re-enable page tracking for the whole application.

protectedoverridevoidOnInitialized(){AnalyticsManager.EnableGlobalTracking();}