La mejor plataforma PWA para Magento: Magento PWA Studio vs Vue Storefront

“En el año 2018, las ventas de comercio móvil en los EE.UU. representaron el 39,6% de las ventas totales de largo alcance de comercio electrónico minorista $ 208,1 mil millones.”      -Emarketer

mobile commerce stats

El la fuente también confirma que se espera que la barra cruce la marca de $ 270 mil millones para fines de 2019. Las estadísticas son una prueba clara de que el teléfono móvil ha comenzado a dominar el comercio electrónico y con la facilidad que brindan para hacer pedidos y mantener un seguimiento de ellos, solo pueden volverse más populares en los próximos años.

Teniendo en cuenta las opciones conocidas para desarrollar sitios web compatibles con dispositivos móviles, PWA ha evolucionado como una de las formas más populares en los últimos tiempos. La tecnología presenta lo mejor de los dos sitios web del mundo y aplicaciones nativas para brindar a los clientes excelentes servicios.

En los últimos tiempos, Magento lanzó su proyecto PWA interno: Magento PWA Studio para agregar la plataforma PWA para la tienda Magento con facilidad. 

En este post, discutiremos el alcance de Magento PWA Studio y la próxima plataforma PWA más popular para Magento Vue Storefront, y su situación en el ámbito del comercio móvil. 

Magento PWA Studio

Magento PWA Studio

Magento identificó rápidamente el enorme potencial que tienen los teléfonos móviles en el nicho de comercio electrónico y la desventaja de excluirlo durante el desarrollo de la tienda Magento.

2019 ha sido un gran año para los propietarios de tiendas Magento. Desde que Magento 2.3 presentó PWA Studio, los propietarios de tiendas han experimentado una gran expansión en su alcance para usuarios móviles con márgenes considerables. Esto no hace falta decir que ha multiplicado sus visitas a la página por múltiples, mientras que también ha mejorado sus tasas de conversión en un buen número.

PWA Studio permite acceder de manera eficiente a las tiendas Magento en pantallas móviles, mientras que también ha mejorado el rendimiento del sitio web en las pantallas de escritorio. Los escaparates de Magento son más variados y responden más rápido que nunca, lo que contribuye a la respuesta del sitio web con una nota alta.

Aquí presentamos un ejemplo de una empresa bien establecida que obtuvo los mejores beneficios de la tecnología PWA mediante la contratación de desarrolladores de Magento PWA.

Una marca B2B experimentó un aumento del 29,6% en la compra de usuarios. 

Entre miles de historias de éxito de Magento, está la Baker Distribution Company, que vio un aumento de alrededor del 30% en sus usuarios compradores cada año, desde que crearon su tienda basada en Magento PWA Studio.

La compañía es un famoso distribuidor de más de 70 años de productos HVAC que recientemente se dio cuenta de que pueden reafirmar su participación en el mercado B2B con el creciente comercio móvil. Magento PWA Studio hizo el milagro por ellos al aumentar sus ventas en poco tiempo.

Los números exactos son:

  • aumento del 28,6% en el volumen de pedidos año tras año;
  • Aumento del 29,6% en la compra de usuarios;
  • Aumento del 48,4% en la velocidad de respuesta de la página.

Pero, ¿qué hace que Magento PWA Studio sea tan eficiente?

Magento PWA Studio ofrece una gran cantidad de funciones donde se ofrece al usuario los medios más fáciles de acceder a las tiendas incluso en las pantallas móviles. Además, la herramienta PWA también mejora el rendimiento del sitio web en la pantalla del escritorio permitiendo que las páginas se carguen y respondan más rápido. Las siguientes son las principales características que Magento PWA Studio ofrece a sus usuarios:

Opción de pantalla de inicio:

La tienda Magento se puede descargar virtualmente en la pantalla del móvil, de la misma manera que las aplicaciones nativas. Mientras navega por el sitio web con su dispositivo móvil, la aplicación web progresiva Magento envía notificaciones para agregar la aplicación pseudo-nativa a la pantalla de inicio de la misma manera que lo hacen las aplicaciones nativas. Los usuarios pueden utilizar la aplicación web con un solo toque.

Funciona en modo offline:

La mejor parte de las aplicaciones web en Magento PWA Studio es su capacidad de funcionar incluso en ausencia de una red. A diferencia de los sitios web, la aplicación web en teléfonos móviles sigue sirviendo a los usuarios incluso cuando no hay conectividad a Internet.

Como resultado, las aplicaciones web pueden cargar las páginas más rápido y presentar las funcionalidades cuando el dispositivo carece de una amplia conexión a Internet.

Un sólido back-end interno:

¿Qué más podemos decir sobre eso cuando el front-end de la aplicación comprende claramente el back-end de la tienda? La aplicación web progresiva Magento ayuda a mantener una buena relación con la tienda Magento, lo que evita que el usuario tenga problemas técnicos frecuentes.

¿Es Magento PWA Studio una solución PWA 100% confiable?

Con esas características discutidas anteriormente, Magento PWA Studio parece una solución perfecta para desarrollar un PWA en la tienda Magento, aunque todavía carece de algunas características:

No hay modo sin conexión para dispositivos iOS

