7 maneiras de usar AMP para comércio eletrônico para gerar mais vendas (exemplos)

Páginas da web lentas geram baixas taxas de conversão. A pesquisa mostrou que mesmo uma desaceleração de 100 ms no tempo de carregamento pode afetar as conversões em uma página da web. Em última análise, os usuários não querem esperar. É essa verdade que fez o Google acelerar a web móvel com as Accelerated Mobile Pages anos atrás.

E embora a estrutura de AMP tenha se tornado capaz de acomodar uma variedade de páginas da web em uma variedade de setores verticais, alguns ainda acreditam que a velocidade de AMP não pode ir muito além de uma página da web estática. Hoje, porém, o AMP é capaz de veicular conteúdo dinâmico, páginas de checkout, sites inteiros e até mesmo Web progressiva com sua estrutura leve. Como resultado, as marcas estão cada vez mais se voltando para AMP para comércio eletrônico.

Uso de AMP para comércio eletrônico

Há um motivo pelo qual as marcas de comércio eletrônico demoram a investir em AMP: suas necessidades são muito mais complexas do que as necessidades dos editores de notícias, que a AMP inicialmente se propôs a atender. As marcas de comércio eletrônico precisam de listas de produtos, recursos de login, conteúdo dinâmico, páginas de checkout e os mais altos níveis de segurança na web.

Mas, anos depois de seu lançamento inicial, o AMP está permitindo que as marcas de comércio eletrônico atendam a essas necessidades, com novos componentes e soluções técnicas que trazem tempos de carregamento de alta velocidade para todos os tipos de páginas. Aqui estão apenas algumas coisas impressionantes que o AMP pode oferecer agora:

• Conteúdo dinâmico: o conteúdo de um site de comércio eletrônico está sempre mudando. O suporte de AMP para conteúdo dinâmico garante que os clientes sempre vejam as informações mais atualizadas.
• Check-out / pagamentos: AMP agora oferece suporte a carrinhos de compras, fluxos de checkout e processamento de pagamentos. Agora, os usuários podem comprar diretamente de suas páginas AMP.
• Personalização / login: Personalização é a base de qualquer campanha de marketing relevante. Agora, por meio do AMP, você pode fornecer conteúdo personalizado aos seus clientes, como produtos recomendados e carrinhos atualizados.

Então, como o AMP faz isso? E como você pode? De amp-bind a amp-selector e muito mais, aqui estão alguns componentes que você pode usar para criar páginas de produtos, páginas de categorias, carrinhos de compras e muito mais.

Componentes úteis para AMP para comércio eletrônico

1. Páginas de produtos

Freqüentemente, os usuários chegam às páginas de seus produtos por meio de uma página de categoria, uma página inicial, mídia social ou um anúncio pago. Essas páginas detalham os recursos e benefícios do seu produto, e são visualmente atraentes, com fotos ousadas do herói e ângulos suficientes para informar o seu visitante.

Criá-los com AMP envolve elementos como amp-carousel e amp-video, que você pode usar para criar cenas de heróis impressionantes, fotos informativas e vídeos abrangentes.

Para longas descrições de produtos para acompanhar suas fotos, olhe para amplificador-acordeão para a capacidade de expandir e minimizar o conteúdo. O elemento amp-form permitirá que você crie um sistema de comentários para que seus visitantes deixem avaliações de seu produto:

Para algo um pouco mais simples, o CSS personalizado possibilitará a ativação de um sistema de avaliação com estrelas para avaliações de produtos:

E com o elemento amp-social-share, você pode oferecer aos usuários a capacidade de compartilhar o produto nas redes sociais.

O AMP agora também oferece suporte a um carrinho de compras e ao botão "adicionar ao carrinho" quando os visitantes estão prontos para comprar. E se não estiverem, você pode usar o elemento amp-sidebar para implementar um menu de navegação em todas as páginas. Este é apenas um exemplo de uma página de produto construída em AMP:

2. Página de categoria de produto

Os usuários geralmente começam sua jornada na página inicial de um site ou na página de categoria de produto. Estas são ótimas páginas para AMPlify primeiro, como o eBay discutiu em sua postagem.

Esses tipos de página são muito adequados para AMP. O conteúdo é normalmente estático e voltado para oferecer a melhor vitrine de produtos disponíveis.

Particularmente úteis nas páginas de categoria de produto são elementos como amp-carousel e amp-bind, que oferecem aos visitantes uma maneira de criar galerias nas quais eles podem navegar em produtos e subcategorias. Eles também podem incluir legendas que descrevem resumidamente a imagem.

