This is a fork of Havit.Blazor.GoogleTagManager but without Havit.Core, since for Blazor WASM every byte counts. This library is trim friendly.
Blazor ServerSide or WASM
builder.Services.AddGoogleTagManager(options =>
{
options.GtmId = "GTM-XXXXXXX";
});After the package is added, you need to add the following in your _Imports.razor
@using Blazor.GoogleTagManager;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.
For general use case, please refer to google tutorials or any other learning materials.
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" });
}
}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
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}
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.
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.
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.