Personalização B2B no mobile: alcançando compradores em todos os dispositivos

A personalização B2B no celular costuma ficar em segundo plano. As regras de personalização são desenhadas em um navegador de desktop, revisadas em um monitor de 27 polegadas e aprovadas antes que alguém abra a variante em um celular. Aí um comprador toca em um link em uma mensagem do LinkedIn, recebe o hero padrão porque o bloco personalizado carregou tarde e rola a página passando por um card de estudo de caso espremido em uma coluna com duas palavras de largura.

O quanto isso importa depende do seu tráfego, e você deve verificar isso antes de continuar a leitura. Este post mostra como dimensionar a oportunidade no mobile com os seus próprios dados, o que muda quando você personaliza para uma tela pequena, os padrões de CTA e de formulário que funcionam no celular, como testar variantes em dispositivos reais e as situações em que as visitas pelo celular carregam mais intenção.

Comece pela sua própria divisão por dispositivo

Os números publicados sobre a "participação do mobile no tráfego B2B" variam muito e misturam sites muito diferentes, então ajudam pouco no planejamento. O seu analytics responde a essa pergunta para o seu negócio em poucos minutos:

1. No GA4, abra Relatórios → Tecnologia → Detalhes de tecnologia e mude a dimensão para Categoria do dispositivo. Use os últimos 90 dias.
2. Acrescente uma comparação para o tráfego que você realmente personaliza (por exemplo, um segmento de contas-alvo identificadas ou sessões de campanhas pagas e de e-mail).
3. Anote a parcela de sessões e a parcela de eventos principais (solicitações de demo, formulários de contato) no celular vs desktop.
4. Repita para as suas três landing pages com mais tráfego. A participação do celular costuma ser muito diferente em uma página que recebe cliques de e-mail e redes sociais em relação à página inicial.

Dois padrões merecem ação. Se o celular representa uma grande fatia das sessões, mas uma pequena fatia das conversões, a experiência mobile provavelmente está perdendo pessoas. Se o celular é pequeno no geral, mas grande em páginas de campanha específicas, personalize primeiro essas páginas para mobile e deixe o resto como está.

Cuidado com a lacuna de conversão. Parte dela não é um problema a corrigir: muitos compradores leem no celular e convertem depois no notebook. Verifique o quadro entre dispositivos antes de culpar a página mobile (veja a seção de métricas abaixo).

O que muda em uma tela pequena

Um elemento personalizado acima da dobra, não quatro

Um hero no desktop comporta um título personalizado, uma faixa de logos do setor do visitante, um depoimento e um CTA lado a lado. Em um celular de 375 pixels de largura, a primeira tela comporta o título, uma ou duas linhas de texto de apoio e talvez um botão. Decida qual elemento sozinho sinaliza “isto é para você” e garanta que ele fique visível sem rolar. Na maioria das configurações B2B é o título, porque é o elemento mais barato de variar e o primeiro a ser lido.

A velocidade de renderização decide se a variante chega a ser vista

A personalização client-side geralmente funciona assim: a página padrão renderiza, um script pergunta ao serviço de personalização quem é o visitante e, depois, troca o conteúdo. Em uma conexão móvel mais lenta, o intervalo entre essas etapas é maior, então o visitante vê a versão padrão piscar antes da variante (flicker) ou um bloco em branco enquanto espera. Nenhuma das duas coisas ajuda.

Para verificar o seu, abra a página personalizada no Chrome DevTools, configure a limitação de rede para um dos perfis mais lentos (como Slow 4G) e a limitação de CPU para 4x, e grave um perfil de desempenho. Veja quando o título da variante aparece em comparação com o padrão. Depois, rode a mesma URL no PageSpeed Insights e compare o Largest Contentful Paint das versões personalizada e padrão. Se a variante atrasa o LCP de forma perceptível, antecipe a decisão: no servidor, na edge ou, pelo menos, ocultando só o bloco trocado (não a página inteira) até que ele esteja pronto.

Sem hover

Tooltips, painéis que aparecem ao passar o mouse e prévias de estudos de caso no mouse-over não fazem nada em uma tela touch. Qualquer componente personalizado que dependa de hover precisa de um equivalente por toque. Para áreas de toque, o critério aprimorado da WCAG 2.2 pede pelo menos 44 por 44 pixels CSS; é um critério de nível AAA, mas um mínimo sensato para botões principais.

