Las páginas en AMP son la versión ultraoptimizadas para el mínimo consumo de datos móviles y rapidez en mostrarla. Es importante saber cómo agregar Google Analytics a las páginas AMP de WordPress para tener un control sobre ellas de la misma forma que con las versiones estándar.
Anteriormente escribí otro artículo sobre el mismo tema, pero integrando Analytics sin adaptación alguna a los estándares de AMP. Te puede ser muy útil la sección inicial para crear la versión AMP completa.
Requisito para agregar Google Analytics
Como decía en el párrafo anterior, en el citado artículo donde trato el mismo tema de Google Analytics y AMP pero con un método más agresivo, es obligatorio tener instalado el plugin AMP oficial de Automaticc para poder abregar Google Analytics a las páginas AMP de WordPress.
Todos los códigos que añadiremos serán en este plugin.
Insertar script de la librería AMP
Revisar si existe ya o no. En tal caso, sigue los siguiente pasos:
- Clic en Plugins y después en Editor.
- Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
- En la columna derecha buscamos amp/templates/single.php y clic en este último.
- Este php se abrirá en el recuadro principal para editar. Buscamos la etiqueta de cierre </head> y pegamos justo en la línea superior en blanco el código del script de la librería AMP y guardamos:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Es posible que por algún sistema de seguridad, o plugin, no te permita editar los plugins en vivo a través del dashboard de WordPress. Tendrás que hacerlo mediante conexión FTP a tu hosting o directamente mediante el CPanel del mismo.
Insertar script del elemento amp-analytics
Seguimos los mismos pasos que en el anterior:
- Clic en Plugins y después en Editor.
- Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
- En la columna derecha buscamos amp/templates/single.php y clic en este último.
- Este php se abrirá en el recuadro principal para editar. Buscamos la etiqueta de cierre </head> y pegamos justo en la línea superior en blanco del script de la librería AMP, el script para el elemento amp-analytics y guardamos:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Insertar script Google Analytics a las páginas AMP de WordPress
De nuevo, seguimos los mismos pasos que en el anterior:
- Clic en Plugins y después en Editor.
- Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
- En la columna derecha buscamos amp/templates/single.php y clic en este último.
- Este php se abrirá en el recuadro principal para editar. Buscamos la etiqueta de cierre <body> y pegamos justo en la línea inferior en blanco el código del script para llamar al elemento amp-analytics, y dentro de este, el código de seguimiento oficial de Google Analytics:
<amp-analytics type="googleanalytics" id="IDamp">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Si te fijas en el código amp-analytics, uso un id para realizar un seguimiento a este elemento. Te recomiendo que le asignes uno reconocible para ti.
En cuanto al código de seguimiento Google Analytics, verás que es bastante diferente al que te suministra Google.
Está adaptado para los estándares AMP y Google. Básicamente copia y pega modificando únicamente el código account por el tuyo tipo UA-XXXXXXXX-X.
Una vez hecho esto, ya puedes guardarlo.
Más información sobre cómo agregar Google Analytics a las páginas AMP de WordPress
Ahora puedes enviar visitas de prueba como te ofrece Google Search Console. También puedes hacerlo tú manualmente añadiendo a la url /amp/.
Un consejo extra sería validarla a través de estas herramientas según los detalles que necesites:
- Validador de Google AMP.
- Validador de AMP Project.
- Plugin para Chrome.
Instrucciones directas de Google con más aspectos a tener en cuenta.
Más información de Accelerated Mobile Pages (AMP).
Y si os he sido de ayuda, podéis invitarme a una copa o ayudarme aportando a mi patreon 😀 para futuros artículos!
3 respuestas a “Cómo agregar Google Analytics a las páginas AMP de WordPress”
Muchas gracias José Andrés por tu explicación pero me surge una duda, ¿sería posible hacerlo sin modificar los archivos del plugin? La cuestión es evitar que si se actualiza el plugin nos borre las modificaciones
Sorry Chus, pero es el método que utilicé para levantar AMP ASAP.
Si encuentras otro camino ¡háznoslo saber!
Muchas gracias por la explicación!
Ahora no tendré problemas a la hora de la implementación en la versión AMP.
Saludos!