Cómo configurar páginas web de Google AMP con seguimiento analítico

Cómo configurar páginas web de Google AMP con seguimiento analítico

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

1658876499 894 Como configurar paginas web de Google AMP con seguimiento analitico

Página de AMP

1658876500 951 Como configurar paginas web de Google AMP con seguimiento analitico

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

1658876500 648 Como configurar paginas web de Google AMP con seguimiento analitico

Página de AMP con cable

1658876500 640 Como configurar paginas web de Google AMP con seguimiento analitico

Entonces, ahora que hemos cubierto los conceptos básicos, procedamos y veamos cuáles son los beneficios reales de los AMP.

  1. Velocidad (para usuarios): El primer beneficio que viene a la mente es la velocidad del rayo que ofrecen los AMP. Es una vieja noticia que los usuarios de dispositivos móviles se enfrentan constantemente a retrasos en los sitios web, especialmente cuando se trata de búsqueda móvil. Por lo tanto, las páginas móviles aceleradas son muy útiles en este punto.
  2. Experiencia de usuario (para usuarios): Los AMP llevan la experiencia del usuario a un nivel completamente nuevo. Las ventanas emergentes interminables, los videos que se reproducen automáticamente y las animaciones molestas se eliminan con el marco AMP, lo que brinda a los usuarios una experiencia inmersiva en su sitio y su «ingrediente» clave: el contenido.
  3. Accesibilidad (Para Usuarios): Aunque el mundo se está moviendo increíblemente rápido para proporcionar a todos conexiones rápidas a Internet, aún así, algunos países tienen que hacer frente a conexiones lentas como caracoles. El marco AMP entra como una bola de demolición que destruye las paredes de las malas conexiones a Internet.
  4. Carrusel de historias destacadas (para editores): Las páginas móviles aceleradas le brindan la posibilidad de aparecer en las «noticias principales», el carrusel móvil que se encuentra en la parte superior de los resultados de búsqueda de Google. Esto revela una oportunidad para que el propietario del sitio genere más tráfico a su sitio web.
  5. Comportamiento de usuario mejorado (para editores): Como resultado de una mejor experiencia de usuario y páginas de carga rápida, es más probable que las personas vean más páginas e interactúen con el sitio, lo que reduce la tasa de rebote.
  6. Aumento de los ingresos publicitarios (para editores): De acuerdo a Googlemás del 90 % de los editores ven porcentajes de clics más altos y la gran mayoría de ellos obtienen eCPM más altos.

Procedamos ahora con la integración de Accelerated Mobile Pages. Vamos a ejecutar con un sitio web de WordPress para fines de ejemplo.

Agregar AMP a WordPress

La integración de AMP con WordPress es bastante sencilla y simplemente se reduce a descargar el Complemento oficial de AMP para WordPress.

1658876500 540 Como configurar paginas web de Google AMP con seguimiento analitico

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

1658876500 134 Como configurar paginas web de Google AMP con seguimiento analitico

URL de publicación de AMP

1658876500 895 Como configurar paginas web de Google AMP con seguimiento analitico

También vale la pena verificar que la versión AMP de la publicación incluya una rel=canónicoetiqueta 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 canónico». Vea un ejemplo a continuación:

1658876501 682 Como configurar paginas web de Google AMP con seguimiento analitico

¡Viola! Aunque sus AMP se verán bastante genéricos sin ningún estilo adicional, está listo para comenzar desde aquí.

Adición de Google Analytics (GA)

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’.

1658876501 321 Como configurar paginas web de Google AMP con seguimiento analitico

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:

Método 1

Instalar Pegamento para Yoast SEO y AMP enchufar.

1658876501 620 Como configurar paginas web de Google AMP con seguimiento analitico

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.

1658876501 223 Como configurar paginas web de Google AMP con seguimiento analitico

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.

Método 2

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’.

1658876501 276 Como configurar paginas web de Google AMP con seguimiento analitico

Elegir amp/templates/single.php de la lista de archivos de complemento en el lado derecho de la pantalla.

1658876501 245 Como configurar paginas web de Google AMP con seguimiento analitico

Para que su secuencia de comandos funcione, primero debe colocar la siguiente secuencia de comandos AMP entre y etiquetas como se muestra en la imagen de abajo.

1658876501 166 Como configurar paginas web de Google AMP con seguimiento analitico

Luego, coloque el siguiente código de seguimiento JSON entre y etiquetas como se muestra en la imagen de abajo.



{
«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”
}
}
}

1658876501 571 Como configurar paginas web de Google AMP con seguimiento analitico

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í.

Solución de problemas de integración de Google Analytics

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’.

1658876502 282 Como configurar paginas web de Google AMP con seguimiento analitico

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.

1658876502 394 Como configurar paginas web de Google AMP con seguimiento analitico

Conclusión

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.