Añadir Analytics a páginas AMP

Accelerated Mobile Pages (AMP) es una plataforma para crear páginas web de contenido estático que se carga rápidamente. AMP incluye un elemento <amp-analytics> que permite medir las interacciones de los usuarios y es compatible con Google Analytics.

Configuración básica para medir páginas vistas

Para crear una instalación básica de Google Analytics en una página AMP, copia este fragmento de código y sustituye <GA_MEASUREMENT_ID> por el ID de propiedad que quieras usar. 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 AMP extendido y se habilita explícitamente como custom-element en las etiquetas 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 ser compatible con los productos de medición de Google. Asigna al atributo type de <amp-analytics> el valor gtag (para habilitar la compatibilidad con gtag.js) y al atributo data-credentials el valor include (para habilitar las cookies).

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

La tecnología AMP no permite usar ningún código JavaScript que no forme parte de sus propias bibliotecas, por lo que la configuración se lleva a cabo con JSON. Se añade una propiedad gtag_id con un ID <GA_MEASUREMENT_ID> válido al bloque vars y, debajo, se añade una propiedad de configuración con el ID <GA_MEASUREMENT_ID>: {} como valor.

Medir eventos

Utiliza triggers con valores definidos para medir eventos en páginas AMP. En las configuraciones de activador se utilizan estas propiedades:

  • selector: 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 añade otros parámetros 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á a Google Analytics el valor login de event_name y el valor Google de method.

<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 esta plataforma que se suelen utilizar para crear informes sobre campañas. Estos valores se pueden especificar en el bloque de variables 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 los activadores.

Modificar parámetros

Para anular los parámetros predeterminados de Google Analytics o añadir parámetros nuevos, incluye los valores que quieras en la sección parameter del bloque config. En este ejemplo se anulan los valores predeterminados de páginas vistas y eventos correspondientes a 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 medir dos o más sitios web relacionados de dominios distintos como si fueran un solo sitio. Especifica los dominios que quieres 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 AMP en las que se ha configurado Google Analytics, se establece un vínculo entre el dominio canónico y la caché de la página AMP de forma predeterminada. Para evitar que Google Analytics vincule tráfico de dominios, añade "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 recoger automáticamente datos de velocidad a partir de una pequeña parte del tráfico del sitio. Puedes cambiar la frecuencia de muestreo para recoger más o menos datos. Para fijar la frecuencia de muestreo en el 100 %, añade a tu configuración el código que aparece destacado aquí:

<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 recoger datos de velocidad del sitio, utiliza el código que aparece destacado aquí:

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

Páginas AMP y páginas que no son AMP

El tráfico de páginas AMP utiliza IDs de cliente distintos de los que se usan con el tráfico web de forma predeterminada. Las páginas AMP se cargan más deprisa y muestran patrones de tráfico diferentes que los de las páginas web estándar, por lo que es muy posible que las métricas del tráfico de las páginas AMP y de las que no son AMP no coincidan.

Al usar una propiedad distinta para medir el tráfico AMP, las métricas se pueden analizar mejor y, en consecuencia, se obtiene una visión más precisa del tráfico. Si tienes que utilizar una única propiedad para medir el tráfico de páginas AMP y no AMP, usa la dimensión de fuente de datos o una dimensión personalizada para diferenciarlo.

De forma predeterminada, Google Analytics enviará el valor AMP a través de la dimensión de la fuente de datos. Con este valor puedes segmentar, filtrar y analizar el contenido de las páginas AMP y compararlo con el contenido de las páginas que no son AMP en una misma vista.

Depurar la configuración

Puedes usar la herramienta de validación de AMP para identificar si una página web no cumple las especificaciones HTML de AMP. Para activar la herramienta, debes añadir #development=1 a la URL de la página.

La extensión amp-analytics muestra mensajes de error y de advertencia para ayudarte a depurar las configuraciones y a solucionar problemas. Añade #log=1 a la URL de la página que quieras para ver los mensajes de error registrados en la consola de tu navegador web.

Ejemplo completo

En este ejemplo se muestra una página AMP completa con un solo botón. Esta configuración enviará los datos de páginas vistas estándar y los eventos "button-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>