[GA4] Configurar el fragmento de código (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 aprender a configurar el fragmento de código para la recogida de datos proporcionados por los usuarios en su sitio web con Google Tag Manager.

Actualizar el código, en comparación con las otras opciones de configuración, le permite asegurarse de que las direcciones de correo electrónico, los números de teléfono o los nombres y las direcciones postales estén disponibles en la página cuando Analytics recoja los datos proporcionados por los usuarios.

Introducción

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

1. Identifique y defina los campos de datos proporcionados por los usuarios en el código de su sitio web.
2. Envíe a Google Analytics cada campo de datos proporcionados por los usuarios en una variable de JavaScript personalizada.

Nota: Puede enviar datos de clientes cifrados con hash o sin cifrar a Google Analytics. Cuando los envía sin cifrar con hash, Google los cifra con esta tecnología antes de almacenarlos en sus servidores. Sin embargo, también puede cifrar los datos con hash antes de enviarlos a Google.

Antes de empezar

En estas instrucciones se presupone lo siguiente:

• Tiene acceso al código fuente 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 Google Tag Manager.
• Tiene el rol 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.

Actualizar la etiqueta de evento con una variable de JavaScript personalizada

Antes de actualizar el contenedor de Tag Manager, consulte cómo actualizar el código JavaScript personalizado que va a añadir al contenedor.

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. Asegúrese de que la etiqueta de evento use el ID de medición del flujo web donde se recogen los datos de usuario.
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. Si va a crear una variable, en la variable de datos proporcionados por los usuarios, seleccione Código.
   
7. En el menú desplegable Fuente de datos, haga clic en Crear variable...
8. Haga clic en Configuración de la variable > JavaScript personalizado.
9. Dé un nombre a la variable de JavaScript personalizada situada en la parte superior de la página.
10. En el cuadro de texto JavaScript personalizado, introduzca el fragmento de código. Consulte cómo hacerlo.
11. Guarde las nuevas variables y, a continuación, guarde la etiqueta de evento.
12. En la parte superior derecha, haga clic en Enviar para publicar los cambios.

Crear el fragmento de código para recoger datos proporcionados por los usuarios

Cuando configure la variable de JavaScript personalizada en el paso 10, puede usar el siguiente código:

function () {

return {

"email": suVariableDirecciónCorreo , // sustituya suVariableDirecciónCorreo por el nombre de la variable que captura la dirección de correo del usuario

"phone_number": suVariableNúmeroTeléfono, // haga lo mismo con suVariableNúmeroTeléfono y los nombres de variables que figuran más abajo

"address": {

"first_name": suVariableNombre,

"last_name": suVariableApellidos,

"street": tuVariableDirección,

"city": tuVariableCiudad,

"region": tuVariableRegión,

"postal_code": tuVariableCódigoPostal,

"country": tuVariablePaís

}

}

}

En cada tipo de datos de usuario del código de ejemplo, sustituya las variables de marcador de posición (por ejemplo, suVariableDirecciónCorreo) por el nombre de la variable de JavaScript global que contiene ese fragmento de datos. Si el sitio web no recoge datos de alguno de esos campos, quite el campo en lugar de dejarlo en blanco.

También puede codificar el campo con una cadena o usar una función en vez de utilizar variables.

// Implement
<script>
gtag('set', 'user_data', {
"sha256_email_address": suVariableDirecciónCorreoNormalizadaCifradaHash
"sha256_phone_number": suVariableTeléfonoNormalizadaCifradaHash,
"address": {
"address.sha256_first_name": suVariableNombreNormalizadaCifradaHash,
"address.sha256_last_name": suVariableApellidosNormalizadaCifradaHash,
"city": suVariableCiudad,
"region": suVariableRegión,
"postal_code": suVariableCódigoPostal,
"country": suVariablePaís
}
});
</script>

Si quiere proporcionar valores de datos de usuario cifrados con hash, puede utilizar el siguiente fragmento de ejemplo:

async function processUserData() {
const userData = {
'sha256_email_address': await hashEmail(email.trim()),
'sha256_phone_number': await hashPhoneNumber(phoneNumber),
'address': {
'address.sha256_first_name': await hashName(firstName),
'address.sha256_last_name': await hashName(lastName),
'city': city,
'region': region,
'postal_code': postalCode,
'country': country,
},
};
return userData;

El número de teléfono debe estar en formato E.164, lo que significa que debe tener entre 11 y 15 dígitos e incluir un prefijo con el signo más (+) y el 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.