Blazor SSR の拡張ナビゲーション
Blazor は、C# でフルスタック Web アプリケーションを実装可能とするフレームワークです。その実行形態のひとつである Blazor SSR (Server-side Static Rendering mode) は、基本的な動作機序は、ブラウザ上でのスクリプトを使用しない古典的な MPA です。しかしながら、一般的な Blazor SSR では、少量のサポート用 JavaScript を読み込むよう構成されており、この JavaScript が "拡張ナビゲーション" と呼ばれる、いわゆる "PJAX"、Turbo link 的な動作を実現しています。
すなわち、ページ上の <a> 要素のクリックなどを、この JavaScript コードが捕捉し、ブラウザによるページ遷移はキャンセルして、代わりにその JavaScript コードが遷移先ページの HTML を fetch、DOM ツリーに適用する、というものです。ページを構成する HTML こそサーバーで生成されているものの、ページ遷移の動きは、いわゆる SPA っぽい動作になっていますよね。
拡張ナビゲーションによるページ遷移は Google Analytics に計測されるのか実験
さてここで、そのよような Blazor SSR サイトに Google Analytics を導入した場合、その Blazor SSR サイト上でのページ遷移操作は、Google Analytics 上で検知・認識されるのか、気になったので実験してみました。
対象の Blazor SSR サイトは下記です。
このサイトはトップページでは米国シアトルの観光スポットを一覧表示しており、その一覧をクリックすることで各スポットの詳細ページに遷移する、という Blazor SSR です。(註: プログラムの動作説明用に作った簡潔なデモサイトなので、"観光スポットを一覧表示" といってもたかだか 3 件ですので、内容には期待しないでください)
Google Analytics 上で新たなプロパティを用意し、インストールガイドに従って、以下のように Google tag の JavaScript コードを、対象の Blazor SSR アプリに設置します。
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Google tag (gtag.js) -->
<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>
...
この状態でしばし対象の Blazor SSR サイト上でページ遷移を繰り返したあと、Google Analytics のレポートを確認してみたところ、ちゃんと、渡り歩いた各ページ別に、タイトルや訪問回数が計測されていました。
改めて Google Analytics での設定を確認してみると、ブラウザの履歴イベントを監視してページビューを計測するように設定されていました。
Blazor SSR の拡張ナビゲーションは、ブラウザの History API を用いて、ページ遷移時のブラウザのアドレスバーに表示される URL の書き換えなどを行なっています。そのため、ブラウザの履歴イベントを監視している Google Analytics でも、期待どおり、Blazor SSR 上でのページビューを計測できているようです。
まとめ
拡張ナビゲーションが有効になっている Blazor SSR であっても、インストール手順どおりに Google Analytics を設置するだけで、とくにそれ以上何かすることなく、ちゃんとページごとの訪問回数が計測されていることが確認できました。
インターネット上の古い資料などでは、「SPA でのページ遷移時は、gtag('config', 'G-XXXXXXXXXX', { page_path: url }) を呼び出さないといけない」といった記述も見られます。たしかに、URL のアンカー (#~) で擬似的に SPA 内のページルーティングを表現していた時代はその必要があったことでしょう。しかし、History API を用いる現代の SPA と、既定でブラウザ履歴イベントを拾ってページビューを計測する Google Analytics では、どうやらそのような追加の措置は不要である模様でした。