Blazor.GoogleTagManager 1.0.1

Blazor.GoogleTagManager

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

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 component to your MainLayout.razor

<GoogleTagManagerPageViewTracker />

Sample Usage

For general use case please refer to google tutorials or any other learning materials.

Manual Push

Only if you need to trigger custom events from the code.

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 cookie 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>

Not Supported Scenarios

There is no support for the Content Security Policy out of the box as that would require additional JavaScript moddification.