Firebase Analyticsを無料で導入｜Hexo / 静的サイトのユーザー行動計測手順

概要

本記事では、HexoブログにFirebase Analyticsを無料で導入する方法について解説していきます。

というのもGA4だけだとざっくりしたページビューしか見れず、「どのボタンを押したか」「どこで離脱したか」みたいな細かい行動が分からなくて困りますよね（- -;

そんなときFirebase Analyticsを入れておくと、無料でユーザー属性や詳細な操作データまで取れちゃいます。

ここではFirebaseプロジェクトの作成からCDN追加まで、画像付きで紹介していきます！
GitHub Pagesなど静的サイトでも問題なく使えるので、解析を強化したい方はぜひどうぞ。

それではやっていきましょう！

目次

環境

＜サーバ＞
GithubPages

＜ライブラリ＞
Hexo（静的HTML生成ツール）

基本的にはHTMLでの対応となりますので、どんな環境でも問題なく実装できると思います。

方法

firebaseのプロジェクトを作成する

＞下記URLにアクセス

下記URLを押下し、firebaseにアクセスします。
console.firebase.google.comFirebase コンソール

＞プロジェクト作成を押下

Firebaseプロジェクトを設定して開始を押下します。
プロジェクト作成

＞プロジェクト名を入れる

プロジェクト名を入力し、続行を押下
プロジェクト作成

＞Googleアナリティクスを有効にする

ナビ通りに手順を進めると、Googleアナリティクスの設定画面が表示されます。
このプロジェクトでGoogleアナリティクスを有効にするにチェックを入れて続行を押しましょう
プロジェクト作成

※その後表示されるGoogleアナリティクスの構成は下記のような感じ
プロジェクト作成

＞完了

下記のような画面が出ればプロジェクトの作成は完了
プロジェクト作成

サイトにCDNを追加する

＞プロジェクト設定を開く

設定マーク　→　プロジェクト設定を選択
プロジェクト作成

＞マイアプリからウェブを選択

全般　→　マイアプリ　→　ウェブを選択
プロジェクト作成

＞アプリのニックネームを選択

任意の名前でアプリのニックネームを登録
プロジェクト作成

＞CDNを取得

FirebaseSDKで<script>タグを使用するを選択し、コードを取得する
プロジェクト作成

＞htmlの一番下にCDNを追加

アナリティクスを取得したいhtmlの一番下に先ほど取得したCDNを追加する
プロジェクト作成

自分の場合、hexoを使用しているので、article.ejsにCDNを追加しました。

サイトをデプロイする

CDNを追加したHTMLをサーバにデプロイします。

私の場合は下記コマンドを使用してgithubPagesへのデプロイをしました。

コマンド

1
hexo clean; hexo g; hexo deploy;
push後しばらくしてgithubよりシークレットが含まれていると警告メールが来ました。 その場合は、GitHubを開き警告を解除しておきましょう。

確認

firebase Analyticsの設定が完了していること

サイトにアクセスし、アナリティクスが機能していることを確認する
Analytics Dashboardのアクティブユーザに人数が表示されればOKです。

プロジェクト作成

反映まで結構時間かかるかもしれません。 気長に待ちましょう！

firebase Analyticsでユーザの操作を確認

自分のサイトでユーザがどんな操作をしているかを確認する
Realtime Analyticsを確認すると
・どんな場所からアクセスされたのか
・どんな操作をしたのか
など色々と確認できます。

プロジェクト作成

ちなみに画像右上のGoogleアナリティクスで表示を選択するとさらに詳しい情報が見れます。 ここでは紹介しませんが、更に詳しい情報を知りたい方は見てみると面白いと思います。

締め

ユーザがどんな操作をしたのか結構気になってたので、簡単に実装できてよかったです！

HTMLにタグを追加するだけで実装できるのは便利ですね、
ユーザの操作まで見れるのは結構でかい！
しかも無料！！

大きいウェブサイトになれば需要を確認するのに役立つので、かなり便利そうです！

以上お疲れさまでした。

エンジニアリング
ブログ, エンジニアリング, firebase