[GA4] Cómo especificar selectores CSS o variables de JavaScript (gtag.js)

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

Estas instrucciones son para a los administradores y editores que configuran la recopilación de datos proporcionados por el usuario y desean aprender a identificar este tipo de datos a través de la opción para especificar selectores CSS o variables de JavaScript en la página Permitir funciones de datos proporcionados por el usuario.

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:

• Activaste la recopilación de datos proporcionados por el usuario y permitiste las funciones de datos proporcionados por el usuario.
• Tienes el rol de administrador en la propiedad de Google Analytics.

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.