Las aplicaciones web progresivas de Magento PWA Studio no parecen muy compatible con los dispositivos iOS, especialmente durante la falta de conectividad. Las aplicaciones no funcionan tanto como en el modo fuera de línea. Los dispositivos Android se sirven bastante bien.

Todavía está en desarrollo.

El Magento PWA Studio todavía es un novato y la mayoría de sus características aún están en proceso. Necesita más tiempo para ser llamado como un proyecto totalmente realizado.

Restringido para Magento

El proyecto PWA Studio de Magento se limita solo a las tiendas Magento. Es decir, solo las tiendas de comercio electrónico con un back-end de Magento pueden usarlo. 

¿Tenemos otras opciones para construir un escaparate PWA para nuestra tienda Magento? ¿Podemos superar estos deméritos para siempre? ¿Es factible elegir las opciones disponibles?

Vue Storefront PWA

Vue Storefront

Los frameworks JavaScript han sido apreciados, por la flexibilidad y la facilidad que brindan al desarrollar el front-end del sitio web, desde hace mucho tiempo. Los gustos de React y Angular han llevado a cabo por sí solos toda la operación, lo que permite al usuario agregar características y funcionalidades únicas específicas del negocio. 

La personalización juega un papel clave en la presentación de negocios, especialmente en el comercio electrónico. Conocido especialmente por agregar infinitas personalizaciones y las acciones en los temas, JavaScript Frameworks se convierte en la herramienta de desarrollo front-end favorita para cualquier desarrollador de comercio electrónico.

VueJS destaca entre el resto de los marcos JS en que los códigos son comparativamente más fáciles de entender y desarrollar. Además, hay más ventajas que este marco agrega a cualquier front end:

Menor tamaño:

el pequeño tamaño del marco Javascript define su éxito. VueJS como marco es fácil de descargar y apenas ocupa alrededor de 20 KB de espacio. Por el contrario, los gustos de Angular.js y React.js son más voluminosos. Vemos razones por las cuales VueJS supera a ReactJS en términos de popularidad en GitHub, lo que lo convierte en el marco más popular para el desarrollo front-end.

Enfoque basado en componentes Vue.js

Trabaja en el enfoque basado en componentes con capacidad de representación virtual, flujo de datos de una sola vía para la jerarquía de componentes y representación de alto rendimiento. Fue diseñado principalmente para abordar los inconvenientes de los marcos populares entonces AngularJS y ReactJS.

Soporte multiplataforma

Siendo la versión avanzada del marco muy popular, Angular, VueJS tiene el soporte para múltiples plataformas en su ADN. El marco permite desarrollar aplicaciones complejas utilizando JSX, ES6, enrutamiento y agrupamiento con mucha facilidad. La característica le proporciona una presencia omnicanal para su sitio web.

El beneficio de Vue Storefront para sitios de comercio electrónico

Al igual que para el comercio electrónico PWA, Vue Storefront agrega una gran ventaja sobre Magento PWA Studio. El front-end basado en VueJS crea un frente de demostración universal que se puede agregar fácilmente a cualquier back-end de comercio electrónico. La tienda de demostración diseñada por separado se puede sincronizar bien con el back-end con llamadas API más simples. Como resultado, el equipo de desarrollo puede reutilizar el front-end personalizado varias veces sin complicaciones.

En una nota práctica, el robusto marco frontal ofrece mucho más que un simple canal de interacción.

Estudio de caso en un Vue Storefront Magento

PlasmaVise es una marca holandesa que se ocupa de la televisión en su región. La tienda electrónica basada en Magento buscó ayuda para algo extraordinario para impulsar su marca, ventas y actividad del cliente. 

El equipo desarrolló una tienda de demostración basada en VueJS en solo 50 horas. La tienda de demostración utiliza productos importados desde el backend basado en Magento 2 y una configuración de interfaz de Progressive Web App con la aplicación Vue Storefront.

Magento with Vue Storefront

Eso representa más o menos el sitio web ultrarrápido potenciado por VueJS. ¿Pero eso lo convierte en el reemplazo adecuado para Magento PWA Studio? 

Ventajas de Vue Storefront sobre Magento PWA Studio

Ya hemos explicado los inconvenientes de PWA Studio. Hagamos una breve comprobación si vale la pena probar Vue:

Cumplimiento en todos los aspectos

Mientras que Magento 2 PWA Studio todavía lucha con sus características para ser llamado un proyecto completo, Vue Storefront es un derivado de los conocidos marcos de JavaScript como Angular y reaccionar. Las características y su uso son bien conocidos por los desarrolladores involucrados.

Funciona universalmente para todas las tiendas

A diferencia de las aplicaciones Magento PWA Studio, los Vue Storefronts son independientes del back-end. Como resultado, se pueden utilizar en varias tiendas. El frente de PWA se puede regular a través de llamadas API más simples, lo que lo convierte en una opción altamente reutilizable.

Comparativamente más rápido que Magento PWA Studio

Magento PWA Studio usa ReactJS mientras que Vue Storefront usa Vue como marco. Esto hace que la tienda Vue Magento PWA sea más rápida y mucho más receptiva que la otra.

