This feature is part of an open beta. Keep in mind that the feature is subject to change.
以下の手順は、ウェブサイトでユーザー提供データを特定し、Google タグ マネージャーに入力したいとお考えの管理者と編集者を対象としています。
概要
ユーザー提供データを収集するすべてのページ（申し込みページ、見込み顧客発掘のページ、購入手続きページなど）でコードを更新する必要があります。セッション内でデータを複数回送信すると、データをアナリティクスに確実に送信できます。
始める前に
この手順は、以下の条件を満たしていることを前提としています。
- ウェブサイトに対応するタグ マネージャー コンテナへのアクセス権が付与されている
- ユーザー提供データの収集を有効にし、ユーザー提供データ機能を許可している
- タグ マネージャーのコンテナで [Google アナリティクス: GA4 イベント] タグを設定している
手順
- Google タグ マネージャーにログインします。
- [ワークスペース] タブで、左側の [タグ] をクリックします。
- 顧客データを収集する [Google アナリティクス: GA4 イベント] タグを開きます。
- [自社のウェブサイトでユーザーから提供されたデータを含める] を選択します。
- [ユーザーデータ] プルダウン メニューで、[ユーザー提供データ] 変数を選択または作成します。
- [ユーザー提供データ] 変数で、[手動構成] を選択します。
- 各フィールドでプルダウン メニューを開き、変数を選択します。
- データ フィールドの変数を作成する場合は、以下の手順を行います。
- [変数の設定] > [DOM 要素] をクリックします。
- 上部に変数の名前を入力します。
- [選択方法] フィールドで [CSS セレクタ] を選択します。
- [要素セレクタ] フィールドに、顧客データを参照する CSS セレクタを入力します。[ユーザー提供データ] フィールドの CSS セレクタを特定する方法に関する詳細
- [属性名] 欄は空欄のままにします。
- セットアップ中に発生する可能のある問題を回避するため、[形式の値] フィールドはスキップします。
- [DOM 要素] 変数を保存します。
- 収集するフィールドごとに同じ手順を繰り返します。
- [ユーザー提供データ] 変数の [形式の値] フィールドはスキップします。
- イベントタグを保存します。
- 右上の [送信] をクリックして変更内容を公開します。
Identify CSS selectors for user-provided data fields
To identify the CSS selectors to input into the fields, complete these steps for each field. If you already have unhashed variables in your code, you can select those instead of creating new CSS variables.
Note: If you’re using JavaScript variables, it’s likely easiest to ask your developer which variables should be added to these fields. If you’re using CSS Selectors, you can follow the steps below.
- Open a Google Chrome browser window.
- Go to your website, but keep Google Tag Manager open.
- Identify the customer data you want to send to Google Analytics. For example, if you want to send an email address, identify where the email address is present on the page.
- Right click the field and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address.
- On the Chrome Developer Tools page, you will see a portion of the code highlighted. This code is the page element where you need to extract CSS Selectors for the customer data.
- Hover your mouse over the highlighted code and right-click it.
- Scroll down to "Copy", then select Copy Selector.
- Paste the copied text in the corresponding field in Google Analytics or Tag Manager.
- The copied text should look something like the following:
tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail
- The copied text should look something like the following:
Next steps
Validate that user-provided data collection is set up correctly. Show me how.