[GA4] CSS セレクタまたは JavaScript 変数を指定する（gtag.js）

この機能はオープンベータ版の一部であり、変更される可能性があります。

以下の手順は、ユーザー提供データの収集を設定する予定で、[ユーザー提供データ機能を許可する] ページの [CSS セレクタまたは JavaScript 変数を指定する] オプションを使って、ユーザー提供データを特定する方法を習得したいとお考えの管理者と編集者を対象としています。

概要

ユーザー提供データを収集するすべてのページ（申し込みページ、見込み顧客発掘のページ、購入手続きページなど）でコードを更新する必要があります。セッション内でデータを複数回送信すると、データをアナリティクスに確実に送信できます。

始める前に

この手順は、以下の条件を満たしていることを前提としています。

• ユーザー提供データの収集を有効にし、ユーザー提供データ機能を許可している
• Google アナリティクス プロパティの管理者の役割を持っている

[ユーザー提供データ] フィールドの CSS セレクタを特定する

フィールドに入力する CSS セレクタを確認するには、フィールドごとに以下の手順を実施します。ハッシュ化されていない変数がコードにすでに含まれている場合、新しい CSS 変数を作成する代わりに、それらの変数を選択できます。詳しくは、設定するフィールドをご覧ください。

注: JavaScript 変数を使用している場合は、これらのフィールドに追加する変数を開発担当の方に尋ねるのが最も簡単でしょう。CSS セレクタを使用している場合は次の手順に沿ってください。

1. Google Chrome ブラウザ ウィンドウを開きます。
2. Google タグ マネージャーを開いたまま、ウェブサイトに移動します。
3. Google アナリティクスに送信する顧客データを特定します。たとえば、メールアドレスを送信する場合は、ページ上に表示されているメールアドレスの場所を特定します。
4. フィールドを右クリックし、[検証] を選択します。たとえばメールアドレスを取得しようとしている場合は、メールアドレスを右クリックします。
5. Chrome デベロッパー ツールのページに、コードの一部がハイライト表示されます。このページ要素のコードから顧客データの CSS セレクタを抽出する必要があります。
6. ハイライト表示されているコードにカーソルを合わせ、右クリックします。
7. [Copy] までスクロールし、[Copy Selector] を選択します。
8. コピーしたテキストを、Google アナリティクスまたはタグ マネージャーの対応するフィールドに貼り付けます。
   • コピーしたテキストは次のようになります。

     tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Next steps

Validate that user-provided data collection is set up correctly. Show me how.