Sessões curtas e o mesmo comprador em outro dispositivo

As visitas pelo celular costumam ser breves e retomadas depois em um notebook. Um cookie definido no celular não está disponível no notebook, então os segmentos baseados em cookies não acompanham a pessoa. A identificação no nível da empresa (IP reverso ou enriquecimento na rede em que o visitante está) e os contatos conhecidos do CRM que clicam em links rastreados são os sinais que costumam se manter. Planeje as regras de personalização para que ainda façam sentido se o visitante tiver apenas uma sessão em cada dispositivo.

Padrões de layout para blocos personalizados

Defina uma ordem de prioridade mobile para os seus blocos personalizados antes de o designer empilhá-los. Uma ordem comum é: título, depois CTA, depois prova (logo ou citação de uma linha de uma empresa semelhante) e, por fim, conteúdo de apoio, como um card de case. Quando as colunas do desktop se recolhem, os blocos aparecem nessa ordem, e não na ordem que a grade acabar gerando.

Outros padrões que se sustentam:

• Condense, não esconda. Um card de estudo de caso no desktop pode mostrar um título, um resumo de duas frases e um resultado. No celular, mostre o título e o resultado e deixe o resumo atrás de um toque. O sinal personalizado (o nome do setor, o logo do cliente) continua visível.
• Carrosséis horizontais curtos para provas. Se você personaliza vários depoimentos, uma fileira deslizável ocupa menos espaço vertical do que empilhá-los. Limite a poucos itens e desative o avanço automático em dispositivos de toque, onde ele briga com o deslize do próprio usuário.
• Mantenha o texto das variantes curto desde a origem. Um título que cabe em duas linhas no desktop pode quebrar em cinco no celular. Escreva a variante de cada segmento com um limite de caracteres e visualize em 375 pixels antes de publicar.

CTAs e formulários no celular

Se o seu produto tem um app complementar, visitantes no celular podem ser mais bem atendidos por um CTA de instalação do que por um formulário de demo. Nossos exemplos de landing pages de apps mostram como as equipes lidam com selos de lojas e smart app banners sem perder a conversão na web.

CTA fixo, personalizado por segmento

No celular, o CTA principal sai de vista rapidamente. Uma barra fina fixa na parte inferior o mantém ao alcance. O texto dela é um lugar fácil de personalizar, por exemplo:

• Contas enterprise identificadas: “Fale com a equipe enterprise”
• Empresas menores: "Veja os planos e preços"
• Visitantes recorrentes que viram os preços: “Escolha um horário para a demo”

Mantenha a barra pequena o suficiente para não cobrir o conteúdo e garanta que ela não fique por cima do banner de cookies ou de um widget de chat. Para mais sobre como alinhar o texto do CTA aos segmentos, veja CTAs personalizados orientados por dados.

Formulários mais curtos e menos campos para digitar

Digitar no celular é lento, então cada campo custa mais do que no desktop. Nosso guia sobre o formulário de captura de leads defende pedir apenas o que você não consegue descobrir sozinho; no mobile, esse argumento é ainda mais forte.

• Use enriquecimento em vez de menus suspensos. Se a empresa for identificada, preencha previamente nome, porte e setor da empresa ou elimine esses campos. Mostre a empresa preenchida com um link "editar", em vez de pedir ao visitante que confirme tudo.
• Defina os tipos de input certos. type="email" e type="tel" abrem os teclados correspondentes, e o atributo autocomplete (email, name, organization) permite que o celular preencha os dados salvos.
• Deixe as perguntas secundárias para depois. Peça o telefone ou os detalhes do projeto na página de agradecimento ou no agendador, depois que a conversão principal for registrada.

Meça o efeito no seu próprio tráfego. Compare as taxas de início e de conclusão do formulário nas sessões mobile antes e depois e verifique se a qualidade dos leads muda; uma verificação de tamanho de amostra com o nosso guia de tamanho de amostra para teste A/B mostra quanto tempo isso vai levar.

Clique para ligar, para os segmentos que querem isso

