# GA4設定手順書 ## 事前設定必須項目 * tripla Bookの設定が完了していること。 * サブドメインの設定がされていること。 {% content-ref url="../reserved-engine-settings/sub-domain-top/sub-domain" %} [sub-domain](https://docs.tripla.jp/reserved-engine-settings/sub-domain-top/sub-domain) {% endcontent-ref %} {% content-ref url="../reserved-engine-settings/sub-domain-top/sub-domain-deprecation" %} [sub-domain-deprecation](https://docs.tripla.jp/reserved-engine-settings/sub-domain-top/sub-domain-deprecation) {% endcontent-ref %} * Google Analytics4のアカウントが作成されていること。 * GTMのアカウントおよびコンテナが作成されていること。 GTMのアカウント作成は下のリンクから行えます。 {% embed url="" %} * GTM経由でGA4の測定設定が完了していること。 {% hint style="info" %} 測定設定方法はこちらのマニュアル内でご案内いたします。測定設定ができていない場合は下のリンクから設定方法をご確認ください。 {% endhint %} {% embed url="" %} ## 設定手順 ### tripla管理画面でGTMタグを設定 tripla Bookにおける予約導線のファネル分析をできるようにするためには、triplaが標準で用意しているイベントをGTMで発火できるように設定する必要があります。そのためには、まずGTMのタグをtripla管理画面に設定していきます。 #### GTMの設定コードを取得 GTMの管理画面から「Googleタグマネージャーをインストール」をクリックします。

実装手順が開くので、ボタンをクリックして\タグ内に埋め込むGTM設定コードを、クリップボードにコピーします。

次にtripla管理画面を別タブで立ち上げ、\[設定]→\[ウィジェット設定]を開きます。

先ほど、クリップボードにコピーしたGTM設定コードを、\タグの欄に貼り付けます。

GTMの画面に戻り、今度は\タグをクリップボードにコピーします。

tripla管理画面に戻り、\タグの欄にGTM設定コードを貼り付け、「保存」ボタンを押します。

これで、trpla Bookが立ち上がったら、設定したGTMコンテナが呼び出されるようになりました。 Data Layer設定を選択します。

\[保存]を選択します。 {% hint style="info" %} 変更が無い場合でも保存をクリックしないとデータが保存されず、イベントが発火されません。必ず\[保存]をクリックしてください。 {% endhint %}

まだこの状態では、ファネル分析に必要なイベントが発火されません。その設定を次からしていきます。 ### GTMにてイベント設定管理画面から「コンテナをインポート」をクリックします。

こちらのファイルは、triplaが提供する標準のイベント設定ファイルです。ローカルPCにダウンロードしておいてください。 {% embed url="" %} \[コンテナをインポート]画面が開いたら、\[コンテナファイルを選択]をクリックし、先ほどローカルに保存したGTM\_triplaEvent.jsonファイルを選択します。

ワークスペースは「新規」を選びます。

わかりやすいように、ワークスペース名は「triplaEvent」と入力し、保存ボタンを押します。

確認ボタンを押します。

トップ画面に戻りますので、現在のワークスペースが「triplaEvent」になっていることを確認します。

メニューの「タグ」をクリックすると、インポートしたタグが表示されているのがわかります。

### GA設定タグの変更インポートしたタグにはtriplaのデモサイトの測定タグが設定されているので、変更する必要があります。 GA\_Setting\_Tagを選択します。

