Zenn
🙇‍♂️

GCP用の簡易Webビーコンの作成

2023/09/03に公開
Google Cloud
Google Cloud
tech

概要/アーキテクチャ

GTM等のサービス導入が出来ず、工数が極端に短い中でWebビーコンの作成をお願いされた際のGCP環境での対応について記載します。アイディアのキャッチアップとしてご参照ください。
メモ的な扱いになり、簡素な内容になっておりますので、ご了承ください。

利用しているサービスについて

  • Cloud Functions（第2世代）
  • Cloud Logging
    • ログルーター
      • ログシンク
        • BigQueryへの送信

各種設定

Cloud Functions

今回は、ランタイムをPython3.11で指定して作成します。

デフォルトのソースにCORSの記載を加えて「未認証の呼び出しを許可」してデプロイします。

import functions_framework

@functions_framework.http
def main(request):
    headers = {"Access-Control-Allow-Origin": "*"}
    return ("", 200, headers)

リクエスト用のURLの発行（LB等のネットワークコンポーネントまでのアクセス）を目的にしています。

Webビーコンの設置

Cloud Functionsで作成したファンクションのURLに対して、GETリクエストを送信するScriptを作成します。

ユニークユーザーの特定のため、「ローカルストレージを利用する仕組み」と「IDを生成する仕組み」をJSで導入します。

ユニークユーザーIDの生成の仕組みについては、UUIDv4など様々な方法があると思いますので、こちらの記事では一旦"test"の文字列に置換しております。

最終的にファンクションのURLに対して、ユニークユーザーIDとURLをエンコードしたものをクエリパラメータに指定してリクエストを送信します。

<script>
    // ユーザーのLocalStorageに特定の項目があるか確認と取得
    function getUuid() {
        var a = localStorage.getItem("uuid");
        a || ((a = generateUUID()), localStorage.setItem("uuid", a));
        return a;
    }
    // UUID文字列の生成(今回はテスト)
    function generateUUID() {
        return "test";
    }
    var uuid = getUuid();
    var currentUrl = window.location.href;
    var query = "https://<Cloud Functionsで発行されたURL>?user_id\x3d" + uuid + "\x26target_page\x3d" + encodeURIComponent(currentUrl);
    fetch(query);
</script>

Cloud Loggingのログルーター シンク設定

Cloud Functionsでリクエストを受け取るとCloud Loggingでリクエスト元の情報が含まれるログが取得できるので、ログルーターを設定してBigQueryで確認できるようにします。

以下を対象にして、BigQueryに送信するログルーターのシンクを作成します。

(resource.type = "cloud_function"
resource.labels.function_name = "<発行したFunctions名>"
resource.labels.region = "asia-northeast1")
 OR 
(resource.type = "cloud_run_revision"
resource.labels.service_name = "<発行したFunctions名>"
resource.labels.location = "asia-northeast1")

severity>=DEFAULT

httpRequest.requestMethod="GET"

提供までの作業（依頼された内容）は以上で、最終的に（追加で）BigQueryでURLデコード・パーサーを含むView作成し、データを閲覧できる状態にしました。

そのほか・技術選定について

今回、以下の制約があったため、Cloud Functions・Logging ログルーター(BigQuery)を利用する形になりました。

  • 以下情報を取得し、BigQueryで確認できる
    • ユニークユーザーID（独自指定）
    • デバイスタイプ
    • ブラウザタイプ
    • リファラ
    • ビーコン設置ページURL
  • 残り3日以内に実装が完了し結合できる
  • GCP内のサービスのみ利用可能（GTM等のサービスは利用できない）
  • リアルタイム性（アクセスから5分以内に確認できる）がある

また選定にあたって以下のサービスの利用も検討されました

  • GCSの公開バケットと使用状況ログの利用（https://cloud.google.com/storage/docs/access-logs?hl=ja）
    • 初動の確認が可能なのが1日経過後になり、短期的な対応には不向きと判断しました
    • 15分ごとの更新になり、リアルタイム性の許容に含まれなかったため除外しています
  • GTM/GA4の利用
    • 他の部が管理しており、編集権限の申請や検証など日数が必要になり期日に間に合わないと判断しました

特に制約がなく、継続的な利用やタグの更新・より具体的な分析に利用する場合はGTM/GA4の利用を推奨します。

テスト内容（動作観点）については、以下となっています。

  • 以下の環境（開発者の保有するデバイス）で取得対象のデータは取れているか
    • 主要ブラウザ（chrome/safari/TWやInstagram）からアクセス
    • 主要デバイス（Windows/Mac/Android/iOS）からのアクセス
    • 各種ブラウザのバージョンは考慮しません（大切ですが…）

Discussion