Nuestra opinión sobre la comparación de Magento PWA Studio y Vue Storefront PWA La

La tecnología PWA es una bendición para los comerciantes de comercio electrónico, ya que el mercado está cambiando gradualmente a las compras móviles. La tecnología está ahorrando recursos para los clientes, mientras que los usuarios reciben una excelente experiencia del cliente.

Con Magento presentando soluciones PWA internas como Magento PWA Studio, el futuro de las compras móviles parece más animado y prometedor. Al mismo tiempo, cada trabajo necesita variación para mantenerse único y distinto. 

VueJS hace lo necesario al ofrecer un excelente escaparate, que también se adapta perfectamente al entorno de Magento. Teniendo en cuenta que PWA y ambas tecnologías están en constante crecimiento, podemos esperar más resultados en el futuro.


¿Qué es el JAMstack? Por qué los ecommerce deben conocerlo.

Seguramente te has encontrado alguna vez con el término JAMstack en los últimos dos años. Si estás en un momento de renovación de tu web, debes tener muy en cuenta esta alternativa, pues entre sus bondades está la mejora drástica de la velocidad del sitio, que sabemos que afecta tanto a la experiencia del usuario como a la valoración que Google hace de nuestro sitio. Es la manera perfecta de dar un impulso al crecimiento de tu ecommerce: inmediatez de navegación, velocidad de carga y separación de frontend de backend para mejor organización del trabajo de desarrollo. El uso de microservicios es clave en este tipo de arquitectura, con las ventajas que ello reporta.

JAMstack define un grupo de tecnologías utilizadas conjuntamente para lograr un objetivo, como LAMP y MEAN, por ejemplo.

En el caso de los e-commerce, es una arquitectura que permite, sin perder SEO, ganar flexibilidad en su desarrollo y solucionar los temibles problemas de sobrecarga del servidor, o la lentitud de algunos CMS, sobre todo cuando más se necesita, cuando el tráfico a la web es más denso.

¿Qué significa JAMstack?

JAM son las siglas de JavaScript, API, Markup.

Es una tendencia en la creación de aplicaciones y páginas web que tienen esas características clave:

  • Existe un servidor web (o CDN) «tonto» que envía el HTML necesario para ejecutar la aplicación, normalmente generado mediante un generador de sitios estático. El HTML no se genera
  • La aplicación puede cargar algunos JavaScript que reciben datos de una API. Las interacciones de página como la navegación pueden causar que se obtengan más datos de una API. La autenticación también se realiza a través de una API.

Este nuevo enfoque es una forma nueva de hacer las cosas, en comparación con

  • Sitios web tradicionales en los que el contenido ya está incluido en la aplicación (como en el caso de los sitios estáticos).
  • Sitios web basados en CMS que cargan la información de una base de datos en el backend.
  • Aplicaciones renderizadas por el servidor utilizando cualquier tipo de lenguaje backend.
  • También es diferente a los sitios web renderizados desde el lado del cliente (por ejemplo, construidos con React) con una parte renderizada desde el lado del servidor. El JAMstack no implica en absoluto el renderizado del servidor.

¿Cuáles son las ventajas de usar el JAMstack?

  • Es rápido. El HTML ya está generado y el servidor web sólo debe servirlo, sin involucrar ningún tipo de operación de backend como buscar datos de una base de datos o generar las páginas HTML para cada solicitud. Se puede servir fácilmente a través de una CDN (Content Delivery Network), un servidor compartido, o alternativas gratuitas como Github y netlify.com.
  • Es eficiente. Dado que no hay backend, no hay cuellos de botella en el servidor «principal».
  • Es más barato, ya que servir recursos estáticos es mucho menos costoso que hacerlo a través de un servidor backend.
  • Es más seguro, ya que el backend está expuesto sólo a través de una API.
  • El enfoque tradicional de la aplicación de renderizado de sitios web de forma dinámica, como ocurre con WordPress, Laravel y Rails, está siendo sustituido en muchos casos por un enfoque más ligero.

La rapidez y eficiencia son claves para ofrecer una experiencia de usuario fluida que aumente las conversiones y nuestro ROI, y beneficia al SEO de la página.

Un sitio típico de WordPress puede hacer de 30 a 100 peticiones a una base de datos por cada página cargada, dependiendo de la cantidad de plugins instalados. A menos que esté fuertemente cacheado, puedes reconocer un sitio de WordPress cuando se vuelve popular en Hacker News, Reddit o cualquier otro sitio grande porque obtienes una página en blanco – lo que significa que algo ha fallado en el servidor, ya que el sitio no puede soportar todo ese tráfico. Muchas veces esto es una oportunidad perdida, porque cuando el sitio está en su pico de popularidad, no funciona.

Sirviendo una página HTML estática es muchísimo más eficiente que eso, y los datos dinámicos pueden ser recuperados cuando sea necesario, usando llamadas de API separadas una vez que el HTML es cargado.

¿Para qué se puede utilizar JAMstack?

Muchas aplicaciones pueden caer bajo el paraguas de JAMstack, y las posibilidades son infinitas, desde simples blogs hasta sitios web de comercio electrónico (por ejemplo con Snipcart) y aplicaciones web más complejas.

