Configuración de etiquetas para AMP

El proyecto Accelerated Mobile Pages (AMP) es una plataforma web de código abierto que ayuda a mejorar el rendimiento del contenido web. AMP incluye compatibilidad integrada con la etiqueta de Google y Google Tag Manager. En esta guía, se describe cómo configurar Google Analytics para páginas de AMP.

Instalación

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

Selecciona tu preferencia de plataforma entre los siguientes botones:

Etiqueta de Google

La implementación de gtag.js en AMP usa el marco de trabajo amp-analytics para que puedas instrumentar estadísticas en tu sitio web de AMP. Los datos se pueden enviar desde páginas de AMP a Google Ads, Google Analytics y otros productos de Google desde la misma implementación de gtag.js.

Instalación

Para configurar la etiqueta de Google (gtag.js) en una página de AMP, primero asegúrate de 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>

Luego, agrega la etiqueta de Google a tu página de AMP como un componente JSON dentro de la etiqueta <body> de la página. Reemplaza <TARGET_ID> por el ID de etiqueta de los productos (p.ej., Google Ads o Google Analytics) a la que deseas 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 debes agregar el ID de destino a un comando config separado.

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

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

Activadores de eventos

Para enviar datos específicos a tus productos, configura activadores según los eventos, como los clics. Los activadores para gtag.js en AMP siguen los mismos patrones de JSON que otras configuraciones de activadores amp-analytics.

En este ejemplo, se muestra cómo enviar un evento click a Google Analytics. El valor selector es un selector CSS que te permite especificar qué elemento se segmenta. El valor on especifica 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 agrega parámetros adicionales según sea 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 que dos o más sitios relacionados en dominios separados se midan como uno solo. Para especificar los dominios que se deben 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", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

La capacidad de vincular tu dominio canónico desde la caché de AMP está habilitada de forma predeterminada. Para desactivar la capacidad de vincular el tráfico del dominio, agrega "linker": "false" a los parámetros 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

En este ejemplo de código, se muestra una demostración funcional completa de una página de AMP que crea una sola página de AMP y envía un evento button-click a Google Analytics cuando se hace clic en el botón. Reemplaza <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>

Solución de problemas

Usa amptagtest.appspot.com para validar la configuración de tu etiquetado, o bien puedes asegurarte de forma manual de que el valor cid sea coherente en todos los dominios de la siguiente manera:

  • Asegúrate de borrar las cookies o de usar el modo Incógnito.
  • Si no se encuentra cid en una cookie de Google Analytics, también se puede observar en la pestaña Red de tu navegador web. Busca collect request, y la carga útil debe contener un valor cid.

  • Una vez que hayas pasado de la CDN de Google al sitio web del cliente, los valores cid y gclid deben pasarse a través de la decoración de URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • La página de destino final debe tener el mismo valor de cid que la página de destino inicial.

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