Add support for more generic events #33 (#34)

* Make it possible to track custom event

* Update ReadMe with new event tracking.

Author: ErikHen

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).
+<br>Or<br>
+ 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

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});
     }
 }

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});
     }
 }

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);
     }
 }

src/Blazor.Analytics/Blazor.Analytics.csproj

@@ -38,7 +38,7 @@
 
     <!-- TypeScript Build -->
     <ItemGroup>
-        <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.0.2">
+        <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.2.4">
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
             <PrivateAssets>all</PrivateAssets>
         </PackageReference>

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<string>(
                 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);
         }
     }
 }

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}`);
         }
     }
 }