La nueva versión (en proceso) de este blog se está desarrollando siguiendo las pautas de JAMstack. Todo el HTML se genera en el momento del despliegue, cuando cargas esta página, no hay llamadas a bases de datos ni otros procesos que se interpongan entre el contenido y tú.

Cómo empezar

Una vez entiendes, o decides, que JAMstack es el camino a seguir, te preguntarás, ¿por dónde empezar? Existen cientos de generadores de sitios estáticos en el mercado, y van apareciendo más cada día, ¿cuál es el mejor para empezar?

Un buen lugar para empezar es StaticGen, que contiene una lista de muchos SSGS populares que se pueden organizar y filtrar por idioma, plantilla, licencia y estrellas de GitHub.

¿Cuáles son algunas de las tecnologías que se pueden utilizar para crear aplicaciones JAMstack?

Gatsby
StitchFix, Braun, Figma y Nike han construido sus sitios web utilizando Gatsby (React)

Gridsome
JavaScript. Es muy similar a Gatsby pero con Vue en lugar de React

Jeckyl
Si te gusta desarrollar en Ruby, este es el tuyo

Nuxt
Un framework para Vuejs, que también puede usarse para SSR

Hugo
Si prefieres utilizar Go


Vue Storefront, la Aplicación Web Progresiva para cualquier e-commerce

Vue Storefront es una aplicación web progresiva de comercio electrónico (PWA) headless e independiente de la plataforma BackEnd, escrita en Vue.js. El hecho de que esté usando arquitectura headless permite a Vue Storefront conectarse con cualquier plataforma de eCommerce para que pueda ser un PWA de frontend para Magento, Shopify, BigCommerce, WooCommerce y otros. Antes de leer sobre Vue Storefront, podría interesarte saber más sobre qué son las Aplicaciones Web Progresivas.

El objetivo es construir un gran producto basado en microservicios y arquitectura headless.

Algunas de sus ventajas:

  • Excepcional rendimiento
    Gracias a la tecnología de Vue Storefront puedes mejorar significativamente sus tasas de conversión y compromiso reduciendo las tasas de rebote. El rendimiento significa mejor experiencia de usuario, significa mejor posicionamiento SEO y, por supuesto, una mayor tasa de conversión y por tanto más ROI, más beneficio neto para el negocio.
  • Funcionalidades nativas
    Al ser una PWA, tenemos disponibles las notificaciones push, el acceso a la pantalla de inicio y el modo de pantalla completa. La tienda funcionará en modo offline, con mala conexión, y en cualquier dispositivo.
  • Todos los dispositivos y plataformas
    Permite ofrecer una experiencia de compra 100% efectiva y sin complicaciones sin necesidad de desarrollar aplicaciones para diferentes navegadores y plataformas web como iOS y Android. Para cualquier empresa, pero sobre todo para una Startup, esto es un sueño hecho realidad.
  • Comercio de voz
    Conectar tiendas con interfaces de usuario de voz, como Amazon Alexa y Google Assistant

Es un proyecto de código abierto muy popular con una comunidad fuerte y en crecimiento.

Características principales de Vue Storefront:

  • Para cualquier Backend
  • Diseñada para el mejor rendimiento
  • Mobile first
  • Tecnología de vanguardia
  • Sin limitaciones de diseño
  • Código abierto con licencia MIT
  • Agradable experiencia de desarrollo
  • Renderización SSR, del lado del servidor lista para usar (para SEO)
  • Modo offline

¿Cómo se conecta con las plataformas backend?

Vue Storefront consigue ser compatible con cualquier plataforma gracias a los conectores vue-storefront-api y API dedicados para plataformas de comercio electrónico. El formato de datos en vue-storefront-api es siempre el mismo para cualquier plataforma, lo que significa que no importa qué backend de eCommerce utilice, su frontend sigue siendo el mismo.

Es una gran estrategia para las migraciones, ya que puede migrar fácilmente de una plataforma a otra (o de una versión a otra, por ejemplo, Magento 1 a 2) sin tocar el frontend.

Esquema de arquitectura

El conector API funciona en dos fases:

 

  • Data Pump: (mage2nosql en la imagen) está solicitando datos estáticos (catálogo, pedidos, etc.) de su plataforma de eCommerce a Vue Storefront Elasticsearch y cambia su formato al consumido por vue-storefront-api. Una vez finalizada la extracción de los datos, puede visualizar el catálogo de productos en Vue Storefront. Después de transferir los datos a Elasticsearch, permanecerá sincronizado con los cambios realizados en la plataforma de backend y actualizará su contenido en consecuencia.
  • Worker pool: es un proceso de sincronización de las llamadas dinámicas (sesiones de usuario, reglas de carro, etc.) que no pueden ser almacenadas en la base de datos y necesitan ser llamadas por vue-storefront-api directamente desde la plataforma backend.

Algunas de las plataformas backend más populares ya tienen sus integraciones (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce…), pero usted puede fácilmente hacer las suyas propias con la plantilla de integración.

Las partes azules del diagrama son responsables de la caché offline.

