From 1c27223ec7321c68901ce1a3d18d355dcc3731e3 Mon Sep 17 00:00:00 2001 From: Erik Henningson Date: Wed, 12 May 2021 11:38:06 +0200 Subject: [PATCH] Add support for more generic events #33 (#34) * Make it possible to track custom event * Update ReadMe with new event tracking. --- README.md | 10 ++++++++- .../DemoApp.Client/Pages/Counter.razor | 3 +++ .../DemoApp.Server/Pages/Counter.razor | 5 ++++- .../Abstractions/IAnalytics.cs | 1 + src/Blazor.Analytics/Blazor.Analytics.csproj | 2 +- .../GoogleAnalyticsStrategy.cs | 22 ++++++++++++++----- .../Resources/GoogleAnalyticsInterop.ts | 8 +++---- 7 files changed, 38 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 0ae1f05..72776b9 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,15 @@ Inside your main `Startup`/`Program`, call `AddGoogleAnalytics`. This will confi # How to trigger an Analytics Event 1. Inject `IAnalytics` wherever you want to trigger the event. -2. Call `IAnalytics.TrackEvent` passing the `EventName`, `Value` and `Category` (optional). +2. Call `IAnalytics.TrackEvent` passing the `EventName` and `EventData` (an object containing the event data). +
Or
+ Call `IAnalytics.TrackEvent` passing the `EventName`, `Value` and `Category` (optional). + +``` +@inject Blazor.Analytics.IAnalytics Analytics + +Analytics.TrackEvent("generate_lead", new {currency = "USD", value = 99.99}); +``` # Changelog ### v3.1.0 diff --git a/demo/DemoApp/DemoApp.Client/Pages/Counter.razor b/demo/DemoApp/DemoApp.Client/Pages/Counter.razor index 52d5dfd..0d5550c 100644 --- a/demo/DemoApp/DemoApp.Client/Pages/Counter.razor +++ b/demo/DemoApp/DemoApp.Client/Pages/Counter.razor @@ -16,5 +16,8 @@ { currentCount++; Analytics.TrackEvent("Increment", currentCount, "CountPage"); + + //Example of how to track a generic event (see also https://developers.google.com/gtagjs/reference/ga4-events) + Analytics.TrackEvent("generate_lead", new {currency = "USD", value = 99.99}); } } diff --git a/demo/DemoApp/DemoApp.Server/Pages/Counter.razor b/demo/DemoApp/DemoApp.Server/Pages/Counter.razor index 5e7b311..099cf9e 100644 --- a/demo/DemoApp/DemoApp.Server/Pages/Counter.razor +++ b/demo/DemoApp/DemoApp.Server/Pages/Counter.razor @@ -15,6 +15,9 @@ private void IncrementCount() { currentCount++; - Analytics.TrackEvent("Increment", currentCount, "CountPage"); + //Analytics.TrackEvent("Increment", currentCount, "CountPage"); + + //Example of how to track a generic event (see also https://developers.google.com/gtagjs/reference/ga4-events) + Analytics.TrackEvent("generate_lead", new {currency = "USD", value = currentCount}); } } diff --git a/src/Blazor.Analytics/Abstractions/IAnalytics.cs b/src/Blazor.Analytics/Abstractions/IAnalytics.cs index ca4460a..635e926 100644 --- a/src/Blazor.Analytics/Abstractions/IAnalytics.cs +++ b/src/Blazor.Analytics/Abstractions/IAnalytics.cs @@ -10,5 +10,6 @@ public interface IAnalytics Task TrackEvent(string eventName, string eventCategory = null, string eventLabel = null, int? eventValue = null); Task TrackEvent(string eventName, int eventValue, string eventCategory = null, string eventLabel = null); + Task TrackEvent(string eventName, object eventData); } } diff --git a/src/Blazor.Analytics/Blazor.Analytics.csproj b/src/Blazor.Analytics/Blazor.Analytics.csproj index bc8fafe..7cfccee 100644 --- a/src/Blazor.Analytics/Blazor.Analytics.csproj +++ b/src/Blazor.Analytics/Blazor.Analytics.csproj @@ -38,7 +38,7 @@ - + runtime; build; native; contentfiles; analyzers; buildtransitive all diff --git a/src/Blazor.Analytics/GoogleAnalytics/GoogleAnalyticsStrategy.cs b/src/Blazor.Analytics/GoogleAnalytics/GoogleAnalyticsStrategy.cs index dd5245e..8de9f80 100644 --- a/src/Blazor.Analytics/GoogleAnalytics/GoogleAnalyticsStrategy.cs +++ b/src/Blazor.Analytics/GoogleAnalytics/GoogleAnalyticsStrategy.cs @@ -55,6 +55,21 @@ public async Task TrackEvent( string eventCategory = null, string eventLabel = null, int? eventValue = null) + { + await TrackEvent(eventName, new + { + event_category = eventCategory, + event_label = eventLabel, + value = eventValue + }); + } + + public Task TrackEvent(string eventName, int eventValue, string eventCategory = null, string eventLabel = null) + { + return TrackEvent (eventName, eventCategory, eventLabel, eventValue); + } + + public async Task TrackEvent(string eventName, object eventData) { if (!_isInitialized) { @@ -63,12 +78,7 @@ public async Task TrackEvent( await _jsRuntime.InvokeAsync( GoogleAnalyticsInterop.TrackEvent, - eventName, eventCategory, eventLabel, eventValue); - } - - public Task TrackEvent(string eventName, int eventValue, string eventCategory = null, string eventLabel = null) - { - return TrackEvent (eventName, eventCategory, eventLabel, eventValue); + eventName, eventData); } } } diff --git a/src/Blazor.Analytics/GoogleAnalytics/Resources/GoogleAnalyticsInterop.ts b/src/Blazor.Analytics/GoogleAnalytics/Resources/GoogleAnalyticsInterop.ts index 8a9e187..aae0dad 100644 --- a/src/Blazor.Analytics/GoogleAnalytics/Resources/GoogleAnalyticsInterop.ts +++ b/src/Blazor.Analytics/GoogleAnalytics/Resources/GoogleAnalyticsInterop.ts @@ -43,11 +43,11 @@ namespace GoogleAnalyticsInterop } } - export function trackEvent(eventName: string, eventCategory: string, eventLabel: string, eventValue: string) + export function trackEvent(eventName: string, eventData: object) { - gtag("event", eventName, { event_category: eventCategory, event_label: eventLabel, value: eventValue }); - if(this.debug){ - console.log(`[GTAG][Event triggered]: ${eventName}`); + gtag("event", eventName, eventData); + if (this.debug) { + console.log(`[GTAG][Event triggered]: ${eventName}`); } } }