Gracias por consultar la versión preliminar de la nueva documentación sobre plataformas de etiquetas de Google. Este sitio web está en versión beta pública. (Comentarios)

Configuración de etiquetas en AMP

El proyecto Accelerated Mobile Pages (AMP) es una plataforma web de software libre que contribuye a mejorar el rendimiento del contenido de los sitios web e integra funciones de compatibilidad con etiquetas de Google.

Instalación

Al instalar la etiqueta global de sitio web, puedes implementar Google Analytics, Google Ads y productos relacionados en páginas AMP. Al instalar Tag Manager se configura un contenedor AMP y puedes crear configuraciones avanzadas e implementar etiquetas de terceros desde la interfaz de Tag Manager. En esta guía se describe cómo configurar Google Analytics en páginas AMP.

Selecciona la plataforma que prefieras de las siguientes opciones:

Etiqueta global de sitio web

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

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, instala 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 que corresponda:

<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 toda la etiqueta 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 objetivo. El valor de on indica el tipo de evento, que en este caso es un evento de 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, 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 config:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        {: "<strong> }}"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. Sustituye <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>

Solucionar problemas

Usa amptagtest.appspot.com para validar la configuración de etiquetado. También puedes seguir estos pasos para comprobar que el valor de cid sea coherente en todos los dominios:

  • Borra las cookies o utiliza el modo de incógnito.
  • Si no se encuentra cid en una cookie de Google Analytics, se puede buscar en la pestaña Red del navegador web. Busca collect request, y la carga útil debe contener un valor cid.
  • Cuando envíes la CDN de Google al sitio web del cliente, debes pasar el valor de cid y gclid a través de la decoración de la URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
    
  • La página de destino final debe tener el mismo valor cid que en la página de destino inicial.

  • Ten cuidado con las redirecciones y los cambios de dominio que haya entre la página canónica y páginas de destino que no sean AMP.