1. クロスドメイン設定
この記事では、BASEの独自ドメインとGA4を使用してクロスドメインのトラッキングを設定し、お問い合わせ完了イベントを追跡する方法について説明します。
まず、GA4でクロスドメインのトラッキングを設定する方法を説明します。これにより、ユーザーがメインサイトとお問い合わせフォームサイト間を移動する際のセッションを一貫してトラッキングできます。
クロスドメイン設定の手順
- Google Analyticsにログイン
- Google Analytics にログインし、対象のGA4プロパティを選択します。
- データストリームの設定
- 「管理」 > 「データストリーム」 > 対象のウェブデータストリームを選択します。
- 「タグ設定の詳細」 > 「クロスドメイン計測」 > 「新しいドメインの追加」をクリックします。
- 以下のドメインを追加します:
あなたのメインサイトのドメイン
thebase.com
- 「保存」をクリックします。
HTMLにクロスドメイン設定を追加
既存のGA4タグを編集できない場合でも、以下のスクリプトを追加することでクロスドメイン設定を行うことができます。このスクリプトは、GA4の基本タグの上に追加します。
<!-- クロスドメイン設定の追加 -->
<script>
window.addEventListener('load', function() {
gtag('config', 'あなたのGA4プロパティID', {
'linker': {
'domains': ['あなたのメインサイトのドメイン', 'thebase.com']
}
});
});
</script>
2. お問い合わせ完了のスクリプト設定
次に、特定の条件でお問い合わせ完了イベントをGA4に送信するためのスクリプトを設定します。
お問い合わせ完了スクリプト
以下のスクリプトを、GA4の基本タグの上に追加します。このスクリプトは、ユーザーが特定の条件を満たした場合にGA4に「お問い合わせ完了」イベントを送信します。
<script>
document.addEventListener('DOMContentLoaded', function() {
// 条件1: ページURLが特定のパスを含む
if (window.location.pathname.includes('/inquiry/your-inquiry-path')) {
// 条件2: 特定の要素がクリックされる
document.querySelector('input[type="submit"][value="送信する"]').addEventListener('click', function() {
// 条件3: 特定の隠しフィールドが存在する
if (document.querySelector('input[name="mode"][value="2to3"]')) {
// GA4イベントを送信
gtag('event', 'お問い合わせ完了', {
'event_category': 'form',
'event_label': 'お問い合わせ完了'
});
}
});
}
});
</script>
3. 設定が正しく動作しているか確認する方法
Google Analyticsのリアルタイムレポートを使用する
- Google Analyticsにログイン
- Google Analytics にログインし、対象のプロパティを選択します。
- リアルタイムレポートを確認
- 左側のメニューから「リアルタイム」を選択します。
- メインサイトからお問い合わせフォームに移動し、イベントが正しくトラッキングされているかを確認します。
Google Tag Assistantを使用する
- Google Tag Assistantのインストール
- Google Tag Assistant をインストールします。
- タグアシスタントを有効にする
- タグアシスタントを有効にし、該当のページにアクセスします。
- クロスドメインリンクの確認
- ページ間の移動をテストし、タグアシスタントがクロスドメイン設定を認識しているか確認します。
これで、BASEでのクロスドメイン設定とお問い合わせ完了のスクリプト設定は完了です。これにより、ユーザーがメインサイトとお問い合わせフォームサイト間を移動する際のセッションを一貫してトラッキングし、特定の条件でGA4にイベントを送信することができます。