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:

  1. Clic en Plugins y después en Editor.
  2. Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
  3. En la columna derecha buscamos amp/templates/single.php y clic en este último.
  4. 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:

  1. Clic en Plugins y después en Editor.
  2. Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
  3. En la columna derecha buscamos amp/templates/single.php y clic en este último.
  4. 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:

  1. Clic en Plugins y después en Editor.
  2. Arriba a la derecha indicaremos en Elige el plugin a editar, la opción AMP y clic en Elegir.
  3. En la columna derecha buscamos amp/templates/single.php y clic en este último.
  4. 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:

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!

Publicado por José Andrés Noguera Muñoz

Product Owner & Advisor feliz, regando pequeños brotes para ayudarlos a crecer hasta convertirlos en grandes sequoias del sector #legaltech.

Únete a la conversación

1 comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  1. Muchas gracias por la explicación!

    Ahora no tendré problemas a la hora de la implementación en la versión AMP.

    Saludos!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies