この機能はオープンベータ版の一部であり、変更される可能性があります。
以下の手順は、ウェブサイトでユーザー提供データを特定し、Google タグ マネージャーに入力したいとお考えの管理者と編集者を対象としています。
概要
ユーザー提供データを収集するすべてのページ(申し込みページ、見込み顧客発掘のページ、購入手続きページなど)でコードを更新する必要があります。セッション内でデータを複数回送信すると、データをアナリティクスに確実に送信できます。
始める前に
この手順は、以下の条件を満たしていることを前提としています。
- ウェブサイトに対応するタグ マネージャー コンテナへのアクセス権が付与されている
- ユーザー提供データの収集を有効にし、ユーザー提供データ機能を許可している
- タグ マネージャーのコンテナで [Google アナリティクス: GA4 イベント] タグを設定している
手順
- Google タグ マネージャーにログインします。
- [ワークスペース] タブで、左側の [タグ] をクリックします。
- 顧客データを収集する [Google アナリティクス: GA4 イベント] タグを開きます。
- [イベント パラメータ] を開き、[パラメータを追加] をクリックします。
- [イベント パラメータ] 欄に「
user_data」と入力します。 - [値] 欄で、ユーザー提供データ変数を選択または作成します。
- [ユーザー提供データ] 変数で、[手動構成] を選択します。
- 各フィールドでプルダウン メニューを開き、変数を選択します。
- データ フィールドの変数を作成する場合は、以下の手順を行います。
- [変数の設定] > [DOM 要素] をクリックします。
- 上部に変数の名前を入力します。
- [選択方法] フィールドで [CSS セレクタ] を選択します。
- [要素セレクタ] フィールドに、顧客データを参照する CSS セレクタを入力します。[ユーザー提供データ] フィールドの CSS セレクタを特定する方法に関する詳細
- [属性名] 欄は空欄のままにします。
- セットアップ中に発生する可能のある問題を回避するため、[形式の値] フィールドはスキップします。
- [DOM 要素] 変数を保存します。
- 収集するフィールドごとに同じ手順を繰り返します。
- [ユーザー提供データ] 変数の [形式の値] フィールドはスキップします。
- イベントタグを保存します。
- 右上の [送信] をクリックして変更内容を公開します。
[ユーザー提供データ] フィールドの CSS セレクタを特定する
フィールドに入力する CSS セレクタを確認するには、フィールドごとに以下の手順を実施します。ハッシュ化されていない変数がコードにすでに含まれている場合、新しい CSS 変数を作成する代わりに、それらの変数を選択できます。詳しくは、設定するフィールドをご覧ください。
注: JavaScript 変数を使用している場合は、これらのフィールドに追加する変数を開発担当の方に尋ねるのが最も簡単でしょう。CSS セレクタを使用している場合は次の手順に沿ってください。
- Google Chrome ブラウザ ウィンドウを開きます。
- Google タグ マネージャーを開いたまま、ウェブサイトに移動します。
- Google アナリティクスに送信する顧客データを特定します。たとえば、メールアドレスを送信する場合は、ページ上に表示されているメールアドレスの場所を特定します。
- フィールドを右クリックし、[検証] を選択します。たとえばメールアドレスを取得しようとしている場合は、メールアドレスを右クリックします。
- Chrome デベロッパー ツールのページに、コードの一部がハイライト表示されます。このページ要素のコードから顧客データの CSS セレクタを抽出する必要があります。
- ハイライト表示されているコードにカーソルを合わせ、右クリックします。
- [Copy] までスクロールし、[Copy Selector] を選択します。
- コピーしたテキストを、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.