Configurar 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 la etiqueta de Google y Google Tag Manager. En esta guía se describe cómo configurar Google Analytics en páginas AMP.

Instalación

La etiqueta de Google te permite instalar Google Analytics, Google Ads y otros productos de Google en páginas AMP. Con Google Tag Manager, se configura un contenedor AMP y puedes crear configuraciones avanzadas e implementar etiquetas de terceros desde la interfaz de Tag Manager.

Selecciona uno de los siguientes botones según la plataforma que prefieras:

Etiqueta de Google

En la implementación de gtag.js en AMP se usa el framework de amp-analytics para poder extraer analíticas de 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, Google Analytics y otros productos de Google.

Instalación

Para configurar la etiqueta de Google (gtag.js) en una página AMP, debes haber incluido el componente amp-analytics 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, añade la etiqueta de Google a tu página AMP como componente JSON dentro de la etiqueta <body> de la página. Sustituye <TARGET_ID> por el ID de etiqueta de los productos (como Google Ads o Google Analytics) a los que quieras enviar datos:

<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 varios productos en la etiqueta de Google, no es necesario que instales la etiqueta completa de ese producto. Solo tienes que añadir el ID de destino a un comando config independiente.

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

Consulta más información en 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 click 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 los eventos recomendados, puedes especificar tus propios 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",
        "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 <TAG_ID> por un ID de etiqueta 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": "<TAG_ID>",
            "config": {
              "<TAG_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.