¿Cómo funciona?

  • Vue Storefront Core (carpeta principal) es el pegamento para todas las funciones que permiten que Vue Storefront funcione. Contiene todos los puntos de entrada, el comportamiento de SSR, el proceso de compilación, y los Service Workers. No debe tocar esta carpeta directamente al crear sus propias implementaciones para mantenerse al día con sus características y seguridad.
  • Módulos Vue Storefront (núcleo/módulos y src/módulos) son las características del comercio electrónico. Cada módulo es una característica encapsulada (como carrito, lista de deseos, catálogo y algunas integraciones de terceros). Puede añadir/quitar/editar estos módulos como desee y componer su tienda Vue Storefront con sólo las características que necesite. También se utilizan para extensiones de terceros.
  • Los Temas de Vue Storefront (src/themes) son la implementación real de la tienda. En los temas, puede utilizar y ampliar toda la lógica de los módulos registrados / núcleo y añadir su marcación HTML y estilos. Vue Storefront proporciona un tema predeterminado totalmente personalizable.

Ir a la página de vuestorefront.io


Qué son las PWA (Progressive Web Apps) y cuáles son sus ventajas

Las aplicaciones web progresivas son un tipo de aplicación móvil publicada a través de la web, desarrollada con tecnologías web estandar que incluyen HTML, CSS y JavaScript. Están diseñadas para funcionar en cualquier dispositivo que utilice un navegador moderno.

En los últimos años ha habido un crecimiento exponencial en el número de usuarios de teléfonos móviles. Hoy en día, más del 60% del uso total de Internet se realiza a través del teléfono móvil. Las razones incluyen: la portabilidad, el hardware barato, el fácil acceso a Internet y el aumento del número de servicios en Internet. Con más usuarios en el móvil, la optimización de la experiencia del usuario en el teléfono es esencial.

Para las empresas más pequeñas, que a menudo no tienen aplicaciones nativas debido a limitaciones de tiempo o de coste, la aplicación web es la oportunidad clave para aumentar el número de clientes, proporcionando la mejor experiencia de usuario posible.

Si las empresas tienen aplicaciones móviles nativas dedicadas, existe la posibilidad de que muchos usuarios prefieran su versión web para evitar la descarga y la instalación debido a restricciones de hardware y memoria o a alguna otra preferencia personal.

Si una empresa se dedica y quiere conseguir el máximo de clientes comprometidos, la experiencia de una aplicación web tiene que ser similar a la de la aplicación nativa. Hoy en día la expectativa de nuestros sitios web es muy alta. Hace casi 25 años, cuando se inventó el sitio web, su propósito era principalmente compartir información.

Tomemos el ejemplo de Whatsapp en tu teléfono. Cuando no tienes Internet, puedes abrir la aplicación, revisar los mensajes anteriores e incluso responder a alguien. Cuando el teléfono se conecta a Internet, los mensajes se envían automáticamente en segundo plano.

Esto es lo que PWA promete proporcionar en las aplicaciones web. Permite que las aplicaciones web, una vez instaladas, se carguen cuando no hay red, se sincronicen en segundo plano y hagan las cosas a la perfección a la vez que proporcionan una experiencia similar a la de un nativo para sus usuarios.

¿Por qué necesitamos PWAs y cuáles son sus características?

Hablemos de algunos de los atributos principales que no encontraremos en las aplicaciones web comunes no progresivas.

  • Fiable

    La aplicación debe ser rápida como un rayo cuando se carga, debe ser casi instantánea y también debe abrirse cuando no hay red o una red de baja velocidad como la 2G. Google encontró que el 53% de los usuarios abandonan el sitio web si la página tarda más de 3 segundos en cargarse.

  • Inmediata

    Los scrolls y las transiciones de página deben ser suaves como la mantequilla cuando el usuario está interactuando con la aplicación web. Todo el mundo odia los pergaminos de mierda.

  • Adaptable

    La aplicación debería encajar en todos los diferentes tamaños de dispositivos. La aplicación web perfecta debe ser como el agua, tomar la forma de su recipiente.

  • Instalable

    Si queremos que las aplicaciones web se acerquen más a las aplicaciones nativas, tienen que ser instalables y deben residir en la pantalla de inicio junto con otras aplicaciones nativas, para que el usuario pueda acceder al PWA con un solo clic.

  • Splash Screen

    Las Aplicaciones Web Progresivas pueden tener una pantalla de bienvenida al inicio de la aplicación. Esto hace que el PWA se parezca más a una aplicación nativa

  • Alta capacidad de fidelización

    La aplicación debe mantener a los usuarios ocupados. Un PWA proporciona características como las notificaciones push, el icono de la pantalla de inicio, vista a pantalla completa y offline para maximizar la interacción con el usuario.

Todo lo anterior es posible con una Web App Progresiva

Algunas personas creen que un PWA está acoplado a los últimos frameworks de UI como ReactJs, Angular 6 o Vue.js. No necesariamente. PWA no tiene nada que ver con el framework o librería que está utilizando, sólo necesita los componentes necesarios.

Las aplicaciones nativas pueden abrirse sin conexión a Internet porque cuando las descargamos e instalamos, los recursos críticos como los componentes de la interfaz de usuario y algunos datos se almacenan en el dispositivo…. esto es exactamente lo que sucede en un PWA también.

