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

Esta función forma parte de una beta abierta y está sujeta a cambios.

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, haz 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. Despliegue la sección Parámetros de evento y haga clic en Añadir parámetro.
5. Escriba user_data en el campo "Parámetro de evento".
6. En el campo "Valor", seleccione o cree una variable de datos proporcionados por los usuarios.
7. En la variable Datos proporcionados por los usuarios, selecciona Configuración manual.
   
8. Despliegue el menú desplegable de cada campo y selecciona una variable.
9. Si crea una variable para un campo de datos, siga estos pasos:
   1. Haz 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.
10. En la variable Datos proporcionados por los usuarios, omita el campo Valor del formato.
11. Guarde la etiqueta de evento.
12. En la parte superior derecha, haz clic en Enviar para publicar los cambios.

Identificar los selectores de CSS de los campos de datos proporcionados por los usuarios

Para identificar los selectores de CSS que quiere introducir en los campos, siga los pasos en cada uno de los campos. Si ya tiene variables que no estén cifradas con hash en el código, puede seleccionarlas en lugar de crear variables CSS. Obtenga más información en Configurar campos.

Nota: Si va a usar variables de JavaScript, lo más fácil será probablemente que pregunte al desarrollador qué variables debe introducir en estos campos. Si va a usar selectores de CSS, puede seguir los pasos que se indican a continuación.

1. Abra una ventana del navegador Google Chrome.
2. Acceda a su sitio web, pero sin cerrar Google Tag Manager.
3. Identifique los datos de clientes que quiere enviar a Google Analytics. Por ejemplo, si quiere enviar una dirección de correo electrónico, identifíquela en la página.
4. Haga clic con el botón derecho en el campo y seleccione Inspeccionar. Por ejemplo, si quiere recoger una dirección de correo, haga clic con el botón derecho en ella.
5. En la página de herramientas para desarrolladores de Chrome, verá una parte del código destacada. Este código es el elemento de página del que debe extraer los selectores de CSS referentes a los datos de clientes.
6. Coloque el cursor sobre el código destacado y haga clic con el botón derecho.
7. Desplácese hacia abajo hasta "Copiar" y, a continuación, seleccione Copiar selector.
8. Pegue el texto copiado en el campo correspondiente de Google Analytics o de Tag Manager.
   • El texto copiado debería tener un aspecto similar al siguiente:

     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.