こんにちは、香田です。
Google アナリティクスをサイトに導入しており、ログイン機能を提供しているサイトの場合、User-ID機能を使うと分析の幅が広がりメリットが多々あります。
ただし、User-ID機能を利用する場合トラッキングコードを修正する必要があるので、開発者以外の方には若干ハードルが高いのではないでしょうか。
今回、そのハードルを多少さげる目的として、User-ID機能を組み込むトラッキングコードの設定例と実際どういったデータが送信されるかを紹介しようかと思います。
Google アナリティクスのUser-ID 機能とは
まずはじめにUser-ID 機能について簡単に説明しておきます。
Google アナリティクスのUser-ID 機能は、サイトの認証システムなどで発行される一意のIDをUser-IDに設定することで、ノートパソコンやスマートフォンといった複数のデバイスやセッションをまたいで識別する仕組みになります。
User-ID用のレポートビューやクロスデバイスレポートを利用でき、認証システムを経由してログインしたユーザーの行動ログをより的確に把握することができます。
User-ID 機能のトラッキングコード 設定例
Google アナリティクス側で設定するUser-IDの設定方法は下記のドキュメントより確認できます。
トラッキングコードの設定方法は各サイトによって実装方法は異なりますが、一意のIDを取得しトラッキングコードに設定する流れは基本同じなので、ここではその流れを紹介していきます。
今回サンプルとしてユーザを登録しログイン、ログオフのみできるデモサイトを用意しました。こちらのデモサイトをローカルで起動し検証しています。
デモサイトはPython用の軽量なWebフレームワークであるFlaskのTutorialを元に作成しています。
今回デモサイトに設置しているトラッキングコードは下記のような内容です。
トラッキングコードの一部で、Flaskで利用されているテンプレートエンジンJinja2を利用しています。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
{% if g.user %}
gtag('set', { 'user_id': '{{ g.user['id'] }}'});
{% endif %}
gtag('config', 'UA-xxxxxxxx-x');
</script>上記のトラッキングコード{% if g.user %} 〜 {% endif %}の箇所で、ユーザーの状態をチェックし登録済みのユーザーの場合、gtagのuser_idに値がセットされ、Google アナリティクスにデータが送信されます。
補足として、gtag('set', {'user_id': 'USER_ID'})の設定は、gtag('config', 'UA-xxxxxxxx-x');より上に定義しないとデータは送信されないので注意してください。
ユーザー登録とログイン
デモサイトにユーザーを登録し、ログイン後にIDがUser-IDにセットされGoogle アナリティクスに送信される流れをみていきます。
下記でdemo1というユーザーを作成します。
ログインすると下記のようにIDとユーザ名を表示させています。
Google Analytics Debuggerで確認
Chromeの拡張機能で提供されているGoogle Analytics Debuggerを使用し、データが送信されているか確認します。
下記のようにuserIdの箇所にIDがセットされ、送信されているのが確認できます。
Google アナリティクスでUser IDレポートが有効になったビューも見てみると、データが送信されたことが確認できます。
さいごに
User-ID 機能のトラッキンコード設定例いかがでしたでしょうか？
User-IDで一意のIDを設定する場合やカスタムディメンションに独自の値を設定する等、バックエンドのアプリケーションからデータを取得し設定する流れは多々あると思います。
設定方法や仕組みを知っていると、カスタムディメンションで値を増やし分析の幅を増やすきっかけになるのではないでしょうか。
最後までご覧頂きありがとうございます!