[GA4] Cómo configurar el fragmento de código (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 deseen aprender a configurar el fragmento de código para la recopilación de datos proporcionados por el usuario en su sitio web usando Google Tag Manager.

En comparación con otras opciones de configuración, actualizar tu código te ayuda a garantizar que las direcciones de correo electrónico, los números de teléfono o los nombres y las direcciones estén disponibles en la página cuando Analytics recopila datos proporcionados por el usuario.

Descripción general

Para configurar el fragmento de código con Google Tag Manager, sigue estos pasos:

1. Identifica y define los campos de datos proporcionados por el usuario en el código de tu sitio web.
2. Pasa cada campo de datos proporcionados por el usuario en una variable de JavaScript personalizada a Google Analytics.

Nota: Puedes enviar datos de clientes con codificación hash o sin ella a Google Analytics. Cuando envías datos sin codificación hash, Google genera un hash para los datos antes de almacenarlos en sus servidores. Sin embargo, también puedes generar un hash para los datos antes de enviarlos a Google.

Antes de comenzar

En estas instrucciones, se da por sentado lo siguiente:

• Tienes acceso al código fuente de tu 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 Google Tag Manager.
• Tienes el rol de administrador en la propiedad de Google Analytics.​

Hashing the data

You can send hashed or unhashed data from a website. If you send unhashed data, Google normalizes and hashes the data before the data reaches Google's servers. To ensure Analytics interprets the data correctly and to comply with the User-provided data policy, you must use the correct key name (in the next section).

To hash the data:

• Use hex SHA256.

To normalize the data:

• Remove leading or trailing whitespaces.
• Convert the text to lowercase.
• Format phone numbers according to the E.164 standard.

Defining the fields in your code

You must provide at least one of these fields:

• Email (preferred).
• Address (first name, last name, postal code, and country are required). You can optionally provide street address, city, and region as additional match keys.
• A phone number can also be provided along with an email or full name and address.

Make sure the data is available when the Google tag fires. If the data is collected on a previous page, make sure it’s available in your code on the current page so you can configure the field.

Fields to set

The following table describes each field you can set. The key name shows how you must reference the field in your code. You must pass the data as a String type. When defining name and address, make sure to define each component as an individual variable (for example, first name, last name, and so on).

Note: If you want to send unhashed data and let Google normalize and hash the data, use the first key name for each data field. For example, email in the Email address data field below. If you want to send hashed data, use the key name that begins with sha256_.

Data Field	Key Name	Description
Email address	email	User email. Example: ‘[e-mail]’
	sha256_email_address	Hashed user email. Example: ‘a8af8341993604f29cd4e0e5a5a4b5d48c575436c38b28abbfd7d481f345d5db’
Phone number	phone_number	User phone number. Must be in E.164 format, which means it must be 11 to 15 digits including a plus sign (+) prefix and country code with no dashes, parentheses, or spaces. Example: ‘[phone]’
	sha256_phone_number	Hashed user phone number. Example: ‘e9d3eef677f9a3b19820f92696be53d646ac4cea500e5f8fd08b00bc6ac773b1’
First name	address.first_name	User first name. Example: 'John'
	address.sha256_first_name	Hashed user first name. Example: ‘96d9632f363564cc3032521409cf22a852f2032eec099ed5967c0d000cec607a’
Surname	address.last_name	User last name. Example: 'Doe'
	address.sha256_last_name	Hashed user last name. Example: ‘799ef92a11af918e3fb741df42934f3b568ed2d93ac1df74f1b8d41a27932a6f’
Street address	address.street	User street address. Example: '123 New Rd'
City	address.city	User city name. Example: `Southampton’
Region	address.region	User province, state, or region. Example: `Hampshire’
Postal code	address.postal_code	User post code. Example: 'SO99 9XX'
Country	address.country	User country code. Example: 'UK'. Use 2-letter country codes, per the ISO 3166-1 alpha-2 standard.

Cómo actualizar la etiqueta del evento con una variable de JavaScript personalizada

Antes de actualizar tu contenedor de Tag Manager, consulta cómo actualizar el código JavaScript personalizado que agregarás a tu contenedor.

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. Asegúrate de que la etiqueta del evento use el ID de medición del flujo web en el que se recopilan los datos del usuario.
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. Si estás creando una nueva variable, en la variable Datos proporcionados por el usuario, selecciona Código.

1. En el menú desplegable Fuente de datos, haz clic en Nueva variable….
2. Haz clic en Configuración de la variable > JavaScript personalizado.
3. En la parte superior de la página, ingresa un nombre para la variable personalizada de JavaScript.
4. En el cuadro de texto JavaScript personalizado, ingresa el fragmento de código. Descubre cómo hacerlo.
5. Guarda las variables nuevas y, luego, guarda la etiqueta del evento.
6. En la esquina superior derecha, haz clic en Enviar para publicar los cambios.

Cómo crear el fragmento de código para recopilar datos proporcionados por el usuario

Puedes usar el siguiente código cuando configures la variable personalizada de JavaScript en el paso 10:

function () {

return {

"email": yourEmailVariable , // Reemplaza tuVariableCorreoElectrónico por el nombre de la variable que captura el correo electrónico de tu usuario

"phone_number": yourPhoneVariable, // repite para tuVariableTeléfono, así como para los siguientes nombres de variables a continuación

"address": {

"first_name": yourFirstNameVariable ,

"last_name": yourLastNameVariable ,

"street": yourStreetAddressVariable ,

"city": yourCityVariable ,

"region": yourRegionVariable ,

"postal_code": yourPostalCodeVariable ,

"country": yourCountryVariable

}

}

}

Para cada tipo de datos del usuario en la muestra de código, reemplaza las variables de marcador de posición (p. ej., tuVariableCorreoElectrónico) por el nombre de la variable de JavaScript global que contiene esos datos. Si tu sitio no recopila alguno de los campos anteriores, quita el campo por completo en lugar de dejarlo en blanco.

Como alternativa, puedes codificar el campo con una cadena o usar una función en lugar de variables.

// Implement
<script>
gtag('set', 'user_data', {
"sha256_email_address": tuVariableCorreoElectrónicoNormalizadaconCodificaciónHash,
"sha256_phone_number": tuVariableTeléfonoNormalizadaconCodificaciónHash,
"address": {
"address.sha256_first_name": tuVariableNombreNormalizadaconCodificaciónHash,
"address.sha256_last_name": tuVariableApellidoNormalizadaconCodificaciónHash,
"city": tuVariableCiudad,
"region": tuVariableRegión,
"postal_code": tuVariableCódigoPostal,
"country": tuVariablePaís
}
});
</script>

Si quieres proporcionar valores de datos del usuario con codificación hash, puedes usar el siguiente fragmento de ejemplo:

async function processUserData() {
const userData = {
'sha256_email_address': await correoElectrónicoconCodificaciónHash(email.trim()),
'sha256_phone_number': await teléfonoconCodificaciónHashr(teléfono),
'address': {
'address.sha256_first_name': await nombreconCodificaciónHash(nombre),
'address.sha256_last_name': await apellidoconCodificaciónHash(apellido),
'city': ciudad,
'region': región,
'postal_code': códigoPostal,
'country': país,
},
};
return userData;

El número de teléfono debe tener el formato E.164, es decir, debe tener entre 11 y 15 dígitos, incluidos un prefijo de signo más (+) y un código de país sin guiones, paréntesis ni espacios.

Next steps

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