El PWA almacena archivos HTML, archivos CSS e imágenes en la caché del navegador y los desarrolladores pueden controlar completamente la llamada de red.

Para hacer funcionar una PWA hay tres elementos esenciales que deben implementar los desarrolladores:

  • Service Worker. Código javascript.
  • El manifiesto. En formato json
  • Disponer de conexión HTTPS

 
Un buen ejemplo del avance de las Apps Progresivas es Vue Storefront que es una PWA para hacer de front-end de cualquier plataforma e-commerce.


Estas Navidades: conoce qué buscan tus clientes, optimiza tu web y apuesta por el vídeo

Las Navidades ya están aquí, y entre muchas cosas más, llegan para convertirse de nuevo en el periodo de venta más importante y deseoso para la mayoría de los negocios de todo el mundo. No podemos negar que teniendo de base una buena estrategia digital, estas fechas suponen una gran oportunidad de hacer crecer nuestro negocio. Y es por ello por lo que Google comparte desde su blog, recomendaciones y los datos más significativos para ayudar a las empresas españolas a optimizar sus negocios.

Un dato muy significativo es que las búsquedas relacionadas con la navidad han aumentado alrededor de un 25% comparada con años anteriores. Por tanto podemos hablar de que este año presenta más que ningún otro hasta ahora una oportunidad para hacer crecer las ventas de forma directa y muy especialmente en dispositivos móviles.

España es uno de los países europeos con mayor penetración por dispositivos móviles para adultos y mayores de 16 años; en los últimos cuatro años su implementación en nuestro país se ha duplicado. Los clientes potenciales invierten un 35% de su tiempo en navegar a través de su smartphone, frente al 27% que lo hace desde su ordenador de mesa.

Según los datos que nos aportan, las búsquedas que empiezan por «Dónde comprar» crecieron más del 85% en los últimos dos años, con búsquedas similares a «dónde comprar un jersey feo de Navidad», «dónde comprar tarjetas navideñas» o «donde comprar papel de regalo» por ejemplo.

En cuanto a categorías se refieren, acaparan las compras, en primer lugar, la tecnología (smartphones, ordenadores,, televisores, etc), seguida de los juguetes y videojuegos, los perfumes y fragancias y, por último, los deportes de invierno.

