この記事は elixir Advent Calendar 2021 の20日目です。昨日は @piacerex さんでした！
Phoenix 1.6.0から、 mix phx.new でPhoenixプロジェクトを作成すると LiveViewがデフォルトで有効 になりました 
LiveViewを知らない方のためにひとことで説明すると、「JSをほぼ書かずElixirだけでSPAを開発できるイカしたやつ」でしょうか。公式サイトで紹介されている動画（↓と同じもの）を見ると、LiveViewがどんなものなのか分かりやすいと思います。
私は普段LiveViewを使った開発に携わっていますが、LiveView界隈をウォッチしていてもGA（Google Analytics）に関する情報は特に流れてきません。Webアプリを世に出すならいろいろと計測したいものじゃないの…？
まあ、当たり前すぎて誰も話題にしないだけかもしれませんが、LiveViewは History API でページ遷移を行うので、GAを使うときは注意が必要です。というわけで、LiveViewでGAを使ってページビューを計測する方法を紹介します。
なお、LiveViewのバージョンは0.16.0以上を想定しています。
GA4（Google Analytics 4）を使う場合
GA4はSPAでもページビューを計測してくれるため、単にタグを埋め込むだけでOKです。
UA（ユニバーサルアナリティクス、従来のGA）を使う場合
新規プロジェクトならGA4を使えばOKですが、そうもいかないケースは多々あります。UAは単にタグを埋め込むだけだとSPAではページビューを計測してくれないため、ページ遷移を捕捉して明示的にイベントを送ってあげる必要があります。
まずはタグを埋め込みますが、その際にデフォルトのページビュー測定を無効化するようにします。
- gtag('config', 'UA-XXXXXXXXX-X');
+ gtag('config', 'UA-XXXXXXXXX-X', {
+ send_page_view: false
+ });
続いて、ページ遷移を捕捉してページビューのイベントをGAに送信します。LiveViewでは、ページのロード開始時に phx:page-loading-start 、ロード終了時に phx:page-loading-stop というイベントが発生しますが、Phoenixプロジェクトを作成した時点でこれらのイベントのイベントハンドラが設定されているので、その部分を書き換えます。
- window.addEventListener('phx:page-loading-stop', info => topbar.hide())
+ window.addEventListener('phx:page-loading-stop', info => {
+ if (['redirect', 'patch'].includes(info.detail.kind)) {
+ gtag('event', 'page_view', {
+ page_title: document.title,
+ page_location: location.href,
+ page_path: location.pathname
+ })
+ }
+ topbar.hide()
+ })
イベントハンドラが受け取る info.detail が持つ kind には4種類の値がありますが、ページ遷移を捕捉したい場合は redirect patch のみページビューのイベントをGAに送信すればOKです。
UA＋Googleタグマネージャを使う場合
タグマネージャを使いこなせる方なら分かりますよね、タグマネージャで設定しましょう（丸投げ）。
最後に
LiveViewはまだ発展途上なので、情報も豊富ではなく、特に本記事のようなLiveViewの実装に直結しない内容はまだあまり発信されていない印象です。これからLiveViewの本格的な採用事例も増えてくるでしょうし、LiveViewに限らずElixirコミュニティはものすごく盛り上がっているので、興味がある方は一緒に盛り上げていきましょう 
elixir.jp Slackの招待リンクです 
たぶん入れると思いますが、入れなかったら教えてください…
明日の「elixir Advent Calendar 2021」21日目は @MzRyuKa さんです！
お楽しみに 