Cómo implementar Google Analytics con AMP
AMP es una forma de optimizar páginas web con contenido estático de manera que la carga sea mucho más rápida en móviles. Podemos implementar el código de Google Analytics con AMP utilizando el elemento amp-analytics. A continuación detallamos como poner Google Analytics con AMP:
Para ello, lo primero que debemos hacer es añadir el siguiente script en el <head> de la página, justo antes de la Libería JS AMP:
<script async custom-element=»amp-analytics» src=»https://cdn.ampproject.org/v0/amp-analytics-0.1.js»></script>
Después tendremos que añadir el elemento amp-analytics dentro del body de la página, con el atributo type googleanalytics. También es recomendable añadir un id al elemnto para identificarlo fácilemnte.
<amp-analytics type=»googleanalytics» id=»ampanalytics»>
</amp-analytics>
Finalmente, dentro del element amp-analytics añadiremos nuestro código de analytics con el ID de la propiedad que queremos trackear:
<script type=»application/json»>
{
«vars»: {
«account»: «UA-XXXXX-Y» // Sustituir por nuestro ID. Después borrar el comentario, ya que si no no funciona
},
«triggers»: {
«trackPageview»: {
«on»: «visible»,
«request»: «pageview»
}
}
}
</script>
También podemos implementar otras variables en el código de Analytics con AMP, para métricas específicas. En el siguiente ejemplo vemos cómo quedaría el código de una web con Analytics con AMP implementado:
<!doctype html>
<html amp lang=»es»>
<head>
<meta charset=»utf-8″>
<title>Ejemplo de página con Analytics y AMP</title>
<script async custom-element=«amp-analytics» src=»https://cdn.ampproject.org/v0/amp-analytics-0.1.js»></script>
<script async src=«https://cdn.ampproject.org/v0.js»></script>
</head>
<body>
<amp-analytics type=«googleanalytics» id=« ampanalytics»>
<script type=»application/json»>
{
«vars»: {
«account»: «UA-XXXXX-Y»
},
«triggers»: {
«trackPageview»: {
«on»: «visible»,
«request»: «pageview»
}
}
}
</script>
</amp-analytics>
<h1> Página web con Analytics y AMP</h1>
</body>
</html>
