Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
AMP

Añade el código de Google Analytics a tus páginas AMP en WordPress

Las páginas AMP cada día adquieren mayor importancia por su relevancia en los resultados de búsqueda en dispositivos móviles.

Hace unos meses escribí un post sobre cómo personalizar las páginas AMP en WordPress. Basándome en él, en este artículo vamos a ver cómo insertar el código de seguimiento de google analytics.

No, no sirve con pegar el tradicional:

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-X', 'auto'); ga('send', 'pageview'); </script>

Debido a las restricciones de JavaScript en Accelerated Mobile Pages, si metes este código por ejemplo en el template footer.php de AMP obtendrás un error de validación, y tus páginas AMP no aparecerán en los resultados de búsqueda.

 

Etiqueta amp-analytics

Para introducir el código de Google Analytics en nuestras páginas AMP debemos hacer uso de la etiqueta amp-analytics. Esta etiqueta soporta una serie de diferentes eventos:

  • Pageview
  • Anchor Clicks
  • Timer
  • Scrolling
  • AMP Carousel changes

 

Para que esta etiqueta funcione lo primero es introducir en el <head> de nuestra plantilla de AMP el script amp-analytics.js de la siguiente manera:

<!doctype html> <html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); ?>> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <?php do_action( 'amp_post_template_head', $this ); ?> <style amp-custom> <?php $this->load_parts( array( 'style' ) ); ?> <?php do_action( 'amp_post_template_css', $this ); ?> </style> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> </head>

Basándonos en el ejemplo del post anterior, ésto iría en la plantilla single.php de nuestros templates AMP. Simplemente añadimos antes del cierre de la etiqueta <head> una etiqueta script apuntando a https://cdn.ampproject.org/v0/amp-analytics-0.1.js.

El siguiente paso es introducir la etiqueta amp-analytics en el template footer.php del siguiente modo:

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

Simplemente sustituye el tracking-code UA-XXXXXXX-X por el de tu cuenta y listo. Con esto ya podrás ver el trackeo de páginas AMP en nuestro panel de Google Analytics.

Puedes consultar información adicional y casos de uso en la página de documentación oficial.

Puede que también te interese

Creando un plugin para WordPress parte 1: Planificación y planteamiento
Creando un plugin para WordPress parte 1: Planificación y planteamiento
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
Cómo desactivar Gutenberg cuando salga WordPress 5.0
Cómo desactivar Gutenberg cuando salga WordPress 5.0
La versión 5.0 de WordPress está a la vuelta de la esquina, prevista para finales de Agosto. Como ya sabrás a esta altura de la…
Forzar el uso de contraseñas seguras en WordPress
Forzar el uso de contraseñas seguras en WordPress
Cuando se habla de seguridad en WordPress (o en internet en general) se suele comentar que uno de los mayores bugs de seguridad se encuentra…
Cómo solucionar la pantalla blanca de la muerte en WordPress
Cómo solucionar la pantalla blanca de la muerte en WordPress
La WSOD (White Screen of Death o pantalla blanca de la muerte) es uno de los errores más comunes en WordPress. Identificaremos que nos encontramos…