サインアップフォーム用に Google Analytics のイベント トラッキングを設定する方法

このページで学べること

Klaviyo のサインアップフォーム向けに Google Analytics のイベント トラッキングを設定し、フォームでの重要なユーザー アクションに関するインサイトを得る方法をご覧ください。Google Analytics で Klaviyo のイベント（例：form_open、form_close、form_submit）をコンバージョンとしてマークすることで、フォームのアクティビティを測定できます。次の 2 ステップの手順に従って設定します：

1. ウェブサイトにコードスニペットを追加して、Klaviyo のサインアップフォームデータを Google Analytics に送信します。
2. Google Analytics でイベントをコンバージョンとしてマークします。

始める前に

Google Analytics でサインアップフォームのイベント トラッキングを設定するには、サイトにコード スニペットを貼り付ける必要があります。コードの貼り付けに不安があり、サポートしてくれる開発者がいない場合でも、Klaviyo には パートナー ディレクトリに多数のパートナーがいます。 

Klaviyo フォームを使用して送信された登録をトラッキングする

klaviyoForms イベントにイベントリスナーを追加し、その後、イベントの種類ごとに異なる GA のトラッキングコールを実行することで、Google Analytics で Klaviyo フォームのアクティビティをトラッキングできます。このコードは、サイトのメインテーマファイルに貼り付ける必要があります。

• Shopify を使用している場合は、閉じる </body> タグの上の新しい行に、スニペットを theme.liquid ファイルに貼り付けてください。カスタム商品ページを使用している場合は、このスニペットを別のテーマファイル、または各カスタム商品ページに追加する必要がある場合があります。
• Shopify 2.0 を使用している場合は、カスタム Liquid ブロックにコードを追加してください。
• BigCommerce を使用している場合は、BigCommerce 管理者パネルから [ストアフロント] > [フッター スクリプト] に移動し、スニペットをフッター コード ボックスの新しい行に貼り付けます。

以下は、Google Analytics ですべての klaviyoForms イベントタイプをトラッキングするための汎用コードです。このコードは、gtag.js を使用して Google Analytics を読み込む場合にも使用してください：

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

異なるフォームバージョンまたはバリエーションを追跡したい場合は、コードスニペットを次のように変更します。

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'form_version_id': e.detail.formVersionId })

関連する form_id を使用して、代わりに

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId })

複数ステップのフォームでフォーム送信をトラッキングしている場合、フォームが入力されるたびに submit イベントが発火するのは 1 回のみである点にご注意ください。送信イベントは、次の状況で発火します。

• メールまたは SMS の購読アクションを含むフォームでは、メールアドレスまたは電話番号を送信すると、送信イベントがトリガーされます。
• 複数ステップにわたってメールと SMS の両方のフィールドを含むフォームの場合、フォーム内で先に表示される方を送信すると送信イベントがトリガーされます。
• メールまたは SMS の購読アクションがないフォーム（例：テキストフィールドのみを含むフォーム）では、Action が Submit Form に設定されたボタンをクリックすると、送信イベントがトリガーされます。

各ステップが送信されると、stepSubmit イベントが実行されます。

トラッキングコードをテストする

サイトにトラッキング コードをインストールしたら、データが追跡されていることを確認するためにテストできます。コードをテストするには：

1. ウェブサイトに移動し、フォームを操作します（例：送信する、または閉じる）。
2. Google Analytics を開き、[レポート] > [リアルタイム]。 を開いてください。
3. イベント名別のイベント数 の下に、フォームが追跡したデータの内訳が表示されます。各イベントのメトリックには、実行したアクションに基づく正確な数が反映されます（例：フォームを閉じた場合、form_close の イベント数 にその内容が反映されます）。

イベントが表示されない場合は、Google Analytics が正しく設定されていることと、使用したコードスニペットが正しいことを確認してください。また、イベントは Realtime で 30 分間のみ表示されることにも注意してください。詳しくは [GA4] Realtime レポートをご覧ください。

イベントがコンバージョンとしてマークされるように設定します

Google Analytics で新規サインアップイベントのトラッキングを設定したら、対応するイベントをコンバージョンとしてマークするように設定して、ユーザーがフォームをどのように操作しているかをモニタリングできるようにします。

Google Analytics の 既存のイベント テーブル（管理者 > イベント）で、追跡したい任意のイベントについてスイッチを コンバージョンとしてマーク に切り替えます。イベントが既存のリストにない場合は、新しいイベントを作成してコンバージョンとしてマークする 必要があります。特定の条件（例：特定のフォーム ID）が満たされた場合にのみイベントをコンバージョンとしてマークしたい場合は、イベントのパラメータ値に基づいてコンバージョンを設定する 必要があります。

イベントをコンバージョンとしてマークすると、Google Analytics は event_name（例: form_open）を検出するたびにコンバージョンを登録します。Klaviyo のフォームデータからのコンバージョンを、「コンバージョン レポート」でトラッキングします。

その他のリソース