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 ha 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, instala la etiqueta global de sitio web. Añade el código de la etiqueta a la página AMP como componente de 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 seguimiento 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 de segmentación 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 tengas. Sustituye <AW-CONVERSION_ID> Y <GA_TRACKING_ID> por los valores de tu producto.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_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 un evento 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.

La función de vinculación de dominios permite medir dos o más sitios web relacionados de dominios distintos como si fueran uno solo. Para especificar los dominios que quieres vincular, usa "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"] }
      }
    }
  }
}
</script>
</amp-analytics>

La capacidad de vincular el dominio canónico desde la memoria caché de AMP está habilitada de forma predeterminada. Para inhabilitar la capacidad de vincular tráfico de distintos 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_TRACKING_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_TRACKING_ID>",
            "config": {
              "<GA_TRACKING_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>