Etiqueta global de sitio web para AMP

En la implementación de gtag.js en AMP se usa el framework de amp-analytics para que se puedan incluir analíticas en los sitios web de AMP. Se pueden enviar datos desde las páginas AMP a Google Ads, DoubleClick y Google Analytics con la misma implementación de gtag.js.

Instalación

Para configurar gtag.js en una página AMP, el primer paso es comprobar que el componente amp-analytics se haya incluido en la etiqueta <head> de la página:

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

A continuación, deberás instalar la etiqueta global de sitio web. Añade el código de la etiqueta a la página AMP como componente JSON, dentro de las etiquetas <body> de la página. Sustituye <TARGET_ID> por el ID de conversión de Google Ads, el ID de anunciante de DoubleClick o el ID de Google Analytics correspondiente:

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

Para configurar más productos en la etiqueta global de sitio web, no es necesario instalar todo el fragmento de código del producto en cuestión. Solo tienes que añadir el ID correspondiente al objeto config. En este ejemplo, se añade un ID de conversión de Google Ads a una configuración de Google Analytics que ya existe. Sustituye <AW-CONVERSION_ID> y <GA_MEASUREMENT_ID> por los valores de tu producto.

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

Para obtener más información, consulta la documentación de amp-analytics.

Activadores de eventos

Para enviar datos concretos a tus productos, configura activadores de eventos como los clics. Los activadores de gtag.js en AMP tienen los mismos patrones de JSON que las demás configuraciones de activadores de amp-analytics.

En este ejemplo se muestra cómo enviar un evento de clic a Google Analytics. El valor de selector es un selector de CSS que permite especificar el elemento de destino. El valor de on indica el tipo de evento, que en este caso es click. En la sección vars, especifica el tipo de evento en event_name y añade otros parámetros si es necesario.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Además de la lista de eventos sugeridos para gtag.js, también puedes especificar eventos personalizados.

El vinculador de dominios permite medir dos o más sitios web relacionados de dominios distintos como si fueran un solo sitio. Para especificar los dominios que se deben vincular, utiliza "linker": { "domains": [...] }:

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

La opción de vincular el dominio canónico desde la caché de AMP está habilitada de forma predeterminada. Para evitar que se 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": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Ejemplo completo

Este ejemplo de código contiene una demostración completa de una página AMP que crea una sola página AMP y envía un evento button-click a Google Analytics cuando se hace clic en el botón. Recuerda que tienes que sustituir <GA_MEASUREMENT_ID> por un ID de producto válido:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>