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 para crear páginas web de contenido estático que se renderiza rápidamente. AMP incluye un elemento <amp-analytics> que permite medir las interacciones del usuario y tiene compatibilidad integrada con 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. Busca el ID de tu 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>

Envía datos a varios destinos

Puedes enviar datos a varios destinos con la misma etiqueta <amp-analytics>. Para ello, simplemente 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 tanto, la configuración se realiza con JSON. Se agrega una propiedad gtag_id con un <GA_MEASUREMENT_ID> válido al bloque vars y, a continuación, 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 una configuración del activador:

selector: Es un selector CSS que permite 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 si es necesario.

En este ejemplo, se muestra cómo configurar un evento básico de Google Analytics. Crea un activador llamado "button" que se active cuando se haga clic en un elemento con el valor de ID "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>

Los eventos de Google Analytics son una categoría de eventos específica de Google Analytics que se suelen usar para crear informes sobre las 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 de activadores.

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 de tu 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 de dominios permite medir como uno solo dos o más sitios relacionados de dominios separados. Especifica los dominios que se deben vincular 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 que tienen configurado Google Analytics, la funció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 para 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 para 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 tu 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 dejar de recopilar datos sobre la 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 que no es de AMP

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

Usar una propiedad independiente para medir el tráfico de AMP te permite analizar mejor las métricas y obtener un panorama más preciso de tu tráfico. Para distinguir el tráfico de AMP del que no es de AMP si necesitas usar una sola propiedad, haz lo siguiente:

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

Depura tu configuración

El validador de AMP puede usarse 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 y solucionar problemas de una configuración. Agrega #log=1 a la URL de una página para ver los mensajes de error registrados en la consola del 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á datos de vistas de página estándares y eventos de "clic en un botón" a Google Analytics:

<!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: Usa 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)