Um link tel: é um toque no celular. Para segmentos enterprise, em que uma ligação é um próximo passo normal, um botão "Ligue para nossa equipe enterprise" pode funcionar. Para segmentos de autoatendimento, geralmente não funciona: um comprador de uma empresa pequena que quer testar o produto dificilmente quer uma ligação de vendas. É um caso em que as regras de segmento evitam uma experiência ruim tanto quanto criam uma boa.

Testando variantes em dispositivos reais

Confira cada variante personalizada em três larguras antes do lançamento:

A emulação de dispositivos do DevTools serve para o layout. Ela não reproduz o comportamento real do toque, a renderização real das fontes nem a CPU de um celular intermediário, então abra cada variante em pelo menos um celular físico antes de colocá-la no ar. Para ver uma variante sem estar no segmento, use o modo de pré-visualização da sua ferramenta de personalização ou um parâmetro de URL que a force.

O que acompanhar separadamente no mobile

• Profundidade de rolagem nas páginas personalizadas. Se a maioria dos visitantes no celular nunca chega ao bloco de provas personalizado, mova-o para cima ou retire-o no celular.
• Início e conclusão de formulários por dispositivo. Uma taxa de início baixa aponta para a página; uma taxa de conclusão baixa aponta para os campos.
• Rage taps e dead taps. Ferramentas de gravação de sessão sinalizam toques repetidos em elementos que não fazem nada, o que geralmente significa que algo parece um link e não é.
• Retorno entre dispositivos. Das empresas identificadas, quantas voltam pelo desktop em até uma semana após uma visita pelo celular, e elas convertem lá? Se muitas voltam, avalie as páginas mobile por gerarem essa visita de retorno, e não apenas pelas conversões no mobile.

Onde as visitas pelo celular têm mais intenção

Eventos

Os participantes pesquisam os fornecedores entre as sessões. Se você vai expor, programe uma regra para as datas do evento que mostre aos visitantes da cidade-sede (ou das empresas da lista de participantes) um hero que mencione o evento, com um link para agendar uma reunião no estande. Remova-a no dia em que o evento terminar. Nosso guia de captação de leads em eventos aborda a parte do follow-up.

Cliques em e-mails e no LinkedIn

Confira o relatório de dispositivos da sua plataforma de e-mail: na maioria das listas, uma grande parte das aberturas e cliques acontece no celular. Um clique vindo de um e-mail de campanha já diz o que interessou ao visitante. Passe isso por parâmetros UTM e use-os para escolher a variante, para que a página continue o tema do e-mail em vez de recomeçar em uma página inicial genérica.

Links enviados por vendas

Quando um vendedor envia um link em uma mensagem no LinkedIn ou em um e-mail de follow-up, o prospect muitas vezes toca nele pelo celular. Dê aos vendedores links rastreados (com a conta ou a campanha nos parâmetros) que abram uma página sobre o que o vendedor estava discutindo. É aqui que a personalização por conta é mais fácil de justificar, porque o contexto é explícito.

Lendo em trânsito

Quem está lendo no trem está passando os olhos, não avaliando. Uma opção "me envie este estudo de caso", que manda o conteúdo por e-mail, muitas vezes funciona melhor do que um formulário de demo, e dá a você um motivo para fazer follow-up quando a pessoa voltar à mesa.

Um ponto de partida de duas semanas

1. Levante a divisão por dispositivo de sessões e conversões, no total e para os seus segmentos personalizados.
2. Escolha a página com a maior participação de mobile entre esses segmentos.
3. Verifique a variante personalizada dessa página em um celular de verdade e em uma conexão limitada. Corrija primeiro o flicker e o layout.
4. Adicione um CTA fixo que reconheça o segmento e reduza o formulário mobile aos campos que você não consegue enriquecer.
5. Compare inícios de formulário no celular, envios concluídos e retornos entre dispositivos com o período anterior e, então, decida se vale estender as mudanças.

Se você precisa do sinal no nível da empresa que sobrevive à troca do celular para o notebook, a identificação de visitantes do Markettailor identifica a empresa visitante em qualquer dispositivo, e a segmentação permite construir as regras de mobile acima sobre essa base.