AMP

Cómo configurar Google Analytics en AMP de manera fácil

Vamos a ver cómo configurar Google Analytics en AMP, el código de seguimiento de Analytics es diferente en las páginas AMP, en caso de insertar el código tradicional la página quedaría marcada con errores.

Otros post interesantes sobre AMP:

Sintaxis para configurar Google Analytics en AMP

Lo primer de todo debemos referenciar la libreria obligatoria de Analytics para AMP dentro del HEAD, el código es el siguiente:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

De esta manera ya podríamos componer el código de seguimiento en formato JSON, os muestro la sintaxis:

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
        "vars": {"account": "UA-XXXXXXXXXX"},
        "triggers": {"trackPageview": {"on": "visible", "request": "pageview"}}
        }
    </script>
</amp-analytics>

Sustituyendo el ‘XXXXXXXXXX’ por nuestro ID estaría listo el código y lo podemos poner justo al inicio del BODY.

Sintaxis para configurar GTAG en AMP

Otra variación del código de seguimiento sería mediante la etiqueta GTAG, tras consultar la documentación oficial este sería el código necesario:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Referenciamos la librería obligatoria y después la confección del código es el siguiente:

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

Solo nos falta sustituir ‘GA_MEASUREMENT_ID’ por nuestro ID de Analytics (2 veces en el código) y ya tendríamos preparado el código de Analytics mediante GTAG.

No os olvidéis nunca de validar las páginas AMP para evitar errores en el código.