タグの設定を一度クリックすると詳細画面が表示されます。測定したいGA4の測定IDをセットして保存を押します。 GA4の測定IDの作成方法については下のリンクからご確認ください。 {% content-ref url="ga4-how-to-setting/hhow-to-make-ga4-measurement-id" %} [hhow-to-make-ga4-measurement-id](https://docs.tripla.jp/set-up/ga4-how-to-setting/hhow-to-make-ga4-measurement-id) {% endcontent-ref %}

画面右上の「公開」ボタンをクリックし、「変更の送信」画面を開きます。ここで、「公開」ボタンを押すとtriplaEventが発火されるようになります。

完了画面が表示されます。

以上の設定を行うとイベントの発火がされるようになります。次に設定したイベントが発火されているか、画面を見ながら確認を行います。「ワークスペース」をクリックします。

ワークスペースの画面を開いたら、「プレビュー」ボタンをクリックします。

サイトURLを入力して、「Connect」ボタンを押します。

ホームページが立ち上がるので、元の画面に元って、「Continue」ボタンを押します。

複数コンテナが表示されるので、GTMで設定している**GAの測定ID**を選択しておきます。なお、GTMコードは施設によって異なります。\[G]から始まるものを選択してください。

開かれたホームページに戻って、検索ページを開きます。

tripla Bookが開かれますこの状態で、GTMのTag Assistantページに戻ります。 triplaEventが表示されているのが確認できますのでこちらをクリックします。

検索結果のページにて取得されたtriplaEventのパラメーターが一覧で表示されます。様々なパラメーターが取得されているのがわかりますが、スクロールしていくと、予約導線のファネル分析に必要なパラメータである、page\_categoryが表示されているのが、わかります。

これでGTMの設定は完了しました。あと一息です。GTMでtriplaEventが発火されていることが確認できたので、今度はそのイベントをGA4のコンソール画面で、ファネル分析ができるように設定をしていきます。 {% hint style="info" %} Seach Resultが表示されない場合、ページ上記記載のData Layerの保存設定がされていない可能性があります。 {% endhint %} ### GA4のファネル分析設定始めに、「管理」＞「カスタム定義」画面にて、カスタムディメンションの作成を行います。

カスタムディメンションの編集画面にて、以下入力・選択をして保存します。\ **ディメンション名：page\_category**\ **範囲：イベント**\ **イベントパラメーター：page\_category**

{% hint style="info" %} カスタム定義の設定をしてから反映されるまで、24時間程かかる場合があります。\ 以下、ファネル分析設定をしても「0件データがありません」となる場合は、24時間経過してから再度設定を行ってください。 {% endhint %} 次にGA4の「探索」を選択します。

空白のデータ探索を選択します。

データ探索名を任意の名称で設定して、手法は「ファネルデータ探索」を選択します。

\[タグの設定]を下にスクロールすると\[ステップ]という枠が表示されますのでそちらを選択します。

\[ステップ１]に「検索結果」と入力し、新しい条件を追加をクリックします。

イベントからtriplaEventを選択します。

パラーメータを追加を選択します。

カスタムまたはその他からpage\_categoryを選択します。

条件をプルダウンから\[完全一致（=）]を選択し、入力欄に「Search Result」と入力して適用を押します。

以下の表を参考にステップの追加を行いながら、同様の設定をステップ３まで繰り返します。 page\_categoryの部分だけ変更してください。 | **ステップ** | **ステップ名** | **page\_category** | | -------- | --------- | ------------------ | | 1 | 検索結果 | Search Result | | 2 | 宿泊者情報 | Guest Detail | | 3 | 決済 | Payment Method | 次に、ステップ４を作成しステップ名を「予約完了」と設定します。 GA4デフォルトのコンバージョンタグである「triplaEvent」を設定し、適用ボタンを押してください。これで全ての設定が完了しました。レポートの細かい機能は割愛しますが、今後はこのファネル分析レポートを使って、ディメンションやセグメントなどで、対象を絞り込んだ分析などもできるようになります。また、triplaEventで設定されているものであれば、自由にイベント測定ができるようになりますので、慣れてきたら他のレポートも含めて色々と試してみましょう。 {% hint style="info" %} GA4レポートへのデータの反映は24H以上かかる場合があります。 {% endhint %}

### 詳細な情報の抽出例として、検索を行ったお客様の中から予約を完了した人数を抽出します。画面左のメニューバーから\[検索]を選択します。

\[空白]を選択します。

手法から\[ファネルデータ検索]を選択します。

\[ステップ]を選択します。

\[新しい条件を追加]を選択します。

検索バーに「triplaEvent」と入力し、\[イベントを作成]を選択します。

\[パラメータを追加]を選択します。

アイテムを検索に「page\_category」と入力し、\[新しい定義を登録]を選択します。

新しいカスタム定義を保存します。

条件を、含む・Search Resultに設定し、\[適用]を選択します。

同じようにステップの追加を下の表のように行ってください。

| ステップ | タイトル | 新しい条件を追加 | パラメータ | 条件 | | ---- | -------------- | ----------- | -------------- | ----------------- | | 1 | Search | triplaEvent | page\_category | 含む・Search Result | | 2 | Guest Detail | triplaEvent | page\_category | 含む・Guest Detail | | 3 | Payment Method | triplaEvent | page\_category | 含む・Payment Method | | 4 | Confirmation | triplaEvent | | | こちらで画面右上の\[適用]を選択すると設定は完了です。

### データレイヤー機能 1.**データレイヤー(Data Layer)とは？** Google Tag Manager (通称GTM) に任意の情報を追加し Google Analytics (通称GA) に情報を送ることで今まで計測できていなかった情報を計測することが出来る機能です。 {% hint style="info" %} 例：・検索結果ページにどのプランが表示されたか・ユーザーはどこを経由してホテルサイトに訪れたのか・部屋、プラン検索どちらの経由で予約したのか {% endhint %} 2.**活用シーン** 今まで計測出来ていなかった情報を管理する事で新しい発見、機能改善、魅力的なプラン作成などに活用できます。 {% hint style="info" %} 例：・予約が頻繁に行われるプランの共通点は何なのか・特定のホテルにおいて一番売れる価格帯は何なのか・一番予約に繋がるプロモーションは何なのか・宿泊何日前の予約キャンセルが多いのか・ユーザーが離脱するポイントはどこが一番多いのか {% endhint %} 3.**分析サンプル** 取得した情報を活用することでファネルレポートや各種ページにおける離脱率の共通点など、より詳細な分析が可能になります。 {% hint style="info" %} 例：同業種のホテルと比較して明らかにサーチ結果からの離脱率が高い場合はプランの見直しや写真の改善などの提案が可能になります。 {% endhint %} **機能の対象** ホテルマーケティングマネージャーや開発者様を想定してます。使いこなすには前提知識として基礎的なWeb開発、Webマーケティングの知識を必要とする機能です。既にGTMやGAを使っている場合、ホテルブッキング内でのユーザー行動の分析などに役立てることが可能です。 **設定方法 ( tripla管理画面 )** {% hint style="info" %} **データレイヤー機能を使用するには・・・**\ \tagと\tag内に、GTM等のタグを記載するとボタンが表示されます。デフォルトは非表示となっています。 {% endhint %} ① 施設単位の管理画面 \[設定]→\[ウィジェット設定]→\[設定]の順にクリック ② カスタマイズタグ ` tag` と ` tag` を入力 ③Data Layer設定表示された「Data Layer設定」ボタンをクリック

④データレイヤーの詳細設定 1.「検索結果」「顧客情報登録」「決済情報登録」「予約確定」「予約アップデート」「予約キャンセル」からデータレイヤーを送りたいブッキングウィジェットの該当ページを選択する。 2.キー名を入力し、静的/動的からいずれかを選択のうえ、バリューを入力/選択する（または削除する）

3.tripla管理画面で設定を保存後、すぐに該当する自社ホームページでデータレイヤーが送られていることが確認出来ます。

※現在取得できるデータの情報は [こちら](https://docs.google.com/spreadsheets/d/e/2PACX-1vSrH9iqLmWyOY8dYbC9X0Pcc_HOFWSVDCf-MqueKgU7EtcliEn57WVAWYigBik4v_4KTCvHbyYeygWL/pubhtml) からご確認いただけます。 ## Appendix ### GA4の設定 GAで計測ができるようにデータストリームを追加していきます。既に設定済みの場合は、このステップをスキップしてください。設定画面より「データストリーム」を選択します。

「ストリームを追加」からウェブを選択します。

測定したいサイトURLとストリーム名を入力します。

ウェブストリームが作成され測定IDが表示されます。

### 動画での設定方法下のリンクからGoogle Tag Manager (GTM)と、Google Analytics (GA4)の設定について、動画でご確認いただくことが可能です。 {% embed url="" %}