Zenn
🐈

AirリザーブのURLパラメータから予約種別を判定し、予約種別ごとの計測をする

2024/12/27に公開
JavaScript
tech

背景と目的

Airリザーブでの予約フローでは、URLパラメータschdlIdで予約種別を区別しています。このパラメータを利用して、予約種別ごとの計測を実現します。

実装の課題

  1. URLパラメータは入り口ページにのみ存在
  2. 予約フロー全体で予約種別を維持する必要性
  3. 複数の分析会社での同時計測への対応

解決策：JavaScriptによる実装

//airrsv_event_sender.js
(function() {
  function getReservationType() {
    try {
      //URLパラメータ取得
      var urlParams = new URLSearchParams(window.location.search);
      var airsvId = urlParams.get('schdlId');
      var airsvName;

      if (airsvId) {
        //予約種別の判定
        switch (airsvId) {
          case 's0000KA554':
            airsvName = 'kzinssie_guidance';
            break;
          case 's0000KBSA7':
            airsvName = 'kzinssie_onguide';
            break;
          //... 他の予約種別
        }
        
        //セッションストレージへ保存
        sessionStorage.setItem('st_airsvId', airsvId);
        sessionStorage.setItem('st_airsvName', airsvName);
      } else {
        //セッションストレージから読み取り
        airsvId = sessionStorage.getItem('st_airsvId');
        airsvName = sessionStorage.getItem('st_airsvName');
      }

      //GTM用データ送信
      if (airsvId && airsvName) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          'event': 'airrsv_data_ready',
          'dat_airsvId': airsvId,
          'dat_airsvName': airsvName
        });
      }
    } catch (error) {
      console.log('Error:', error);
    }
  }

  //DOM読み込み完了時に実行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', getReservationType);
  } else {
    getReservationType();
  }
})();

実装のポイント

  1. セッションストレージの活用
  • 入り口ページで予約種別を判定
  • フォーム全体で予約種別情報を維持
  1. データレイヤー送信
  • GTM用のデータを標準形式で送信
  • カスタムイベントで発火タイミングを制御
  1. 汎用性の確保
  • 測定ID非依存の実装
  • 複数社での同時計測に対応

導入手順

  1. スクリプトファイルの作成
  2. 全ページへの設置
  3. デバッグモードでの動作確認

スクリプトの機能と利点

主な機能

  • 予約種別の判定と保持
  • 全ページでのデータ送信
  • GTMでの計測トリガー制御

各社での計測が可能な理由

  • スクリプトは汎用的な実装（測定ID非依存）
  • データレイヤーを介した標準的なデータ送信
  • セッションストレージによるデータ維持

カスタムイベントの必要性

  1. 発火タイミングの制御
  • ページ読み込み時には予約種別が未確定
  • データ準備完了後に正確な値を送信
  1. 計測の確実性
  • 予約種別の判定完了を確認
  • 誤った値での計測を防止
  1. 複数社での同時計測
  • イベントベースで個別にトリガー制御
  • 各社のGTMで独立して計測設定が可能

この実装により、各分析会社は独自のGTMコンテナで予約種別ごとの計測が可能になります。

Discussion