Blazor.GoogleTagManager 1.0.0

Blazor.GoogleTagManager

This is a fork of Havit.Blazor.GoogleTagManager but without Havit.Core, since for Blazor WASM every byte counts.

Getting Started

Register Services

Blazor ServerSide or WASM

builder.Services.AddGoogleTagManager(options =>
{
      options.GtmId = "GTM-XXXXXXX";
});

Add Imports

After the package is added, you need to add the following in your _Imports.razor

@using Blazor.GoogleTagManager;

Add Components

Add the following components to your MainLayout.razor

<GoogleTagManagerPageViewTracker />

Sample Usage

Manual Push

In the razor component

@inject IGoogleTagManager GoogleTagManager;

<button @onclick="OnButtonClick">Click</button>

@code {
  private async Task OnButtonClick(){
      await GoogleTagManager.PushAsync(new { @event = "button_click_sample_event" });
  }
}

Additional Settings

You can add attributes, this can be useful for cookien consent

builder.Services.AddGoogleTagManager(options =>
{
      options.GtmId = "GTM-XXXXXXX";
      options.Attributes = new Dictionary<string, string>
      {
            { "data-consent-category", "google" }
      };
});

then in your scrip you will see following

<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX" data-consent-category="google"></script>