[GA4] Definir la configuración manual (Tag Manager)

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

Estas instrucciones están dirigidas a los administradores y editores que quieren identificar los datos proporcionados por los usuarios en su sitio web e introducirlos en Google Tag Manager.

Introducción

Debe actualizar el código en todas las páginas en las que recoja datos proporcionados por los usuarios; por ejemplo, una página de registro, de generación de oportunidades de venta, de tramitación de la compra u otra similar. Puede enviar los datos más de una vez en una sesión para asegurarse de que se mandan a Analytics.

Antes de empezar

En estas instrucciones se presupone lo siguiente:

• Tiene acceso al contenedor de Tag Manager de su sitio web.
• Ha activado la recogida de datos proporcionados por los usuarios y ha permitido las funciones de datos proporcionados por los usuarios.
• Ha configurado una etiqueta Google Analytics: evento de GA4 en su contenedor de Tag Manager.

 Instrucciones

1. Inicie sesión en Google Tag Manager.
2. En la pestaña Espacio de trabajo, haga clic en la opción Etiquetas, situada a la izquierda.
3. Abra la etiqueta Google Analytics: evento de GA4 en la que recoge datos de clientes.
4. Seleccione Incluir datos proporcionados por los usuarios desde su sitio web.
   
5. En el menú desplegable Datos de usuario, seleccione o cree una variable de datos proporcionados por los usuarios.
6. En la variable Datos proporcionados por los usuarios, seleccione Configuración manual.
   
7. Despliegue el menú desplegable de cada campo y seleccione una variable.
8. Si crea una variable para un campo de datos, siga estos pasos:
   1. Haga clic en Configuración de la variable > Elemento DOM.
   2. Dé un nombre a la variable en la parte superior.
   3. En el campo Método de selección, elija Selector de CSS.
   4. En el campo Selector de elementos, introduzca el selector de CSS que hace referencia a los datos de clientes.Consulte cómo identificar los selectores de CSS en los campos de datos proporcionados por los usuarios.
   5. Deje en blanco el campo Nombre del atributo.
   6. Omita el campo Valor del formato para evitar posibles problemas de configuración.
   7. Guarde la variable Elemento DOM.
   8. Repita estos pasos con cada campo que quiera recoger.
9. En la variable Datos proporcionados por los usuarios, omita el campo Valor del formato.
10. Guarde la etiqueta de evento.
11. En la parte superior derecha, haga clic en Enviar para publicar los cambios.

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.