Quando eles precisam pesquisar um produto específico, você pode usar amp-form para criar uma barra de pesquisa e pode exibir esses resultados em uma página diferente ou na mesma. Você pode até mesmo preencher os termos automaticamente:

Fora da capacidade de pesquisar e organizar por produto ou tipo, que vem nativamente em AMP, as páginas de categoria de produto geralmente são bastante simples. Com uma vitrine de imagens e texto mínimo, eles têm um design simples que pode fornecer experiências em velocidades incomparáveis.

AMP oferece este exemplo de uma página de produto com uma função de pesquisa e organização de produto:

Esta é uma indicação melhor de uma página de categoria de produto que você pode criar com AMP:

Isso vem da Myntra, a maior marca de moda online da Índia. Quando investiram em AMP, observaram uma melhoria de 60% na velocidade e uma redução de 40% nas taxas de rejeição nas páginas de destino pós-clique mais importantes. E com a ajuda do amp-bind, eles não precisaram comprometer a experiência do usuário. Os visitantes podem classificar e filtrar produtos e tamanhos como fariam em qualquer página não AMP. Eles obtiveram uma ótima experiência do usuário em um piscar de olhos.

3. Exibir conteúdo personalizado

A tática mais poderosa dos profissionais de marketing para impulsionar as conversões é a personalização. Quanto mais relevante for uma oferta para o seu público, maior será a probabilidade de ele reivindicá-la.

Agora, com o componente amp-access, os comerciantes podem exibir blocos de conteúdo com base no status do usuário, por exemplo, se ele está conectado ou não. Para exibir conteúdo personalizado ou recomendações em um carrossel, os usuários podem tirar proveito do amp-list. Diz o Google:

O comportamento padrão do amp-mustache para renderizar dados amp-list é circular dentro dos objetos de itens; adicionar um carrossel de amp dentro do modelo faria com que o modelo renderizasse vários carrosséis; uma maneira de contornar isso é fazer com que o ponto de extremidade amp-list retorne uma única entrada nos itens.

Eles também podem usar amp-list para retornar conteúdo personalizado ao usuário com a ajuda de cookies (usando o atributo credentials = ”include”) ou o ID do cliente de AMP:

Outra maneira de exibir conteúdo personalizado, diz AMP, é usar amp-bind com um endpoint JSON. Isso é especialmente útil quando os dados precisam ser atualizados após uma interação do usuário, como um hotel exibindo a disponibilidade de quartos após uma reserva.

4. Carrinho de compras

O suporte para um carrinho de compras agora vem nativo em AMP. Para construí-lo, o Google recomenda o uso de amp-list, que pode exibir ao usuário uma lista dinâmica do que foi adicionado a ele:

amp-list precisa enviar o cookie da sessão no cabeçalho da solicitação para que o servidor possa recuperar o conteúdo do carrinho na sessão. Por esse motivo, usamos credentials = ”include”, como um atributo adicional.

Organizada dessa forma, cada linha da lista pode conter pedidos de compras personalizados de um usuário. E cada item dessa lista terá um botão para remover itens do carrinho. Além disso, o suporte para adicionar esses itens é apenas como mostra esta demonstração.

5. Fluxo de checkout e pagamentos

Antes, se você quisesse velocidade e capacidade de receber pagamentos, precisava começar com AMP e redirecionar seus usuários para uma página de checkout não AMP. Hoje, você pode permitir que os usuários façam check-out nas suas páginas AMP.

No Chrome, você pode usar a API de solicitação de pagamentos. Isso permitirá que os usuários façam check-out por meio de uma caixa de diálogo em seus navegadores. Aqui está um exemplo rápido.

A outra opção é construir seu fluxo de checkout dentro do AMP com amp-form. Se pagar por um produto requer um login, você pode combinar esses elementos com amp-access.

E se você preferir verificar os usuários em seu site, essa ainda é uma opção, desde que você possa fazer a transição dos visitantes de forma rápida e perfeita para o processo de pagamento de seu site. Aqui está um exemplo do WompMobile:

6. Analytics

Avalie a eficácia do uso de AMP para comércio eletrônico com amp-analytics. Este elemento oferece suporte a ferramentas analíticas de terceiros e internas. Isso inclui soluções populares como Google Analytics, Adobe Analytics, Nielsen, Quantcast e muito mais.

