Cómo agregar Analytics a páginas de AMP

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Accelerated Mobile Pages (AMP) es una plataforma que se utiliza para crear páginas web destinadas a 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 páginas vistas

Para crear una instalación básica de Google Analytics en una página de AMP, copie este fragmento de código y reemplace <GA_MEASUREMENT_ID> por el ID de propiedad que desea utilizar. (busca tu ID de Google Analytics).

<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 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 para <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, 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 de activador:

  • selector: Es un selector de 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. Crear un activador llamado "button" que se activará 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íficos de Google Analytics que se utilizan comúnmente para generar 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 del activador.

Modifique los parámetros

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 páginas vistas 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>

El vinculador de dominios permite que dos o más sitios relacionados en dominios independientes se midan como uno solo. 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 de vincular su 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

Google Analytics está configurado para recopilar datos de velocidad del sitio de forma automática 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 tráfico que no es de AMP

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

El uso de una propiedad separada para medir el tráfico de AMP permite un mejor análisis de las métricas y una visión más precisa de su tráfico. Si necesita utilizar una sola propiedad para medir el tráfico de AMP y el que no es de AMP, utilice la dimensión de fuente de datos o una dimensión personalizada para distinguirlos.

De forma predeterminada, Google Analytics enviará el valor AMP mediante la dimensión de la fuente de datos. Use este valor para segmentar, filtrar o analizar de otra manera el contenido de AMP en comparación con el que no es de AMP en una sola vista.

Depura 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 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 de tu navegador web.

Ejemplo completo

En este ejemplo, se muestra una página de AMP completa con un solo botón. Esta configuración enviará datos estándares de visualización de página y eventos de click-click 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>