[GA4] Set up manual configuration (Tag Manager)

This feature is part of an open beta. Keep in mind that the feature is subject to change.

These instructions are for administrators and editors who want to identify user-provided data on their website and input the data into Google Tag Manager.

Overview

You should update the code on any pages where you collect user-provided data, such as a sign up page, lead generation page, checkout page, or something similar. You can send the data more than once within a session to ensure that the data is sent to Analytics.

Before you begin

These instructions assume that you have:

• Access to the Tag Manager container for your website
• Activated user-provided data collection and allowed user-provided data capabilities
• Set up a Google Analytics: GA4 Event tag in your Tag Manager container

 Instructions

1. Sign in to Google Tag Manager.
2. From the Workspace tab, click Tags on the left.
3. Open the Google Analytics: GA4 Event tag where you collect customer data.
4. Select Include user-provided data from your website.
   
5. In the User Data drop-down menu, select or create a User-Provided Data variable.
6. In the User-Provided Data variable, select Manual configuration.
   
7. For each field, expand the drop-down menu and select a variable.
8. If you create a variable for a data field, complete these steps:
   1. Click Variable Configuration > DOM Element.
   2. Enter a name for the variable at the top.
   3. In the Selection Method field, select CSS Selector.
   4. In the Element Selector field, enter the CSS selector that references the customer data. Learn how to identify CSS selectors for user-provided data fields.
   5. Leave the Attribute Name field blank.
   6. Skip the Format Values field to avoid potential setup issues.
   7. Save the DOM Element variable.
   8. Repeat these steps for each field you want to collect.
9. In the User-Provided Data variable, skip the Format Values field.
10. Save the event tag.
11. In the top right, click Submit to publish the changes.

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.

1. Open a Google Chrome browser window.
2. Go to your website, but keep Google Tag Manager open.
3. 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.
4. 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.
5. 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.
6. Hover your mouse over the highlighted code and right-click it.
7. Scroll down to "Copy", then select Copy Selector.
8. 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

Next steps

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