Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em seu e-commerce

59 views

Published on

Alexandre Rodrigues - Business Development Manager, WebJump, falou sobre Mobile: AMP e PWA na Conferência E-Commerce Brasil SANTA CATARINA 2019.
Saiba mais em https://eventos.ecommercebrasil.com.br/conferencia-santa-catarina/.

Published in: Retail
  • Be the first to comment

  • Be the first to like this

[Conferência SC 2019] Mobile: AMP e PWA - Como utilizar estas tecnologias em seu e-commerce

  1. 1. Alexandre Rodrigues | Business Development Manager Mobile: PWA e AMP
  2. 2. ConversãoEngajamentoExperiência destas tecnologias? Qual o objetivo
  3. 3. Agenda 1. O mundo móvel 2. PWA 3. AMP 4. PWAMP
  4. 4. O acesso à páginas Web é 2x maiordo que em aplicativos. 15x mais Os usuários gastam mais tempo dentro de aplicativos do que na Web.
  5. 5. por tipo de dispositivo Distribuição do uso
  6. 6. um app nativo? Porque não fazer 80%do tempo nos 3 principais apps 0média de apps instalados instalados por mês Fonte: comscore https://techcrunch.com/2017/08/25/marjority-of-u-s-consumers- still-download-zero-apps-per-month-says-comscore
  7. 7. A necessidade das empresas de conectar com seus clientes via aplicações móveis está mais do que consolidada. realidade A pergunta não é mais SE e sim COMO fazer isso.
  8. 8. Website responsivo APP
  9. 9. Engajamento Alcance APP Website Responsivo
  10. 10. Melhorar radicalmente a experiência do usuário
  11. 11. Carrega dados de forma dinâmica e incremental. "É uma aplicação escrita em linguagem Web que se comporta como um aplicativo nativo no celular e no computador" Progressivo É escrito em linguagem Web, diferentemente dos Apps nativos. Web Pode ser instalado no dispositivo (Mobile e PC) e possui comportamento fiel aos apps nativos. App
  12. 12. Fast Integrated Reliable Engaging
  13. 13. dos usuários abandonam sites que demoram mais de 3 segundos para carregar 53% Source: DoubleClick - The need for mobile speed. September,2016.
  14. 14. O que está por trás do PWA?
  15. 15. A revolução contra a dependência de conectividade Principais recursos: ● Pré-cache ● Background sync API ● Web push notifications API Google possui uma biblioteca completa para facilitar o uso do Service Worker service workers
  16. 16. Suporte ao service workers Firefox Opera Chrome Samsung Internet Safari UC Browser Baidu 360 Browser Edge
  17. 17. Evoluindo A partir da versão 70 (outubro/2018) o Chrome passou a aceitar o PWA para versão desktop.
  18. 18. Formas de “instalar”
  19. 19. PWA • Formas de “instalar”
  20. 20. Case
  21. 21. Pinterest Aumento no engajamento e revenda de anúncios De olho no crescimento internacional, a empresa decidiu investir em um formato Web para desenvolvimento. O aplicativo desenvolvido em PWA demorou 3 meses para ser concluído Resultados: ● 60% de acréscimo no engajamento dos usuários. ● Aumento de 44% na revenda de anúncios. ● Tempo de navegação no App aumentou 40% em relação à solução anterior.
  22. 22. o que é AMP?
  23. 23. Aumentar drasticamente a velocidade de carregamento das páginas web em dispositivos móveis.
  24. 24. Não é apenas para notícias Não é apenas para páginas web simples Não é apenas para melhorar posicionamento no SEO. AMP é um novo padrão para tornar a web mais fácil, simples e rápida para usuários e desenvolvedores.
  25. 25. As páginas AMP são um ecossistema para páginas responsivas, rápidas e modernas Diretrizes para criar uma página web AMP
  26. 26. Powered by Uma vez que a página Web segue os padrões AMP o Google armazena a página na sua própria CDN*. *CDN - Content Distribution Network
  27. 27. AMP Padrão
  28. 28. https://www.carved.com/ taxa de conversão maior que o e- commerce 75% Carregamento de página mais rápida 37% 33% Redução do bounce rate
  29. 29. Por onde começar Páginas de alto tráfego e com grande acesso via ferramentas de busca. implementando AMP? Home Page Produto
  30. 30. Start fast, Stay fast.
  31. 31. Usuário encontra o conteúdo Abre página AMP e Service Worker já instala PWA em background Usuário começa a usar PWA sem quebra de experiência
  32. 32. PWA ● App Shell ● Header e Menu persistente ● Experiência de app ● Utiliza a página AMP como fonte de conteúdo AMP ● Carregamento instantâneo ● Conteúdo cacheado na CDN e no Service Worker PWAMP Trabalhando em conjunto
  33. 33. PWAMP Resumindo entrega o conteúdo faz a “mágica” acontecer
  34. 34. DÚVIDAS?
  35. 35. OBRIGADO!

×