{"id":15819715,"url":"https://github.com/scarletkuro/blazor.googletagmanager","last_synced_at":"2025-04-01T16:30:30.770Z","repository":{"id":39753971,"uuid":"493242679","full_name":"ScarletKuro/Blazor.GoogleTagManager","owner":"ScarletKuro","description":"Google Tag Manager implementation for Blazor","archived":false,"fork":false,"pushed_at":"2024-09-26T21:26:57.000Z","size":91,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-06T06:42:48.689Z","etag":null,"topics":["analytics","blazor","google","gtm","manager","tag"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ScarletKuro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-17T12:32:01.000Z","updated_at":"2024-09-26T21:27:01.000Z","dependencies_parsed_at":"2024-08-25T20:49:36.972Z","dependency_job_id":"0f312fc4-35c4-4b4c-9223-dd1a9762ccae","html_url":"https://github.com/ScarletKuro/Blazor.GoogleTagManager","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletKuro%2FBlazor.GoogleTagManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletKuro%2FBlazor.GoogleTagManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletKuro%2FBlazor.GoogleTagManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletKuro%2FBlazor.GoogleTagManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScarletKuro","download_url":"https://codeload.github.com/ScarletKuro/Blazor.GoogleTagManager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246620222,"owners_count":20806722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","blazor","google","gtm","manager","tag"],"created_at":"2024-10-05T06:42:52.460Z","updated_at":"2025-04-01T16:30:30.489Z","avatar_url":"https://github.com/ScarletKuro.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![google tag manager logo](https://i.imgur.com/IOdiEbN.png) Blazor.GoogleTagManager\n[![Nuget](https://img.shields.io/nuget/v/Blazor.GoogleTagManager?color=ff4081\u0026logo=nuget)](https://www.nuget.org/packages/Blazor.GoogleTagManager/)\n[![Nuget](https://img.shields.io/nuget/dt/Blazor.GoogleTagManager?color=ff4081\u0026label=nuget%20downloads\u0026logo=nuget)](https://www.nuget.org/packages/Blazor.GoogleTagManager/)\n[![GitHub](https://img.shields.io/github/license/ScarletKuro/Blazor.GoogleTagManager?color=594ae2\u0026logo=github)](https://github.com/ScarletKuro/Blazor.GoogleTagManager/blob/main/LICENSE)\n\nThis is a fork of [Havit.Blazor.GoogleTagManager](https://github.com/havit/Havit.Blazor/tree/master/Havit.Blazor.GoogleTagManager) but without Havit.Core, since for Blazor WASM every byte counts.\nThis library is trim friendly.\n\n## 🎉 Release Notes\n### [Changelog](https://github.com/ScarletKuro/Blazor.GoogleTagManager/blob/main/CHANGELOG.md)\n\n## 🚀Getting Started\n### Register Services\nBlazor ServerSide or WASM\n```CSharp\nbuilder.Services.AddGoogleTagManager(options =\u003e\n{\n      options.GtmId = \"GTM-XXXXXXX\";\n});\n```\n\n### Add Imports\nAfter the package is added, you need to add the following in your **_Imports.razor**\n```CSharp\n@using Blazor.GoogleTagManager;\n```\n\n### Add Components\nAdd the following component to your **MainLayout.razor**\n```HTML\n\u003cGoogleTagManagerPageViewTracker /\u003e\n```\n**NB!** There is no need to add `_content/Blazor.GoogleTagManager/GoogleTagManager.js` in indedx.html / _Host.cshtml, the script is imported automatically. \n\n## 📜Sample Usage\nFor general use case, please refer to [google tutorials](https://support.google.com/tagmanager/answer/6103696?hl=en) or any other learning materials.\n\n### Manual push\nOnly if you need to trigger custom events from the code.\n\nIn the razor component\n```CSharp\n@inject IGoogleTagManager GoogleTagManager;\n\n\u003cbutton @onclick=\"OnButtonClick\"\u003eClick\u003c/button\u003e\n\n@code {\n  private async Task OnButtonClick(){\n      await GoogleTagManager.PushAsync(new { @event = \"button_click_sample_event\" });\n  }\n}\n```\n\n## ⚙️Additional Settings\n### Attributes\nYou can add attributes, this can be useful for cookie consent\n```CSharp\nbuilder.Services.AddGoogleTagManager(options =\u003e\n{\n      options.GtmId = \"GTM-XXXXXXX\";\n      options.Attributes = new Dictionary\u003cstring, string\u003e\n      {\n            { \"data-consent-category\", \"google\" }\n      };\n});\n```\nthen in your script you will see following\n```HTML\n\u003cscript async src=\"https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX\" data-consent-category=\"google\"\u003e\u003c/script\u003e\n```\nOther useful links for consent settings: [link1](https://support.google.com/tagmanager/answer/10718549) [link2](https://developers.google.com/tag-platform/tag-manager/templates/consent-apis)\n### Debug to console\nYou can enable debugging to the browser console. This helps to see whatever the library is initialized properly.\n\nKeep 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](https://tagmanager.google.com/). For the rest, please, use this [debug](#debugging-your-google-tag-manager) section.\n```CSharp\nbuilder.Services.AddGoogleTagManager(options =\u003e\n{\n      options.GtmId = \"GTM-XXXXXXX\";\n      options.DebugToConsole = true;\n});\n```\nExample output\n```\n[GTM]: Configured with GtmId = GTM-XXXXXXX\n[GTM]:{\"pageUrl\":\"https://localhost:5001/\",\"event\":\"virtualPageView\"}\n[GTM]:{\"isNavigationIntercepted\":\"True\",\"pageUrl\":\"https://localhost:5001/counter\",\"event\":\"virtualPageView\",\"gtm.uniqueEventId\":14}\n[GTM]:{\"event\":\"button_click_sample_event\",\"gtm.uniqueEventId\":16}\n[GTM]:{\"event\":\"button_click_sample_event\",\"gtm.uniqueEventId\":17}\n```\n**⚠️NB!** Do not use this option in production.\n\n## 📢Troubleshooting\nIf 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.\n\nTry to use [console](#debug-to-console) and other [tools](#debugging-your-google-tag-manager) 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.\n\n### Debugging your Google Tag Manager\nThere is [debug](https://support.google.com/tagmanager/answer/6107056?hl=en) / [tag assistant](https://tagassistant.google.com/) feature for Google Tag Manager that will always help you to debug your triggers and show that your GTM is hooked up properly.\n\n## 📌Limitations / Not Supported Scenarios\nThere is no support for the [Content Security Policy](https://developers.google.com/tag-platform/tag-manager/web/csp) out of the box, as that would require additional JavaScript modification.\nThere is also no support for [renaming](https://developers.google.com/tag-platform/tag-manager/web/datalayer#tag-manager) the dataLayer object for the Google Tag Manager.\n\nHowever, starting from version **3.0.0**, you can disable automatic script import by setting `ImportJsAutomatically = false` via `GoogleTagManagerOptions`:\n```CSharp\nbuilder.Services.AddGoogleTagManager(options =\u003e { options.GtmId = \"GTM-XXXXXXX\"; options.ImportJsAutomatically = false; });\n```\nAnd manually import your own script using a `\u003cscript\u003e` 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.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletkuro%2Fblazor.googletagmanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscarletkuro%2Fblazor.googletagmanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletkuro%2Fblazor.googletagmanager/lists"}