Blazor.GoogleTagManager 3.0.0

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.

🎉 Release Notes

Changelog

🚀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 />

NB! There is no need to add _content/Blazor.GoogleTagManager/GoogleTagManager.js in indedx.html / _Host.cshtml, the script is imported automatically.

📜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

Attributes

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 script you will see following

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

Other useful links for consent settings: link1 link2

Debug to console

You can enable debugging to the browser console. This helps to see whatever the library is initialized properly.

Keep in mind that this will only output the events that is done by this library, it will not show the triggers that were configured in the Google Tag Manager Dashboard. For the rest, please, use this debug section.

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

Example output

[GTM]: Configured with GtmId = GTM-XXXXXXX
[GTM]:{"pageUrl":"https://localhost:5001/","event":"virtualPageView"}
[GTM]:{"isNavigationIntercepted":"True","pageUrl":"https://localhost:5001/counter","event":"virtualPageView","gtm.uniqueEventId":14}
[GTM]:{"event":"button_click_sample_event","gtm.uniqueEventId":16}
[GTM]:{"event":"button_click_sample_event","gtm.uniqueEventId":17}

⚠️NB! Do not use this option in production.

📢Troubleshooting

If nothing happens, even a simple pageview event, and you are sure you configured the library and Google Tag Manager correctly, then check if adblocker/firewall doesn't block the Google Tag Manager script. For example, AdGuard by default can remove tracking scripts.

Try to use console and other tools to make sure that the script(https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX) is present on the page and that you have access to dataLayer object.

Debugging your Google Tag Manager

There is debug / tag assistant feature for Google Tag Manager that will always help you to debug your triggers and show that your GTM is hooked up properly.

📌Limitations / Not Supported Scenarios

There is no support for the Content Security Policy out of the box, as that would require additional JavaScript modification. There is also no support for renaming the dataLayer object for the Google Tag Manager.

However, starting from version 3.0.0, you can disable automatic script import by setting ImportJsAutomatically = false via GoogleTagManagerOptions:

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

And manually import your own script using a <script> tag in index.html or App.razor. This allows you to add a nonce for CSP, rename the dataLayer, and modify the script however you want.