背景と目的

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

実装の課題

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

解決策：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();
  }
})();

実装のポイント

セッションストレージの活用

入り口ページで予約種別を判定
フォーム全体で予約種別情報を維持

データレイヤー送信

GTM用のデータを標準形式で送信
カスタムイベントで発火タイミングを制御

汎用性の確保

測定ID非依存の実装
複数社での同時計測に対応

導入手順

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

スクリプトの機能と利点

主な機能

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

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

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

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

発火タイミングの制御

ページ読み込み時には予約種別が未確定
データ準備完了後に正確な値を送信

計測の確実性

予約種別の判定完了を確認
誤った値での計測を防止

複数社での同時計測

イベントベースで個別にトリガー制御
各社のGTMで独立して計測設定が可能

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