TECH PLAY

GA4

GA4 (Google Analytics 4)は、Googleによって提供されているGoogle Analyticsの新しいバージョンです。

GA4はより柔軟で拡張可能なデータ分析プラットフォームを提供し、Webマーケティング活動のパフォーマンスの評価と改善を支援することを目的としています。

さらにGA4は、Googleのマシンラーニングアルゴリズムを活用して、より詳細な分析と予測を提供することができます。
また、複数のデバイスでのトラッキングをサポートしており、モバイルアプリやデスクトップアプリなど、様々なタイプのデバイスを横断したトラッキングを行うことができます。
集計前の生データを取得することも可能であるため、Google BigQuery等と組み合わせることでより柔軟な分析も可能となります。

参考:
次世代のアナリティクスである Google アナリティクス 4(GA4)のご紹介 - アナリティクス ヘルプ

イベント

マガジン

該当するコンテンツが見つかりませんでした

技術ブログ

こんにちは。ワンキャリアでデータサイエンティストをしている申(シン)です。 普段は、社内のデータを用いた分析や、機械学習モデルの構築を通じて、ビジネスの意思決定支援を行っています。
G-gen の菊池です。当記事では、Looker で BigQuery のデータを可視化するための一連のフローを、スクリーンショット付きで解説します。BigQuery との接続から、LookML の自動生成と調整、Explore での可視化などを説明します。 はじめに 当記事について Looker、ビュー、Explore、モデル 構成図 BigQuery 側の準備 デモ用データセットの作成 サンプルデータの投入 接続用サービスアカウント(SA) の作成と権限付与 Looker の接続設定 BigQuery への接続(Connection)の作成 接続テストと設定の保存 LookML プロジェクトの作成(新規モデルの作成) プロジェクトページへ移動 データベース接続を選択 テーブルを選択する 主キーの選択 作成する Explore を選択する モデル名を入力 LookML の定義と調整 自動生成されたファイルの確認 ディメンションからメジャーへの修正 日付データの修正 変更のコミットと本番反映 Explore でデータを可視化してみる Explore 画面の操作 フィルターの使い方 ディメンションからメジャーへの修正をしなかった場合 日付データの修正をしなかった場合 はじめに 当記事について 当記事では、Looker でデータを可視化する際の一連のフローである「BigQuery との接続・認証」「LookML の作成」、そしてビジュアリゼーション作成を含む「Explore での可視化」について解説します。 Looker、ビュー、Explore、モデル Looker とは、エンタープライズ向けのデータプラットフォームです。開発者向けのセマンティックレイヤーとユーザー向けの BI ツールの両方の特徴を併せ持っています。 Looker 独自のモデリング言語である LookML を使用することで、分析対象のデータの構造とビジネスルールを定義するデータモデルを作成、管理できます。 Looker は、この LookML で定義されたデータモデルから自動的に SQL を生成します。そのため、SQL を知らないユーザーでも、直感的なインターフェースからデータを探索し、分析できます。 参考 : Looker 参考 : LookMLの紹介 Looker は、データベースのテーブルと1対1で紐づく「 ビュー 」、どのビューをユーザーに見せるか定義する「 Explore 」、どのデータベースに接続するか、どの Explore をユーザーに公開するか定義する「 モデル 」の3つの構造で成り立っています。 参考 : LookMLの用語と概念 これら3つの構成要素についての詳細は、以下の記事も参照してください。 blog.g-gen.co.jp 構成図 今回構成する Looker から BigQuery のテーブルを参照する環境は以下の通りです。 構成 BigQuery 側の準備 デモ用データセットの作成 以下の名前でデモ用のデータセットを作成します。 項目 設定値 データセット名 looker_demo_source サンプルデータの投入 BigQuery では、Google Merchandise Store (Google ブランドの商品を販売するオンラインストア)の Google アナリティクス 4 のデータがサンプルデータとして使用できます。今回はそのサンプルデータから以下の SQL の結果を取得して参照用のテーブルとします。 WITH UserData AS ( SELECT event_date AS date , user_pseudo_id, ( SELECT value.int_value FROM UNNEST(event_params) WHERE key = ' ga_session_id ' ) AS session_id, geo.country AS country, event_name, ( SELECT value.string_value FROM UNNEST(event_params) WHERE key = ' session_engaged ' ) AS session_engaged_flag, ( SELECT value.int_value FROM UNNEST(event_params) WHERE key = ' engagement_time_msec ' ) AS engagement_time_msec FROM `bigquery- public -data.ga4_obfuscated_sample_ecommerce.events_*` WHERE PARSE_DATE( ' %Y%m%d ' , _TABLE_SUFFIX) BETWEEN DATE ' 2021-01-01 ' AND DATE ' 2021-01-31 ' ) SELECT date , --日付 COUNT ( DISTINCT CASE WHEN session_engaged_flag = ' 1 ' THEN user_pseudo_id WHEN event_name = ' first_visit ' THEN user_pseudo_id WHEN engagement_time_msec > 0 THEN user_pseudo_id END ) AS active_users, --アクティブユーザー数 COUNT ( DISTINCT CASE WHEN event_name = ' first_visit ' THEN user_pseudo_id END ) AS new_users, --新規ユーザー数 COUNT ( DISTINCT CONCAT (user_pseudo_id, CAST (session_id AS STRING))) AS sessions, --セッション数 country, --国 FROM UserData GROUP BY date , country ORDER BY date このテーブルには 2021 年 1 月の日付、国ごとのアクティブユーザー数、新規ユーザー数、セッション数が含まれています。 列名 説明 date 日付 active_users アクティブユーザー数 new_users 新規ユーザー数 sessions セッション数 country 国 SELECT 文のクエリ結果は、[結果の保存]をクリックし、[ローカルへのダウンロード] > [ CSV ]を選択して保存します。 クエリ結果の保存 作成していたデータセット「looker_demo_source」の右側の三点リーダーをクリックし、[テーブルを作成]を選択します。 [テーブルを作成]画面では、以下のように設定して、[テーブルを作成]をクリックします。 項目 設定値 ソース > テーブルの作成元 アップロード ソース > ファイルを選択 ダウンロードした CSV ファイル ソース > ファイル形式 CSV 送信先 > プロジェクト 自身のプロジェクト 送信先 > データセット looker_demo_source 送信先 > テーブル ga4_daily_metrics_by_country スキーマ > 自動検出 チェックを入れる 詳細オプション > ヘッダー行のスキップ 1 接続用サービスアカウント(SA) の作成と権限付与 Looker が BigQuery データベースへのアクセスに使用する認証を構成します。 サービスアカウント作成 1.Google Cloud コンソールで[ API とサービス] > [認証情報]へ移動します。 2.[認証情報を作成] を選択し、[サービス アカウント] を選択します。 3.サービス アカウントの作成画面で以下を入力して、[作成して続行] を選択します。 項目 設定値 サービスアカウント名 looker-bq-connection-sa サービスアカウントID サービスアカウント名を入力すると自動で同じ値が入力される。 サービスアカウントの説明 Looker から BigQuery へのアクセス用 サービスアカウント作成画面 4.権限の設定画面で、[ロールを選択] フィールドで以下のロールを選択します。2つ目以降も[別のロールを追加] を選択して、同じようにロールを選択します。 BigQuery > BigQuery データ編集者 BigQuery > BigQuery ジョブユーザー サービスアカウントの権限設定画面 サービスアカウントの権限設定 5.[続行] を選択して [完了] を選択します。 サービス アカウントの認証を構成 1.[認証情報] ページで、新しく作成したサービス アカウントのメールを選択します。 サービスアカウントの選択 2.サービス アカウントの詳細画面で[鍵]タブを選択し、[キーを追加] のプルダウンから [新しいキーを作成] を選択します。 サービスアカウントに新しいキーを作成 3.[キーのタイプ] で [JSON] を選択し、[作成] を選択します。 キーのタイプを選択 4.秘密鍵(JSON ファイル)がコンピュータに保存されるので、ダウンロード先をメモしてから[閉じる]をクリックします。 秘密鍵のダウンロード 鍵を再度ダウンロードすることはできないため、ここで忘れずに保存先をメモしておきます。 Looker の接続設定 BigQuery への接続(Connection)の作成 1.以下の 2 つの方法のいずれかで、[データベースを Looker に接続] ページを開きます。 [管理者] パネルの [データベース] セクションで [接続] を選択します。[接続(Connections)]ページで、[接続を追加(Add Connection)] ボタンをクリックします。 管理者パネルから接続ページへ メイン ナビゲーション パネルの [作成] ボタンをクリックし、[接続] メニュー項目を選択します。 メインパネルの作成から接続ページへ 2.全般設定の画面で以下の通りに設定し、[次へ]をクリックします。 項目 設定値 名前 conn-ga4-daily-demo SQL 言語(SQL Dialect) [Google BigQuery Standard SQL]を選択 プロジェクトの範囲 [すべてのプロジェクト]をチェック 全般設定 3.データベース設定の画面で以下の通りに設定します。 項目 設定値 課金プロジェクト ID データセットを作成したプロジェクトのID ストレージ プロジェクト ID なし プライマリ データセット looker_demo_source データベース設定 4.認証の設定で以下の通りに設定し、[次へ]をクリックします。 項目 設定値 認証方法 [サービスアカウント]を選択 サービスアカウント証明書 ダウンロードしていた秘密鍵(JSONファイル)を指定 認証の設定 5.オプションの設定で以下の通りに設定し、[次へ]をクリックします。 項目 設定値 ノードあたりの最大接続数 30 接続プールのタイムアウト 120 この接続に関する同時実行クエリの最大数 200 この接続に関するユーザーあたりの同時実行クエリの最大数 25 最大課金ギガバイト数 なし その他の JDBC パラメータ なし メンテナンス スケジュール なし コンテキストの無効化 選択 SSL 選択 テーブルと列を事前にキャッシュに保存 選択 スキーマを取得してキャッシュに保存 選択 PDT を有効にする オフ データベースのタイムゾーン Asia - Tokyo クエリのタイムゾーン Asia - Tokyo オプションの設定(1) オプションの設定(2) オプションの設定(3) 接続テストと設定の保存 6.接続の該当するフィールドをすべて入力したら、必要に応じて接続をテストを実施します。 接続テスト 7.[次へ]をクリックして、接続設定の確認をしたら、[保存]をクリックします。 接続の保存 LookML プロジェクトの作成(新規モデルの作成) プロジェクトページへ移動 1.Development Mode(開発モード)になっていることを確認し、ナビゲーション パネルの [開発] セクションから、[プロジェクト] を選択します。 開発パネルからプロジェクトページへ 2.[LookML プロジェクト] ページで、[New Model] をクリックします。 プロジェクトページ データベース接続を選択 3.[データベース接続を選択]画面で以下の通り設定して、[次へ]をクリックします。 項目 設定値 データベース接続 conn-ga4-daily-demo LookML Project Name proj_ga4_analysis データベース接続を選択 テーブルを選択する 4.[テーブルを選択する]画面で、Looker で接続するプロジェクトとデータセットを選択し、右側の[Tables]をクリックします。 項目 設定値 GCPプロジェクト データセットが存在する Google Cloud プロジェクト データセット looker_demo_source GCP プロジェクトとデータセット選択 5.選択したデータセットに存在するテーブルの一覧が表示されるので、以下のテーブルを選択します。その他のオプションはデフォルトのままで[次へ]をクリックします。 項目 設定値 テーブル ga4_daily_metrics_by_country テーブルの選択 主キーの選択 6.[主キーの選択]画面では、テーブルを適切に結合するための主キーを設定します。この手順は省略可能です。今回は主キーは不要なので何も選択せずに[次へ]をクリックします。 主キーの選択 作成する Explore を選択する 7.[作成する Explore を選択する]画面では、Explore のビューとして使用するテーブルを選択します。テーブル「ga4_daily_metrics_by_country」の横にあるチェックボックスを選択して、[次へ]をクリックします。 作成する Explore を選択 モデル名を入力 8.[モデル名を入力]画面で以下のモデル名を入力して、[完了してモデルを表示]ボタンをクリックします。 項目 設定値 モデル名 ga4_daily_demo モデル名を入力 以上の手順で、LookMLプロジェクトとモデルが作成され、Looker IDE(統合開発環境)が開かれます。 Looker IDE 参考 : モデルの生成 LookML の定義と調整 自動生成されたファイルの確認 直前の処理から遷移した Looker IDE 画面へは、メイン ナビゲーション メニューの [開発] パネルからもアクセスできます。ナビゲーション メニューで [開発] を選択して、[開発] パネルを開きます。 [開発] パネルでプロジェクトの一覧が表示されるので、アクセスするプロジェクトの名前を選択します。「プロジェクトを検索」欄にプロジェクト名の一部を入れることで、簡単に探し出すことができます。 プロジェクトへ移動 Looker IDE 画面 遷移した Looker IDE 画面の左側にある「①IDE ナビゲーション バー」から「ファイルブラウザ」を選択します。すると、②機能パネルにファイルブラウザが表示されます。 ファイルブラウザでファイルを選択すると、③IDE エディタパネルに選択したファイルの内容が表示されます。 ファイルブラウザには2種類のファイルが既に作成されています。これらは、モデルを作成する際に選択したテーブルの定義を元に作成されたファイルです。 作成されたファイル views フォルダにある「ga4_daily_metrics_by_country.view」というファイルは、Looker のビュー(View)を定義するファイルです。データベースのテーブル「ga4_daily_metrics_by_country」と1対1で対応しおり、テーブル内の各列を定義します。 ビューファイル models フォルダにある「ga4-daily-demo.model」というファイルは、Looker のモデルを定義するファイルです。 このファイルでは、 explore パラメータを使用して Explore(エクスプロア)が定義されています。ユーザーが UI 上で見る「データ探索(Explore)」画面の元となる定義です。モデルファイルは、どのデータベースに接続するか、どの Explore をユーザーに公開するかを管理します。 モデルファイル 自動で生成されたモデルファイルとビューファイルは、この状態でも BigQuery のテーブルを BI として確認できる状態です。 しかし、自動生成されたファイルをそのまま使うのではなく、いくつか修正する必要があります。なぜ修正が必要かについては、データを可視化する部分で説明します。 ディメンションからメジャーへの修正 ビューファイルはテーブル内の各列をディメンションとメジャーとして定義します。ディメンションとは、日付や顧客名、商品カテゴリといったデータの属性や切り口を表します。メジャーとは、売上合計やユーザー数、平均年齢といった集計値や計算したい値を表します。 自動生成されたビューファイルでは、数値として表示したい列がディメンションとして定義されている場合があります。そのような列はメジャーに修正する必要があります。 以下の3つの数値列をディメンションからメジャーへ修正します。 物理名 論理名 active_users アクティブユーザー数 new_users 新規ユーザー数 sessions セッション数 修正箇所 修正前 修正後 dimension measure type: number type: sum メジャー(measure)への修正 日付データの修正 以下の列は日付のデータを YYYYMMDD 形式(例:2026年1月1日の場合、20260101)の数値で格納した列です。BigQuery でテーブルを作成する際、スキーマ自動検出にしていたため、数値の列として作成されました。 物理名 論理名 date イベント日 date 列を日付型として扱うために、以下のように修正します。 修正箇所 修正前 修正後 dimension dimension_group type: number type: time なし timeframes: [date, week, month, year, raw] なし datatype: yyyymmdd 日付型の定義 変更のコミットと本番反映 ファイルに変更点がある場合、以下のようにファイル名の右側に青い丸が付き、エディタパネルの右上に「Save Changes」ボタンが表示されます。 ファイルに変更点がある場合 Save Changes ボタン 「Save Changes」ボタンをクリックすると変更が保存され、画面右上にある Git ボタンが「Validate LookML」となります。 Git ボタン(Validate LookML) 画面右上にある Git ボタンは、プロジェクトの状態に応じて、プロジェクトを環境に反映するために必要なアクションが表示されます。 アクション 表示 LookML を検証 Validate LookML commit、ブランチをリモートに push Commit Changes & Push 本番環境にデプロイ Deploy to Production ファイルに変更点がある場合、Git ボタンは「Validate LookML」となり、それをクリックすることで変更内容にエラーがないか検証されます。 エラーがない場合、Git ボタンは「Commit Changes & Push」となり、画面右側のサイドパネルには LookML の検証結果が表示されます。 LookML の検証結果 「Commit Changes & Push」となっている Git ボタンをクリックすると、Commit 画面が表示されます。変更を反映するファイルにチェックを入れ、コミットメッセージを入力して [Commit] ボタンをクリックします。 Commit 画面 Commit と Push が行われると、Git ボタンは「Deploy to Production」と表示されます。 本番環境へデプロイ 「Deploy to Production」となっている Git ボタンをクリックすることで、変更内容が本番環境にデプロイされます。本番環境にデプロイされた変更内容は、Looker インスタンスを使用するユーザー全員が確認できます。 変更内容を作業者が確認するだけならば、「Deploy to Production」をクリックする手前までで充分です。 参考 : 開発モードと本稼働モード Explore でデータを可視化してみる Explore 画面の操作 ナビゲーション メニューで [Explore] を選択して、[Explore] パネルを開きます。Explore の一覧が表示されるので、アクセスする Explore の名前を選択します。 「Explore を検索」欄に Explore 名の一部を入れると、すぐに探しだすことができます。 Explore を開く Explore 画面が表示されます。左側の[すべてのフィールド]タブに一覧で表示されているフィールドから、グラフとして表示したいフィールドを選択していきます。 Explore の初期画面 フィールドの一覧から、以下のフィールドを順に選択していきます。Date フィールドについては、[Date Date] の左側にある▼マークをクリックすることで、Date、Month、Week、Yearというフィールドが展開されます。 Date Country Sessions Active Users New Users フィールドの選択 フィールドを選択すると右側にある [データ] パネルに選択したフィールドが追加されます。右上にある [実行] ボタンをクリックします。 データパネル 選択したフィールドのデータが取得されます。「行数上限に達しました。結果の一部が表示されない可能性があります。」というメッセージが表示されることがあります。右上にある「行数上限」が 500 になっていますが、取得したデータが500行以上ある場合にこのメッセージが表示されます。 全てのデータを表示したい場合は、行数上限の値を取得データの行数より大きい値(例 : 5000)のようにして、[実行] ボタンを再度クリックします。 [ビジュアリゼーション] パネルの左側にある▼マークをクリックすると、[ビジュアリゼーション] パネルが表示されます。 ビジュアリゼーションパネルの展開 今回は、Country フィールドに国名のデータがあったため、Google マップのビジュアリゼーションが自動で選ばれました。 ここから、ビジュアリゼーションを表(テーブル)形式へ変更する場合は、ビジュアリゼーションパネルにあるテーブルのマークをクリックします。 ビジュアリゼーションの変更 テーブル形式のビジュアリゼーション テーブルの Country フィールドを見ると、数値の他にデータの値を表す水平棒グラフのビジュアリゼーションが表示されています。 セルのビジュアリゼーション このビジュアリゼーションが不要な場合は、ビジュアリゼーションタブの右側にある [編集] タブをクリックします。 表示されたパネルの [系列] タブを選択し、[カスタマイズ] で Sessions を展開し、「セルのビジュアリゼーション」をオフにします。 セルのビジュアリゼーションをオフにする セルのビジュアリゼーションなし 参考 : Explore の作成と編集 参考 : Looker での Explore の表示と操作 参考 : セルのビジュアリゼーション フィルターの使い方 フィールドの値を絞り込みたい場合は、フィルタを追加します。フィルタの追加方法は以下の2通りです。 左側のフィールド一覧で、フィールド名の右側にある [フィールドでフィルタ] を選択します。 [データ] パネルの [結果] タブで、フィールドの見出しにある歯車を選択し、[フィルタ] を選択します。 フィルタの追加方法 [フィルタ] パネルが開き、選択したフィールドのフィルタが表示されます。フィルタの値を指定するには、「任意の値」の欄をクリックします。 フィルタする値の選択箇所 値の一覧が表示されるので、フィルタに使用する値を選択します。 フィルタの値の選択 [実行] ボタンをクリックすることで、[ビジュアリゼーション] パネルの表が、フィルタで指定した値で絞り込みされます。 フィルタの結果 フィルタ方法を「次を含む」や「次で始まる」などに変更する場合は、「任意の値」欄の左側で選択します。 フィルタ方法の変更 参考 : データのフィルタリングと制限 ディメンションからメジャーへの修正をしなかった場合 LookML の定義と調整の手順で数値の列を、ディメンションからメジャーへ修正していました。 メジャーにした列は以下のような挙動になります。 Country : Albaniaでフィルタした場合の結果は、以下の通りです。 Countryでフィルタした結果 ここで、DateフィールドをMonthフィールドに変えた場合、フィルタした国の1ヶ月の数値として集計された結果になります。 月単位の集計結果 ディメンションとメジャーの挙動の違いを確認するため、active_users を dimension に変えて、反映してみます。 active_usersをディメンションにした場合 1ヶ月の集計結果は以下の図の通り、3行になってしまいます。 active_usersをディメンションにした結果 これは、active_users がディメンションであることにより、集計対象の数値ではなく、数字の1、2、3で分類する項目とみなされるようになったためです。意図した集計結果を出すためには、集計したい列をメジャーとして定義する必要があることがわかります。 日付データの修正をしなかった場合 date 列の元となった Google アナリティクス4のデータの event_date 列は日付を YYYYMMDD 形式で表示した文字列でした。 そして、その列から作成したサンプルデータの date 列は自動でスキーマを読み取った際に数字データとして取り込まれました。 そのため、生成されたままの date 列の定義では、数字のディメンションとして読み取られます。 修正する前の date 列の定義 date列の定義を修正しない場合 ここで、タイプによる挙動の違いを確認するため、date フィールドの type を string(文字列)に変えてみます。この状態では、日付データとしては認識されないことがわかります。 date 列を type:string に修正 type を string に修正した date 列 菊池 健太 (記事一覧) クラウドソリューション部データエンジニアリング課。2024年7月より、G-genに入社。群馬出身のエンジニア。前職でLookerの使用経験はあるが、GCPは未経験なので現在勉強中。
はじめに こんにちは、ビジネスdアプリ開発チームの露口・德原です。 これまでモバイル端末向けに展開してきた「ビジネスdアプリ」の社内報機能に、PCブラウザ版が加わりました。本記事では、その社内報PCブラウザ版の開発についてご紹介します。 ビジネスdアプリについては過去の記事をご覧ください。 ・ サーバレスをフル活用したビジネスdアプリのアーキテクチャ(前編) ・ サーバレスをフル活用したビジネスdアプリのアーキテクチャ(後編) 目次 はじめに 目次 社内報機能の概要 主な機能の紹介 リソースを最小限に抑える2つの工夫 フロントエンド:CSS(@media)によるレスポンシブ対応への一本化 バックエンド:既存APIレスポンスに合わせたUI設計 GTMによるログ分離の実装 グラフィカルユーザーインターフェース(GUI)による迅速なタグ管理 高精度なトリガー条件の設定 プレビュー機能 デバイス判定と分析の仕組み 終わりに 社内報機能の概要 ビジネスdアプリの「社内報」は、管理者から従業員へタイムリーな情報共有ができる社内周知用サービスです。単なる掲示板ではなく、従業員に確実に情報を届けて閲覧状況を確認するための機能を備えています。 (画像はPCブラウザ版のものです) 主な機能の紹介 プッシュ通知機能(通知はモバイルアプリ版のみ) 閲覧状況の確認 リマインド機能(通知はモバイルアプリ版のみ) タスクの完了確認 その他にも記事のソート・フィルター機能、公開期限の設定、詳細な権限管理など、投稿管理に欠かせない機能を網羅しています。 今回のPCブラウザ版リリースで、記事を投稿する際はPCを利用し、受け取る側は状況に合わせてPCやモバイル端末で確認するといった事ができるようになりました。 本記事では、主にPCブラウザ版の開発についてご紹介します。 リソースを最小限に抑える2つの工夫 すでに運用していたモバイルアプリ版の社内報に加え、PCブラウザ版を開発するにあたって「いかに新規リソースを作らずに実現するか」という観点でUI/UXの設計しました。 具体的なアプローチは以下の2点です。 フロントエンド:CSS(@media)によるレスポンシブ対応への一本化 1つめの工夫は、PCブラウザ版専用のコードを極力作らないという点です。 通常、PCブラウザ版とモバイルアプリ版でUIが大きく異なる場合、コードを分けることも検討されますが、今回は元々あったモバイルアプリ版(WebView)のコードをベースに開発を進めました。 具体的には、画面サイズに応じて制御するCSSのメディアクエリ(@media)を採用しました。 共通コンポーネントの活用: ベースとなる構造はモバイルアプリ版と共有。 表示の制御: PCブラウザの画面幅を検知し、CSSで上書き調整。 これにより、ロジック部分は基本的に共通化し、スタイル定義の追加中心でPCブラウザ対応を実現しました。 バックエンド:既存APIレスポンスに合わせたUI設計 2つめの工夫は、APIサーバー等のバックエンドリソースもモバイルアプリと共有したことです。 社内報は元々モバイルアプリの1つの機能であり、モバイルアプリでの表示を前提としたAPIを作成していました。このAPIのレスポンスをそのまま活かせるUIをPCブラウザ版でも採用するというアプローチをとりました。 これにより、バックエンド側の開発工数を抑えることができました。 GTMによるログ分離の実装 今回のPCブラウザ版リリースにあたって、モバイルアプリ版と分けてログを収集するため、新たにGoogle Tag Manager(GTM)をベースとした行動ログ収集基盤を構築しました。 Google Tag Manager導入にあたって以下3点のメリットがありました。 グラフィカルユーザーインターフェース(GUI)による迅速なタグ管理 通常、Google Analytics 4(GA4)のイベントを追加・変更するにはソースコードの修正とデプロイが必要ですが、GTMなら管理画面(GUI)上でタグの設定が可能です。例えば開発者以外のサービス企画やマーケティング担当者も、タグの設定(追加・変更・削除)を管理画面(GUI)上で行う事が可能になります。 高精度なトリガー条件の設定 ページ単位の計測はもちろん、特定のURL、ボタンのクリック要素、フォームの送信など、細かな条件を開発不要で設定可能です。 プレビュー機能 ブラウザ上で実際に操作しながら、「どのタグがどのタイミングで発火したか」をリアルタイムでデバッグできます。検証時間を短くする事が可能になります。 デバイス判定と分析の仕組み モバイルアプリ(WebView)版とPCブラウザ版のログを正確に識別するため、以下のロジックを実装しています。 モバイルアプリ版かPCブラウザ版かの判定は、モバイルアプリ内のWebViewコンポーネントかどうかで判断し、 WebViewコンポーネントではない(=PCブラウザ等である)と判断された場合にPCブラウザ版の行動ログを送信しています。 収集したデータはBigQueryへエクスポートし、分析しています。以下のフィールドを組み合わせて参照することで、モバイルアプリ版かPCブラウザ版かの行動情報を切り分けています。 device.category: 端末の種類(mobile, desktopなど) device.web_info.browser: 利用されているブラウザの種類 GTMを中心とした基盤構築し、モバイルアプリ版とのログ分離を実現しました。これにより運用・検証コスト削減にも繋がっています。 終わりに スマホとPC、どちらでも利用できるビジネスdアプリの社内報の開発についてご紹介しましたが、いかがでしたでしょうか。 私たちはこれからも、ビジネスの現場をより便利に変えていくサービスや機能の開発にチャレンジしていきたいと思います。 これからもビジネスdアプリをよろしくお願いいたします。 ※ 私たちが開発しているビジネスdアプリに興味を持った方は、是非 公式ページ をご覧ください。 今回ご紹介した社内報やその他の機能について、私たちが開発している機能一覧が記載されています。

動画

該当するコンテンツが見つかりませんでした

書籍