[GA4] Cómo establecer la configuración manual (Tag Manager)

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

Estas instrucciones son para los administradores y editores que desean identificar los datos proporcionados por el usuario en su sitio web y, luego, ingresarlos en Google Tag Manager.

Descripción general

Debes actualizar el código en todas las páginas en las que recopiles datos proporcionados por el usuario, como la página de registro, de generación de clientes potenciales, de confirmación de compra o alguna similar. Puedes enviar los datos más de una vez durante una sesión para asegurarte de que se envíen a Analytics.

Antes de comenzar

En estas instrucciones, se da por sentado lo siguiente:

• Tienes acceso al contenedor de Tag Manager para el sitio web.
• Activaste la recopilación de datos proporcionados por el usuario y permitiste las funciones de datos proporcionados por el usuario.
• Configuraste una etiqueta del tipo Google Analytics: Evento de GA4 en tu contenedor de Tag Manager.

 Instrucciones

1. Accede a Google Tag Manager.
2. En la pestaña Espacio de trabajo, haz clic en Etiquetas a la izquierda.
3. Abre la etiqueta Google Analytics: Evento de GA4 donde recopilas datos del cliente.
4. Expande la sección Parámetros de evento y haz clic en Agregar parámetro.
5. Ingresa user_data en el campo "Parámetro del evento".
6. En el campo "Valor", selecciona o crea la variable Datos proporcionados por el usuario.
7. En la variable Datos proporcionados por el usuario, selecciona Configuración manual.
   
8. Para cada campo, expande el menú desplegable y selecciona una variable.
9. Si creas una variable para un campo de datos, completa estos pasos:
   1. Haz clic en Configuración de la variable > Elemento DOM.
   2. En la parte superior, ingresa un nombre para la variable.
   3. En el campo Método de selección, selecciona Selector CSS.
   4. En el campo Selector de elementos, ingresa el selector CSS que hace referencia a los datos del cliente. Aprende a identificar los selectores CSS para los campos de datos proporcionados por el usuario.
   5. Deja en blanco el campo Nombre del atributo.
   6. Omite el campo Valores de formato para evitar posibles problemas de configuración.
   7. Guarda la variable del elemento DOM.
   8. Repite estos pasos para cada campo que desees recopilar.
10. En la variable Datos proporcionados por el usuario, omite el campo Valores de formato.
11. Guarda la etiqueta del evento.
12. En la esquina superior derecha, haz clic en Enviar para publicar los cambios.

Cómo identificar los selectores CSS para los campos de datos proporcionados por el usuario

Para identificar los selectores CSS que se deben ingresar en los campos, completa estos pasos para cada uno de los campos. Si ya tienes variables sin codificación hash en tu código, puedes seleccionarlas en lugar de crear nuevas variables de CSS. Obtén más información sobre los campos que puedes establecer.

Nota: Si utilizas variables de JavaScript, tal vez te resulte más fácil preguntarle a tu desarrollador cuáles se deberían agregar a estos campos. Si usas selectores CSS, puedes seguir los pasos que se indican a continuación.

1. Abre una ventana del navegador Google Chrome.
2. Ve a tu sitio web, pero mantén abierto Google Tag Manager.
3. Identifica los datos del cliente que deseas enviar a Google Analytics. Por ejemplo, si quieres enviar una dirección de correo electrónico, identifica en qué parte de la página aparece.
4. Haz clic con el botón derecho en el campo correspondiente y selecciona Inspeccionar. Por ejemplo, si deseas captar una dirección de correo electrónico, asegúrate de hacer clic con el botón derecho en esa dirección.
5. En la página Herramientas para desarrolladores de Chrome, verás destacada una parte del código. Este código es el elemento de página de donde debes extraer los selectores CSS para los datos del cliente.
6. Coloca el cursor sobre el código destacado y haz clic con el botón derecho.
7. Desplázate hacia abajo hasta "Copiar" y, luego, elige Copiar selector.
8. Pega el texto copiado en el campo correspondiente de Google Analytics o Tag Manager.
   • El texto copiado debería ser similar al siguiente ejemplo:

     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.