En este instructivo, se muestra cómo configurar un evento purchase
en tu sitio web para que puedas medir el momento en que una persona realiza una compra. En el instructivo, se incluyen las dimensiones, los informes y las métricas que Analytics propaga con datos del evento. Para obtener más información sobre los eventos de comercio electrónico, consulta Cómo medir el comercio electrónico.
Antes de comenzar
En este instructivo, se da por sentado que ya hiciste lo siguiente:
- Crear una cuenta de Google Analytics 4 y una propiedad allí
- Crear un flujo de datos web para tu sitio
- Coloca la etiqueta de Google Analytics en tu sitio web
También se da por sentado que tienes lo siguiente:
- Acceso al código fuente de tu sitio web
- Rol de editor (o superior) en la cuenta de Google Analytics
Paso 1: Agrega el evento a tu sitio web
Debes colocar el evento purchase
en la página de tu sitio web en la que un usuario realiza una compra. Por ejemplo, puedes agregar el evento en la página de confirmación que aparece cuando alguien realiza una compra. En este instructivo, se muestra cómo agregar el evento a una página en la que alguien hace clic en el botón “Comprar”.
Coloca el evento en una etiqueta <script>
al final de la etiqueta <body>
.
Si colocas el evento directamente en la etiqueta <script>
, se activará el evento cuando se cargue la página. En la siguiente sección, se describe cómo activar el evento cuando alguien hace clic en "Comprar".
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button>Submit</button>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// If someone purchases more than one item,
// you can add those items to the items array
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
</script>
</body>
</html>
Paso 2: Conecta el evento a un botón
Puedes configurar el evento purchase
para que se active cuando un usuario haga clic en el botón "Comprar" de varias maneras. Una forma es agregar un ID al botón "Comprar" y, luego, colocar el código del evento en un objeto de escucha de eventos. En el siguiente
ejemplo, el evento solo se envía cuando alguien hace clic en un botón con el ID
purchase
.
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_2",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
Paso 3: Verifica que estés recopilando los datos
El informe de DebugView muestra datos en tiempo real de tu sitio web para que puedas asegurarte de configurar los eventos correctamente.
Para habilitar el modo de depuración en una página web, agrega el siguiente parámetro debug_mode
al comando config
:
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID',{ 'debug_mode': true });
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_3",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
Una vez que habilites el modo de depuración, comenzarás a ver los eventos que se propagan en el informe de DebugView a medida que las personas usan tu sitio web. Por ejemplo, si haces clic en el botón "Comprar" de tu sitio web, se propagará el informe con los siguientes datos. Puedes seleccionar un evento para ver los parámetros, las propiedades del usuario y los elementos asociados con el evento.
Paso 4: Consulta tus datos de comercio electrónico
Después de unas 24 horas, los datos que enviaste con el evento purchase
estarán disponibles en tus informes, exploraciones y la API de datos de Google Analytics.
También puedes acceder a los datos de BigQuery cuando configuras BigQuery Export.
El evento "purchase" propaga automáticamente una variedad de dimensiones y métricas prediseñadas, que se usan en tus informes, exploraciones, etcétera. Las siguientes son algunas de las dimensiones que se propagan con datos del evento purchase
en el primer paso:
Parámetro | Dimensión | Valor |
---|---|---|
affiliation |
Afiliación del artículo | Google Merchandise Store |
currency |
Currency | USD |
discount |
Importe de descuento del artículo | 2.22 |
index |
Posición de la lista de artículos | 0 |
item_brand |
Marca del artículo | |
item_category |
Categoría del artículo | Apparel |
item_id |
ID de artículo | SKU_12345 |
item_list_id |
ID de la lista de artículos | related_products |
item_list_name |
Nombre de la lista de artículos | Productos relacionados |
item_name |
Nombre del elemento | Camiseta de Stan and Friends |
item_variant |
Variante del artículo | green |
location_id |
ID de ubicación del artículo | ChIJIQBpAG2ahYAR_6128GcTUEo (el ID de Google Place para San Francisco) |
shipping |
Importe del envío | 5.99 |
tax |
Importe del impuesto | 4,90 |
transaction_id |
ID de transacción | T_12345 |
Además de las dimensiones, Google Analytics propaga varias métricas relacionadas con los ingresos y el comercio electrónico. Por ejemplo, si un usuario hace clic en el botón “Comprar” una vez, se propagarán las siguientes métricas en Google Analytics:
- La métrica Ingresos por artículos tiene un valor de USD 30.03
- La métrica Ingresos totales tiene un valor de USD 30.03
- La métrica Compras en comercio electrónico tiene el valor 1
Puedes usar estas dimensiones y métricas para crear informes personalizados y exploraciones, pero también puedes usar el siguiente informe precompilado de compras en comercio electrónico para consultar tus datos de comercio electrónico: