Cómo configurar un evento de compra

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:

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.

Captura de pantalla del informe de DebugView

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 Google
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:

Captura de pantalla del informe Compras en comercio electrónico