Si ha estado siguiendo los cambios de Google recientemente, es posible que haya notado que se obsesionaron con la web móvil. Y hay un par de fuertes razones para apoyar eso.
De acuerdo a Tierra del motor de búsquedaGoogle ha confirmado oficialmente que la búsqueda móvil superó a la de escritorio en 2015. Además, en octubre de 2016, Google Anunciado indexación móvil primero que se enfoca en priorizar la versión móvil del contenido de un sitio web sobre la versión de escritorio al asignar clasificaciones de búsqueda.
Esta obsesión condujo a la introducción de Páginas móviles aceleradas (también conocido como AMP) que están diseñados principalmente para proporcionar al usuario móvil una experiencia de sitio web inmersiva y ultrarrápida.
En esencia, mientras que las páginas móviles aceleradas son similares a las páginas HTML genéricas, el marco AMP elimina cualquier JavaScript personalizado, la mayoría de los estilos CSS, widgets y complementos (incluidos los scripts/códigos de seguimiento originales de Google Analytics), lo que hace que las páginas y las publicaciones se carguen casi instantáneamente.
Para darle un ejemplo práctico de la diferencia de carga entre páginas AMP y no AMP, eche un vistazo a las pruebas de velocidad de https://www.wired.com/ abajo:
Página no AMP
Página de AMP
Como puede ver, aunque el grado de rendimiento no ha aumentado drásticamente, la diferencia en la velocidad de carga es dramática. Solo míralo, la versión AMP se cargó en solo 101 ms. Eso es simplemente increíble.
Es genial que tengamos un tiempo de carga decente, podría decir, pero sin CSS pesado, los AMP se verán feos.
Buen punto, pero esa no es la realidad.
Si dedica algún tiempo a personalizar los AMP y solo aplica lo que permite el marco, apenas notará la diferencia entre la página AMP y la que no es AMP. De hecho, potencialmente puede hacerlos (casi) idénticos.
Aquí hay un ejemplo:
Página sin AMP con cable
Página de AMP con cable
Entonces, ahora que hemos cubierto los conceptos básicos, procedamos y veamos cuáles son los beneficios reales de los AMP.
Procedamos ahora con la integración de Accelerated Mobile Pages. Vamos a ejecutar con un sitio web de WordPress para fines de ejemplo.
La integración de AMP con WordPress es bastante sencilla y simplemente se reduce a descargar el Complemento oficial de AMP para WordPress.
Después de descargar y activar el complemento, generará automáticamente versiones AMP de sus publicaciones (el complemento actualmente no admite páginas).
Para ver cómo se ven sus AMP, solo ingrese /amperio/ al final de la URL de tu publicación. Aquí hay un ejemplo:
URL de publicación que no es AMP
URL de publicación de AMP
También vale la pena verificar que la versión AMP de la publicación incluya una ‘rel=canónico‘ etiqueta que apunta a la versión correspondiente de esa publicación (es decir, la versión original).
Para verificar eso, vaya a una página de AMP en particular y ‘ver fuente’ de la pagina A continuación, debe buscar la línea que comienza con ‘
¡Viola! Aunque sus AMP se verán bastante genéricos sin ningún estilo adicional, está listo para comenzar desde aquí.
Ahora, podemos seguir adelante y hacer que nuestras páginas móviles aceleradas sean rastreables mediante la integración de Google Analytics.
En primer lugar, es recomendado para agregar una nueva propiedad de Google Analytics para recopilar datos de sus AMP.
Para hacer eso, inicie sesión en su Google Analytics existente, vaya a ‘Administración’haga clic en el ‘Propiedad’ desplegable y golpear ‘Crear nueva propiedad’.
Después de agregar una nueva propiedad, deberá obtener su ID de seguimiento yendo a ‘Administración’ > ‘Propiedad’ > ‘Configuración de la propiedad’.
Se verá algo como:
UA-11111111-7
Ahora que ha configurado su nueva propiedad de GA, ahora podemos proceder e integrar Google Analytics a nuestros AMP recién agregados.
Hay dos maneras de hacer esto:
Instalar Pegamento para Yoast SEO y AMP enchufar.
Este complemento no solo le brinda la capacidad de agregar seguimiento de GA a sus AMP, sino que también le permite personalizar el aspecto de sus páginas móviles aceleradas, al menos hasta cierto punto.
Tan pronto como instale el complemento, navegue a su configuración y haga clic en el ‘Analítica’ pestaña.
Tenga en cuenta: Los scripts genéricos de GA no funcionarán con el marco de AMP, por lo que deberá agregar un específico de AMP Versión JSON de su script de GA.
Simplemente agregue las siguientes líneas al campo de seguimiento en el análisis de AMP de Yoast Glue. Asegúrese de reemplazar una identificación de seguimiento predeterminada con su identificación única.
{
«vars»: {
“cuenta”: “UA-XXXXX-Y” – Reemplace esto con su código de seguimiento
},
“desencadenantes”: {
«seguimiento de página vista»: {
“encendido”: “visible”,
“solicitud”: “página vista”
}
}
}
Vale la pena señalar que este método puede no funcionar para todos. Para solucionar los problemas de su instalación de GA utilizando este enfoque, abra una de sus páginas móviles aceleradas, navegue a Google Analytics y verifique las sesiones en tiempo real. Si ve tráfico en vivo, su script de GA se instaló correctamente.
De lo contrario, si no ve ninguna sesión en vivo, es probable que este método no le haya funcionado. En este caso, deberá seguir el método a continuación.
Este enfoque es un poco más complicado, pero seguramente funcionará.
En primer lugar, navegue a su panel de WordPress y vaya a ‘Complementos’. Luego, busque el complemento oficial de AMP y haga clic en ‘Editar’.
Elegir amp/templates/single.php de la lista de archivos de complemento en el lado derecho de la pantalla.
Para que su secuencia de comandos funcione, primero debe colocar la siguiente secuencia de comandos AMP entre
Luego, coloque el siguiente código de seguimiento JSON entre
{
«vars»: {
“cuenta”: “UA-XXXXX-Y” – Reemplace esto con su código de seguimiento
},
“desencadenantes”: {
«seguimiento de página vista»: {
“encendido”: “visible”,
“solicitud”: “página vista”
}
}
}
Tenga en cuenta: Este código de seguimiento en particular se utiliza para rastrear las visitas a la página. Si desea realizar un seguimiento de los eventos, utilice la base del siguiente código:
{
«vars»: {
“cuenta”: “UA-XXXXX-Y” – Reemplace esto con su código de seguimiento
},
“desencadenantes”: {
“trackClickOnHeader”: {
«al hacer clic»,
“selector”: “#encabezado”,
“solicitud”: “evento”,
«vars»: {
«eventCategory»: «componentes de interfaz de usuario»,
“eventAction”: “clic en el encabezado”
}
}
}
}
Si desea realizar un seguimiento de las interacciones sociales para ver cuántas personas hacen clic en sus íconos para compartir en redes sociales, use la base del código a continuación:
{
«vars»: {
“cuenta”: “UA-XXXXX-Y” – Reemplace esto con su código de seguimiento
},
“desencadenantes”: {
“trackClickOnTwitterLink”: {
«al hacer clic»,
“selector”: “#tweet-enlace”,
“solicitud”: “social”,
«vars»: {
“red social”: “twitter”,
“acciónsocial”: “tuitear”,
“socialTarget”: “https://www.examplepetstore.com” – Reemplace con su propia URL
}
}
}
}
También puede agregar otras redes sociales como Facebook y Google+.
Para obtener más información sobre el seguimiento de eventos e interacciones sociales, diríjase a aquí.
Para verificar si su seguimiento de GA se ha implementado correctamente, abra cualquiera de sus páginas de AMP y diríjase a su panel de control de Google Analytics. Luego, haga clic en ‘Tiempo real’ > ‘Visión general’.
Si ve tráfico en vivo, su secuencia de comandos funciona correctamente.
También vale la pena verificar la validación de sus AMP. Para hacer eso, vaya a Validador de AMP de la consola de búsqueda e ingrese su URL de AMP.
Las herramientas devolverán si su página es un AMP válido. Si no, verifique y corrija todos los errores.
Las páginas móviles aceleradas pueden ser extremadamente poderosas y efectivas para grandes publicaciones en línea, agencias de noticias y blogs de alto tráfico. Si simplemente ejecuta un sitio web comercial de 5 páginas y no produce contenido de manera regular, no es nada de lo que deba preocuparse en este momento.
Antes de integrar AMP en su sitio, asegúrese de que ya tiene una versión móvil normal del sitio web.
Sobre el Autor: Dmytro es un mago principal en Solvid, una agencia creativa de desarrollo de software y marketing entrante en Londres, Reino Unido. Su trabajo ha sido presentado y mencionado en una amplia gama de publicaciones, incluidas The Next Web, Business2Community, The Huffington Post, Sitepoint, SEMRush, Lifehack, Backlinko y más. También es autor de La guía definitiva para las herramientas de blogs.
