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 de tu contenido web. AMP incluye las 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.

La etiqueta de Google te permite instalar Google Analytics, Google Ads y otras productos de Google en páginas de AMP. Google Tag Manager configura un contenedor de AMP y permite crear configuraciones avanzadas e implementar herramientas de la interfaz de Tag Manager.

Selecciona tu preferencia de plataforma entre los siguientes botones:

.

La implementación de AMP de gtag.js utiliza el framework amp-analytics para te dan la posibilidad de instrumentar el análisis en tu sitio web de AMP. Los datos pueden ser enviados desde páginas de AMP a Google Ads, Google Analytics y otros productos de Google a partir de la misma implementación de gtag.js.

Instalación

Para configurar la etiqueta gtag.js en una página de AMP, primero asegúrate de haber incluyó 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 del <body> en la página. Reemplaza <TARGET_ID> por el El ID de etiqueta de los productos (p.ej., Google Ads, Google Analytics) al 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 el etiqueta 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 amp-analytics.

Activadores de eventos

Para enviar datos específicos a tus productos, configura activadores basados en eventos como los clics. Los activadores para gtag.js en AMP siguen los mismos patrones JSON que otros parámetros de configuración del activador amp-analytics.

En este ejemplo, se muestra cómo enviar un evento click a Google Analytics. El El valor selector es un selector CSS que te permite especificar qué elemento se están orientados. El valor on especifica el tipo de evento, que en este caso es un click evento. 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 distintos medirse como uno solo. Para especificar los dominios que deben vincularse, 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 para 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

Este ejemplo de código ilustra 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 Estadísticas cuando se hace clic en el botón Reemplaza <TAG_ID> por un valor válido ID de etiqueta:

<!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 del etiquetado o puedes realizarlo de forma manual. Asegúrate de que el valor de cid sea coherente en todos los dominios. Para ello, haz lo siguiente: lo siguiente:

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

  • Una vez que haya pasado de la CDN de Google al sitio web del cliente, la cid y el valor gclid se deben pasar 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 en la página de destino inicial.

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