Se usó la API de Cloud Translation para traducir esta página.

Cómo agregar Analytics a páginas de AMP

Accelerated Mobile Pages (AMP) es una plataforma que se usa a fin de crear páginas web para contenido estático que se procesa rápido. AMP incluye un elemento <amp-analytics> que permite medir las interacciones del usuario y cuenta con compatibilidad integrada para Google Analytics.

Configuración básica para medir las vistas de página

Para crear una instalación básica de Google Analytics en una página de AMP, copia este fragmento de código y reemplaza <GA_MEASUREMENT_ID> por el ID de tu etiqueta de Google. Cómo encontrar su ID de etiqueta de Google

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Cómo enviar datos a varios destinos

Puedes enviar datos a varios destinos con la misma etiqueta <amp-analytics>. Solo agrega el nuevo ID de medición <GA_MEASUREMENT_ID_NEW> a tu comando config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Cómo funciona

El elemento <amp-analytics> es un componente de AMP extendido y se habilita explícitamente como custom-element en una etiqueta de secuencia de comandos.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

El bloque de elementos <amp-analytics> está configurado para habilitar la compatibilidad con los productos de medición de Google. Establece el atributo type de <amp-analytics> en "gtag" (para habilitar la compatibilidad con gtag.js) y el atributo data-credentials en "include" (para habilitar las cookies).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP no permite JavaScript más allá de sus propias bibliotecas aprobadas, por lo que la configuración se realiza con JSON. Se agrega una propiedad gtag_id con un <GA_MEASUREMENT_ID> válido al bloque vars y, debajo de ella, se agrega una propiedad de configuración con <GA_MEASUREMENT_ID>: {} como valor.

Cómo medir eventos

Usa triggers con valores definidos para medir eventos en páginas de AMP. Estas propiedades se usan en la configuración de un activador:

selector: Es un selector CSS para especificar un elemento de destino.
on: Especifica el tipo de evento.
vars: Especifica el tipo de evento en event_name y agrega parámetros adicionales según sea necesario.

En este ejemplo, se muestra cómo configurar un evento básico de Google Analytics. Cree un activador llamado "button" que se activará cuando se haga clic en un elemento con un valor de ID de "the-button". Este activador enviará un valor event_name de "login" y un valor method de "Google" a Google Analytics:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Eventos de Google Analytics son una categoría de eventos específicos de Google Analytics que se usan comúnmente para crear informes sobre campañas. Estos valores se pueden especificar en el bloque vars con los parámetros event_category, event_label y value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Consulta la documentación de amp-analytics para obtener más información sobre la configuración del activador.

Modifica un parámetro

Para anular los parámetros predeterminados de Google Analytics o agregar parámetros nuevos, agrega los valores deseados a la sección parameter del bloque config. En este ejemplo, se anulan los valores predeterminados de vistas de página y eventos para page_title y page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Dominios de vínculos

El vinculador permite medir dos o más sitios relacionados en dominios separados. Especifica los dominios que deben vincularse con la propiedad "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

En las páginas de AMP con Google Analytics configurado, la opción para vincular a tu dominio canónico desde la caché de AMP está habilitada de forma predeterminada. Para inhabilitar la capacidad de Google Analytics de vincular el tráfico del dominio, agrega "linker": "false" a los parámetros de configuración:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Velocidad del sitio para Universal Analytics

Google Analytics está configurado para recopilar automáticamente datos de velocidad del sitio de una pequeña fracción del tráfico de tu sitio. Puedes cambiar la tasa de muestreo para recopilar más o menos datos. Para establecer la tasa de muestreo en 100%, agrega el código destacado a la configuración:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Para detener la recopilación de datos de velocidad del sitio, usa el código destacado:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

Tráfico de AMP en comparación con el tráfico que no es de AMP

De forma predeterminada, el tráfico de AMP usa ID de cliente distintos de los del tráfico web. Las páginas de AMP se cargan más rápido y muestran diferentes patrones de tráfico que sus equivalentes de páginas web estándar, lo que puede significar que obtendrás métricas diferentes entre el tráfico de AMP y el que no es de AMP.

Si usa una propiedad separada para medir el tráfico de AMP, podrá analizar mejor las métricas y obtener un panorama más preciso de su tráfico. Para distinguir el tráfico de AMP de uno que no es de AMP si necesitas usar una sola propiedad, haz lo siguiente:

Utilice la dimensión de fuente de datos o una dimensión personalizada (Universal Analytics).
Utilice un parámetro de evento personalizado (Google Analytics 4).

Cómo depurar tu configuración

El validador de AMP se puede usar para identificar si una página web no cumple con la especificación de AMP HTML. Agrega #development=1 a la URL de una página para activar el validador.

La extensión amp-analytics proporciona mensajes de advertencia y error para ayudar a depurar una configuración y solucionar problemas. Agrega #log=1 a la URL de una página para ver los mensajes de error registrados en la consola de tu navegador web.

Ejemplo completo

En este ejemplo, se muestra una página de AMP completa con un solo botón en una página. Esta configuración enviará a Google Analytics datos estándar de vistas de página y eventos de "clic en el botón":

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

Recursos relacionados

AMP: proyecto AMP
AMP: ¿Qué es AMP?
AMP: amp-analytics
gtag.js: Cómo usar gtag.js con AMP
Centro de ayuda de Universal Analytics: Accelerated Mobile Pages (AMP)
Centro de ayuda de Google Analytics 4: Accelerated Mobile Pages (AMP)