Para uma ideia geral de como os visitantes estão interagindo com as páginas AMP, consulte as análises nativas de AMP. Atualmente, amp-analytics pode rastrear eventos como:

• Visualização de página
• Cliques de âncora
• Cronômetro
• Rolando
• Mudanças no carrossel de AMP
• Forma

Para coletar dados analíticos diretamente, você pode integrar sua solução com AMP. Apenas certifique-se de que seus dados de AMP estejam sendo atribuídos com precisão. Para testar se esse é o caso, o Google recomenda carregar suas páginas aceleradas para dispositivos móveis por meio do Google AMP Cache.

7. E mais ...

Os recursos acima são suportados nativamente pela estrutura AMP. Para adicionar recursos que ainda não são compatíveis com AMP, você pode usar o amp-iframe para incorporar conteúdo ou ferramentas mais sofisticadas, como aplicativos de bate-papo, mapas ou outras soluções de terceiros.

Outra opção é buscar o suporte de um aplicativo de terceiros, como os criados para usuários do Shopify. Aplicativos como esses possibilitam o uso de AMP com plug-ins e extensões, permitindo aos usuários iniciar um site de carregamento rápido com facilidade.

Os aplicativos AMP mais eficazes para Shopify são capazes de criar muitos tipos de página, como produto, coleção, página inicial e páginas de blog. Eles geralmente são acessíveis, ou mesmo gratuitos, e vêm com suporte confiável:

Existem plug-ins semelhantes para usuários do WordPress e também para usuários do Magento.

AMP para exemplos de comércio eletrônico

Você viu os componentes, agora vamos dar uma olhada em como algumas das maiores marcas online usam AMP para comércio eletrônico. Aqui está uma pequena demonstração, compilada por Plumrocket.

Newegg product page

1-800-Página da categoria de flores

Página de produto Eventbrite

Página de categoria de produto da Lancome

As marcas tiveram sucesso com AMP para comércio eletrônico?

De acordo com a Forrester, um site com AMP com tráfego considerável pode esperar um aumento de 20% na taxa de conversão de vendas nas páginas AMP, um aumento de 10% ano a ano no tráfego do site AMP e um aumento de 60% nas páginas por Visita. Então, como estão as marcas da vida real?

AMP para usuários de comércio eletrônico, em números

• O Advance Create, o maior site de comparação de seguros do Japão, diminuiu o tempo de carregamento da página em 61,2% e o custo por ação em 36,8%, ao mesmo tempo que aumentou a taxa de conversão em 28,9%.
• O Event Tickets Center produziu um aumento de 20% na taxa de conversão e de 13% no tempo no local, enquanto reduzia a taxa de rejeição em 10%.
• DiscoverCarHire.com gerou um aumento de 22% nas visitas móveis e 29% mais conversões de dispositivos móveis por meio do Google Ads. Eles também melhoraram o tráfego orgânico móvel do site em 73% usando AMP.
• Os clientes da Fastcommerce observaram um aumento de 15% nas conversões em 2 milhões de páginas ao comparar páginas AMP com não AMP.
• O WompMobile observou um aumento de 105% nas taxas de conversão e uma diminuição de 31% nas taxas de rejeição com páginas AMP de comércio eletrônico em comparação com páginas não AMP.
• O Wego.com gerou um aumento de 95% nas taxas de conversão de seus parceiros e um aumento de 3 vezes nas conversões de anúncios após a criação de versões AMP das principais páginas de destino.
• Greenweez viu metade de seu tráfego orgânico móvel vir de AMP entre janeiro e março de 2017. Eles também aumentaram as taxas de conversão móvel em 80%, enquanto diminuíram os custos de aquisição móvel em 66%.

Aumente sua taxa de conversão com AMP para comércio eletrônico

Embora alguns argumentem que o AMP não oferece suporte a sites de comércio eletrônico, está claro que esse não é o caso. As marcas já tiveram sucesso com o AMP como uma forma de fornecer experiências amigáveis ​​ao usuário com muito mais rapidez. E no comércio eletrônico, tempo é dinheiro. Velocidade é receita.

Da mesma forma que o Shopify, o WordPress e o Magento oferecem suporte a aplicativos AMP, o Instapage também. Isso significa que, por meio do criador Instapage, você pode criar páginas de destino AMP pós-clique de maneira tão intuitiva quanto faria com qualquer outra página. Aprenda como fazer isso em escala com uma demonstração Instapage.