Los aspectos que más valoran los consumidores antes de comprar son:

  • El 75% valora el coste del producto
  • El 74% valora la disponibilidad del producto en la tienda más cercana
  • El 66% valora la ubicación de tiendas
  • El 63% valora la información de las tiendas (horas, número de teléfono)
  • El 59% valora el mapa con las tiendas que contienen el producto buscado
  • A la hora de comparar opiniones de los diversos productos, el 64% de los compradores concuerdan que YouTube ha sido el canal que más ha influído en su compra. El vídeo tiene un peso importante en las decisiones de compra, y por tanto deberá ser un formato prioritario en nuestras campañas.

    Google nos recuerda una vez más que aspectos de la experiencia de usuario, como el tiempo de carga de una página web son decisivos en el proceso de compra online. Una página web que carga lento puede tener un impacto negativo ya que frustra al usuario. En este post hablamos de la importancia de la velocidad de carga de un sitio web.

    ¿Sabes cuánto tarda en cargar tu web? Google ofrece de forma gratuita esta herramienta Test my site para testear el tiempo de carga.

    ¡Todavía estás a tiempo de invertir en una campaña de publicidad online de navidad!
    Consúltanos aquí sin compromiso.

    Fuente: Google


    Lo que la industria del automóvil necesita saber para seguir vendiendo después de la venta

    Ya no se cambia de vehículo con tanta frecuencia como solía hacerse. En la última década, el tiempo medio que una persona tarda en cambiar de coche ha aumentado de 4,3 a 6,5 años. Al mismo tiempo, la edad promedio de los vehículos está aumentando. Ambos factores representan una gran oportunidad para que los concesionarios se centren en las piezas de automóviles y el servicio posventa.

    A medida que nos acercamos a la temporada de mantenimiento de otoño, es importante comprender qué impulsa a los compradores a los proveedores de recambios, componentes y servicios de automóviles, y qué los hace volver. Sabemos que las influencias digitales casi el 60% de las compras de vehículos en el concesionario. Y la influencia digital es aún más fuerte para el servicio posterior a la compra. En resumen, la venta después de la venta se está convirtiendo en una parte más importante de las relaciones con los clientes.


    Fuente: Deloitte Digital Influence Survey, 2016.

    La gente no planifica el mantenimiento

    A medida que las personas se aferran a sus vehículos por más tiempo, las piezas de automóviles y las necesidades de servicio aumentan. Y con demasiada frecuencia, la gente simplemente no planifica el futuro. De hecho, más del 40% de los compradores de servicios necesitan mantenimiento reactivo en lugar de mantenimiento de rutina.

    En estos momentos, las personas buscan ayuda en una variedad de lugares, desde mecánicos locales hasta amigos y familiares. Pero los datos desvelan que cuando las personas necesitan información rápidamente, el primer lugar al que recurren es la búsqueda. Hoy en día, casi el 25% de todas las búsquedas automotrices están relacionadas con piezas, servicios y mantenimiento. 5 Y eso tiene sentido. La búsqueda no solo le brinda a las personas la información que necesitan, sino que también les permite actuar. De los compradores de piezas de automóvil y servicios que utilizan la búsqueda móvil, más de la mitad llama directamente al proveedor del servicio desde un resultado de búsqueda.

    En asociación con DOM360, Gettel Hyundai de Sarasota utilizó las extensiones de llamada de AdWords para sus anuncios de búsqueda centrados en el mantenimiento del automóvil. Esto provocó un aumento del 16% en las llamadas telefónicas a su centro de servicio y un aumento del 4% en los clics en su sitio web.


    Fuente: consultas de datos internos de Google, operaciones fijas. EE. UU., Enero-agosto. 2017 vs ene.-ago. 2016

    Las búsquedas de servicio aumentan en los dispositivos móviles

    Imagínate esto: estás conduciendo y algo empieza a hacer clic, chisporrotear o explotar. Todos hemos estado allí. Y en ese momento, buscamos nuestros teléfonos. Más de la mitad de las búsquedas relacionadas con repuestos, servicios y mantenimiento provienen de dispositivos móviles. Nuestros teléfonos siempre están con nosotros, así que cuando ese ruido se convierte en algo que ya no podemos ignorar, la ayuda está a solo un toque de distancia.

    Gino Cipperoni, director de ventas de Dealer eProcess, una consultora digital para la industria del automóvil, dijo que su equipo está enfocado en asegurarse de que las personas descubran a sus clientes cuando buscan componentes de automóviles y servicios relacionados con las marcas de vehículos que venden. «Siempre pretendemos que los anuncios de búsqueda móvil de nuestros clientes aparezcan al menos nueve de cada 10 veces en las principales piezas de automóviles y búsquedas de servicios en la ubicación del concesionario. Al hacer esto, hemos sido capaces de ayudar a impulsar un aumento del 103%, en promedio, de las citas de servicio programadas «, dijo Cipperoni.

    El video está impulsando el descubrimiento y la conciencia

    Aunque la búsqueda puede ser el primer lugar al que las personas acuden cuando tienen piezas de automóviles y necesidades de servicio, no es el único lugar. De las personas que llevaron su vehículo al servicio, el 65% se enteró por primera vez sobre el centro de servicio que visitaron a través del video.


    Fuente: Estudio Google / Critical Mix Fixed Ops 2017, EE. UU. (N de 1.500 consumidores estadounidenses mayores de 18 años que compraron piezas y / o servicio en los últimos seis meses)

    Germain Toyota de Columbus ha estado aprovechando el video pre-roll para influir en los compradores de vehículos durante varios años. Recientemente, probó los anuncios in-stream Trueview de YouTube para concienciar sobre sus capacidades de mantenimiento y una promoción de neumáticos. En asociación con UnityWorks, Germain Toyota creó videos de 30 segundos dirigidos a personas en YouTube que estaban interesadas en piezas de automóviles y contenido de servicio, y también eran propietarios de marcas de vehículos específicas.

    Con un presupuesto limitado, Germain Toyota de Columbus manejó más de 42,000 impresiones de video (personas que vieron una parte o la totalidad de sus videos de 30 segundos) y solo pagó las reproducciones de video completas (personas que miraron los 30 segundos). «Ejecutar videos de Trueview en YouTube nos permitió promover nuestros servicios a un público objetivo, más de 10.000 de los cuales eligieron ver nuestro video en su totalidad», dijo Rich Newsome, gerente general de la concesionaria con sede en Ohio. «Solo pagamos por esas vistas completadas y llegamos a los clientes que estaban en el mercado para piezas de automóviles y servicios. Eso no es algo que podamos hacer hoy en la televisión «.

    A medida que las personas buscan sacar el máximo provecho de su vehículo, sus relaciones con los concesionarios, proveedores de servicios y minoristas de piezas están cambiando. Es más importante que nunca asegurarse de fomentar esas relaciones y asumir el papel para para afianzar la fidelización y cerrar la venta después de la venta. Estudiar cómo las personas compran piezas y servicios de automóviles, podrá ayudarlos a encontrarlo y hacer que regresen.

    Traducción del artículo What the auto industry needs to know to close the sale after the sale , elaborado a partir de datos de Google y Deloitte.


    La importancia de la velocidad de carga de un sitio web

    La velocidad de carga de una página web , además de ser un factor determinante para el posicionamiento SEO en buscadores, repercute en el aumento de ganancias.

    Las páginas web que cargan más rápido atraen a más clientes

    ¿Cuántas veces hemos abandonado un sitio web por qué tardaba tiempo en cargar?

    Según comenta Google en su blog, el 50% de los usuarios esperan que los sitios web se carguen en menos de 2 segundos, y que la mayoría abandonan el sitio si supera este valor. Y que, por cada segundo adicional que pase las conversiones pueden disminuir un 20%.

    Teniendo en cuenta esta información podríamos decir que si nuestro sitio web tarda en cargarse más de 2s, deberíamos mejorar la velocidad de tiempo de carga o estaríamos perdiendo clientes y posibles conversiones.

    Google nos recomienda que sea de 3s. Actualmente España tiene un índice de velocidad media de 8,7 segundos y en el ranking europeo se posiciona en tercer lugar después de Alemania (8,1s de media) y Holanda (8.6s de media).

    ¿Cómo saber cuánto tarda en cargarse mi sitio web?

    Para ello, y con el fin de ayudar a las empresas, Google nos ofrece esta herramienta gratuita Test My Site en la que podemos probar la velocidad y que ayer nos presentó nuevas funcionalidades.
    Ahora realiza un cálculo basado en las estadísticas de abandono del usuario y podemos ver el nº de visitantes que podemos perder por cada segundo que tarda en cargarse nuestro sitio o nuestra posición respecto a la competencia. Además de una evaluación personalizada que recibiremos por correo electrónico con las recomendaciones específicas para mejorar la velocidad del sitio web.


    Solución al problema del día 23 de agosto, para acceder a Facebook Web con Chrome

    El hashtag #facebookdown está ganando fuerza en Twitter desde que esta mañana Facebook web ha dejado de funcionar en Google Chrome, al menos para algunos usuarios.

    Hay una solución provisional si necesitas urgentemente acceder a Facebook con Chrome:

    – En Windows, pulsa Shift + F5 y la página se recargará correctamente.
    – En Mac, pulsa Shift – Command – R

    Al navegar por Facebook puede volver a fallar. Hasta que Facebook solucione el problema, puedes usar otro navegador o este truco.

    Esperamos que os sirva, si teníais este problema.


    Los anuncios de Google AdWords de texto estándar dejarán de crearse en enero de 2017

    A partir del 31 de enero de 2017, ya no se podrá crear ni editar anuncios de texto con el formato estándar, solo se podrá hacerlo con el formato expandido.

    Con el fin de poder ofrecer más información sobre las empresas en los anuncios de Google AdWords, Google presentó a principio de año los anuncios de texto expandido.

    Los anuncios de texto expandido son similares a los de texto estándar salvo algunas diferencias destacables:

    • Tienen dos campos en el título en lugar de uno. Lo cual permitirá añadir más texto y la limitación de caracteres será de 30 en lugar de 25.
    • Las dos líneas descriptivas se convierten en un único campo de 80 caracteres.
    • Ya no es necesario introducir la URL visible.
    • Los anuncios de texto se han optimizado para móviles. Casi la más importante. A partir de ahora no será necesario seleccionar la configuración de dispositivo móvil cuando vayamos a modificar o crear un anuncio sino que al crearlos veremos una vista previa del anuncio en ambos formatos, ordenadores y dispositivos móviles.

    anuncios-texto-expandido-adwords
    Ahora, la fecha límite que tenemos para realizar la transición de los anuncios es el 31 de enero de 2017. Por ello Google nos sugiere que aprovechemos este tiempo para experimentar y hacer pruebas con sus prácticas recomendadas que nos servirán para optimizar los anuncios.


    El ultimátum de Google a los intersticiales

    10 de enero de 2017 es la fecha límite que ha dado Google a aquellas páginas no accesibles con un smartphone.

    Empeorará todavía más el posicionamiento en los resultados de búsquedas de aquellas páginas web a las que no se pueda acceder fácilmente a su contenido en móviles.

    Y es que lo que Google pretende es ayudar a los usuarios a encontrar lo que buscan de la forma más fácil posible independientemente del dispositivo que utilicen.

    Ya hace dos años añadieron la etiqueta “optimizada para móviles” en las páginas web que cumplían los requisitos de Google, facilitando así al usuario encontrar el contenido que buscaba. Es decir, que el texto fuera legible sin tener que hacer zoom, que el contenido se adaptara a la pantalla, evitar software que no fueran compatible con dispositivos móviles, como Flash, y que los enlaces tuviesen suficiente distancia entre sí para poder hacer clic en el enlace correcto con el dedo.
    Esta etiqueta desaparecerá aunque los criterios de optimización para móviles seguirán influyendo en la clasificación.

    Hoy el panaroma ha cambiado y ya el 85% de las páginas web están optimizadas para móviles, aún así hay muchas de estas páginas que muestran anuncios intersticiales intrusivos a los usuarios que empeoran la navegación y la experiencia de usuario ya que puede resultar frustrante no acceder fácilmente al contenido que esperas después de hacer clic en un enlace.

    Con el fin de mejorar la experiencia de usuario en móviles, Google nos detalla desde su blog algunos ejemplos de técnicas que hacen menos accesibles el contenido a los usuarios y que por tanto deberíamos evitar:

    • Mostrar una ventana emergente que tapa el contenido principal, ya sea justo después de que el usuario acceda tras tocar un resultado de búsqueda o mientras navega por la página.
    • Mostrar un intersticial independiente que el usuario tenga que rechazar para acceder al contenido principal.
    • Usar un diseño en el que la mitad superior de la página sea similar a un intersticial independiente, con el contenido original insertado en la mitad inferior.

    Ejemplos de lo que no se debe hacer:

    Ejemplo de una ventana emergente intrusiva
    Ejemplo de un intersticial independiente intrusivo
    Otro ejemplo de intersticial independiente intrusivo

    Vía El blog para webmasters