Blazor WebAssembly のアプリに Google Analytics を導入

やっぱりアクセス状況を知りたい

Blazor WebAssemblyで開発して公開しているマークシートシステム Mark2 には2種類の利用形態があります。

ひとつは私が関連している大学や企業等のプロジェクトで利用している場合で、いつ頃に利用する予定があるのか、私の方でも多少は把握できています。利用することがわかっている時期には大きなアップデートを避けるなど、開発やメンテナンスのスケジュールを調整していました。

もうひとつは無料のマークシートシステムをインターネットでさがして Mark2 を見つけ、 Mark2 テンプレートを利用している場合です。こちらの場合は私のほうでは利用状況を把握していなくて、問い合わせをいただいた際に利用されていることを知ることになります。

2022年頃から問い合わせが増えてきたように思います。 Mark2 は自治体や学校で利用されることが多く、自治体や学校がよく利用する時期などの傾向もあるかと思います。今後の運用のためにアクセス状況は把握しておこうと思いました。

Google Analytics を導入

Perplexity に聞いて、作業していきます。

Google Analytics にプロパティを追加して、 G-XXXXXXXXXX の ID を取得します。

wwwroot/index.html の編集

</head> の直前に以下のコードを追加します。

wwwroot/index.html

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

‎App.razor の編集

Mark2 はトップページのみのアプリなので wwwroot/index.html を変更すれば完了なのですが、画面遷移のための変更もしておきました。

App.razor

+ @inject IJSRuntime JSRuntime
+ 
- <Router AppAssembly="@typeof(App).Assembly">
+ <Router AppAssembly="@typeof(App).Assembly" OnNavigateAsync="OnNavigateAsync">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </LayoutView>
    </NotFound>
</Router>

+ @code {
+     private async Task OnNavigateAsync(Microsoft.AspNetCore.Components.Routing.NavigationContext args)
+     {
+         await JSRuntime.InvokeVoidAsync("gtag", "config", "G-XXXXXXXXXX", new { page_path = args.Path });
+     }
+ }

動作確認

Google Analytics でアクセスを確認することができました。

アクセス状況を考慮して Mark2 の開発やメンテナンスを進めていきたいと思います。