GTM・GA4を使った高度なアクセス解析（上級者向け）
コングラントのプロジェクトページ・決済フォームにおいて、Googleタグマネージャー（以下、GTM）とGoogleアナリティクス4（以下、GA4）を利用してより詳細なアクセス解析を行うことができるようになりました。
具体的には
- プロジェクトID・タイトルごとの分析
- プロジェクトのタイプ（ベーシック、クラファン等）ごとの分析
- 決済された金額や決済方法（カード、銀行振込等）の分析
- チャネル別の決済金額、決済頻度（単発・毎月・毎年）の分析
などの詳細を分析できるようになります。
これらの情報を取得するためには本ページで解説する、GTM・GA4の設定変更を行う必要があります。
はじめに
コングラントのサイトはSPA（シングルページアプリケーション）という方法で構築されています。一般的なWEBサイトではページ遷移するたびにページのリソースを読み込みますが、SPAで作られたサイトはページ遷移をしても読み込みが発生しないため、高速なページ遷移が可能になります。
一方でGTM・GA4を使ったアクセス解析を行う場合には少し特殊な設定が必要になります。これまでユーザーの皆様には簡易的な設定方法（Googleアナリティクス（GA4）の設定方法 ）をご案内してきましたが、今回ご案内する方法は中級〜上級者向けの設定方法になります（これまでご案内してきた方法でも引き続きページビューイベントやコンバージョンは計測可能です）。
※GTM・GA4に関するお問い合わせは通常のサポートの対象外となります。サポートが必要な際は有償サポートをご検討ください。
仕組み
コングラントでは各画面アクセス時や決済完了時に以下2種類のイベントをGTMのデータレイヤーに送信しています。
| イベント | 説明 |
|---|---|
| virtual_page_view | コングラント上で画面遷移を計測するための仮想ページビューイベント。 プロジェクトや決済フォーム、完了画面の全画面でアクセスした際に送信される。 |
| purchase | GA4のeコマース機能を利用するためのイベント。 クレジットカード決済完了、銀行振込や郵便振替の申込完了時に送信される。 |
上の2種類のイベントを送信する際、合わせて以下の変数を送信します。
| パラメータ | 値 | 説明 |
|---|---|---|
| page_location | 例）https://congrant.com/project/npoabc/1234 | イベントが発生したページURL |
| page_title | 例）決済フォーム | NPO法人ABCの寄付募集 | イベントが発生したページのタイトル |
| page_type | top：プロジェクトのトップページ reports：活動報告の一覧ページ report：活動報告の詳細ページ comments：応援コメントページ form_step1：決済フォーム（step1） form_step2：決済フォーム（step1） form_step3：決済フォーム（step3） thanks：決済完了ページ | イベントが発生したページの種類 |
| project_id | 例）1234 | プロジェクトのID ※URL赤字部分 https://congrant.com/project/npoabc/1234 |
| project_title | 例）NPO法人ABCの寄付募集 | プロジェクトのタイトル |
| project_type | Basic：ベーシック Crowdfunding：クラウドファンディング Monthlyfunding：マンスリーファンディング Event：イベント Others：その他 | プロジェクトタイプ |
また、決済完了時のpurchaseイベントでは上記の変数に加えて以下も送信します。
| パラメータ | 値 | 説明 |
|---|---|---|
| payment_method | Card：カード決済 Bank：銀行振込 Postal：郵便振替 PayPay：PayPay | 決済方法 |
| payment_frequency | One-time：単発（今回のみ） Monthly：毎月 Yearly：毎年 | 決済頻度 |
| value | 例）6000 | 決済時の総額 |
| currency | JPY | 通貨 |
| item_id | 例）123456 | 寄付プラン・コース・チケットのID |
| item_name | 例）ゴールドサポーター | 寄付プラン・コース・チケットの名称 |
| price | 例）3000 | 寄付プラン・コース・チケットの単価 |
| quantity | 例）2 | 寄付プラン・コース・チケットの口数 |
これらの情報をGTM・GA4で取得できるように設定することで分析に活用できるようになります。
設定手順
GTMの設定
変数作成
まずはGTMのダッシュボードからユーザー定義変数を作成します。
- ユーザーの仮想ページビューイベントが発生した際、前に閲覧していたページを取得するためのカスタムJavaScriptを作成します。設定内容は以下を参照してください。
| 名前（例） | 変数タイプ | カスタム JavaScript |
|---|---|---|
| cjs - previous page_location | カスタム JavaScript | 以下のJavaScriptをコピペして使用してください。 |
- データレイヤーの変数を設定します。設定内容は以下を参照してください。
| 名前（例） | 変数タイプ | データレイヤーの変数名 |
|---|---|---|
| dlv - page_location | データレイヤーの変数 | page_location |
| dlv - page_title | データレイヤーの変数 | page_title |
| dlv - page_type | データレイヤーの変数 | page_type |
| dlv - payment_frequency | データレイヤーの変数 | payment_frequency |
| dlv - payment_method | データレイヤーの変数 | payment_method |
| dlv - project_id | データレイヤーの変数 | project_id |
| dlv - project_title | データレイヤーの変数 | project_title |
| dlv - project_type | データレイヤーの変数 | project_type |
トリガー作成
次に以下の2つのトリガーを設定します。
- virtual_page_view（仮想ページビュー）
- purchase（購入）
- 設定内容は以下を参照してください。
| 名前（例） | トリガーのタイプ | イベント名 |
|---|---|---|
| event - virtual_page_view | カスタムイベント | virtual_page_view |
| event - purchase | カスタムイベント | purchase |
タグ作成
最後に以下の3つのタグを用意します。
- Googleタグ
- GA4 eventタグ（virtual_page_view）
- GA4 eventタグ（purchase）
- Googleタグを以下の内容で作成してください。
▼構成パラメータ
| 構成パラメータ | 値 |
|---|---|
| send_page_view | false |
| update | true |
| page_referrer | {{cjs - previous page_location}} |
| page_location | {{dlv - page_location}} |
| page_title | {{dlv - page_title}} |
▼共有イベントの設定
| イベントパラメータ | 値 |
|---|---|
| page_type | {{dlv - page_type}} |
| project_id | {{dlv - project_id}} |
| project_title | {{dlv - project_title}} |
| project_type | {{project_type}} |
- GA4イベントタグ（virtual_page_view、purchase）をそれぞれ以下の内容で作成してください。
▼purchaseのイベントパラメータの設定
| イベントパラメータ | 値 |
|---|---|
| payment_method | {{dlv - payment_method}} |
| payment_frequency | {{dlv - payment_frequency}} |
GA4の設定
次にGA4の設定を行います。
- GA4ので、「ブラウザの履歴イベントに基づくページの変更」のチェックを外してください。
- からカスタムディメンションを作成します。設定内容は以下を参照してください。
| ディメンション名（例） | スコープ | ユーザープロパティ/パラメータ |
|---|---|---|
| プロジェクトID | イベント | project_id |
| プロジェクトタイプ | イベント | project_type |
| プロジェクト名 | イベント | project_title |
| ページの種類 | イベント | page_type |
| 決済方法 | イベント | payment_method |
| 決済頻度 | イベント | payment_frequency |
以上で設定は完了です。
※GTM・GA4に関するお問い合わせは通常のサポートの対象外となります。サポートが必要な際は有償サポートをご検討ください。
使い方