La personnalisation B2B sur mobile est souvent traitée après coup. Les règles de personnalisation sont conçues dans un navigateur desktop, relues sur un écran de 27 pouces et validées avant que quiconque n'ouvre la variante sur un téléphone. Puis un acheteur tape sur un lien dans un message LinkedIn, reçoit le hero par défaut parce que le bloc personnalisé s'est chargé trop tard, et fait défiler une carte d'étude de cas comprimée dans une colonne de deux mots de large.
L'importance de ce sujet dépend de votre trafic, et vous devriez le vérifier avant de poursuivre la lecture. Cet article explique comment évaluer l'opportunité mobile à partir de vos propres données, ce qui change quand on personnalise pour un petit écran, les schémas de CTA et de formulaires qui fonctionnent sur téléphone, comment tester les variantes sur de vrais appareils, et les situations où les visites mobiles portent le plus d'intention.
Partez de votre propre répartition par appareil
Les chiffres publiés sur la « part du trafic B2B sur mobile » varient énormément et mélangent des sites très différents : ils ne servent pas à grand-chose pour planifier. Votre outil d'analytics répond à la question pour votre activité en quelques minutes :
- Dans GA4, ouvrez Rapports → Technologie → Détails de la technologie et changez la dimension pour Catégorie d'appareil. Utilisez les 90 derniers jours.
- Ajoutez une comparaison pour le trafic que vous personnalisez réellement (par exemple, un segment de comptes cibles identifiés, ou les sessions issues des campagnes payantes et email).
- Notez la part des sessions et la part des événements clés (demandes de démo, formulaires de contact) sur mobile et sur ordinateur.
- Répétez l'opération pour vos trois landing pages les plus fréquentées. La part du mobile est souvent très différente sur une page qui reçoit des clics d'e-mails et des réseaux sociaux que sur la page d'accueil.
Deux cas de figure méritent d'agir. Si le mobile représente une grande part des sessions mais une petite part des conversions, l'expérience mobile fait probablement fuir les visiteurs. Si le mobile est faible globalement mais important sur certaines pages de campagne, personnalisez d'abord ces pages pour le mobile et laissez le reste.
Prudence avec l'écart de conversion. Une partie n'est pas un problème à corriger : beaucoup d'acheteurs lisent sur téléphone et convertissent plus tard sur ordinateur. Examinez le parcours multi-appareils avant d'accuser la page mobile (voir la section sur les indicateurs ci-dessous).
Ce qui change sur un petit écran
Un seul élément personnalisé au-dessus de la ligne de flottaison, pas quatre
Sur ordinateur, un hero peut afficher côte à côte un titre personnalisé, un bandeau de logos du secteur du visiteur, un témoignage et un CTA. Sur un téléphone de 375 pixels de large, le premier écran accueille le titre, une ou deux lignes de sous-titre et éventuellement un bouton. Décidez quel élément unique signale « c'est pour vous » et assurez-vous qu'il est visible sans défiler. Dans la plupart des configurations B2B, c'est le titre, car c'est l'élément le moins coûteux à faire varier et le premier lu.
La vitesse d'affichage détermine si la variante est vue ou non
La personnalisation côté client fonctionne généralement ainsi : la page par défaut s'affiche, un script demande au service de personnalisation qui est le visiteur, puis remplace le contenu. Sur une connexion mobile plus lente, l'intervalle entre ces étapes s'allonge : le visiteur voit soit la version par défaut s'afficher brièvement avant la variante (scintillement), soit un bloc vide pendant l'attente. Aucun des deux n'aide.
Pour vérifier la vôtre, ouvrez la page personnalisée dans Chrome DevTools, réglez la limitation réseau sur l'un des préréglages lents (comme Slow 4G) et la limitation CPU sur 4x, puis enregistrez un profil de performance. Regardez à quel moment le titre de la variante apparaît par rapport à la version par défaut. Passez ensuite la même URL dans PageSpeed Insights et comparez le Largest Contentful Paint des versions personnalisée et par défaut. Si la variante retarde sensiblement le LCP, prenez la décision plus tôt : côté serveur, en edge, ou au minimum masquez uniquement le bloc remplacé (pas toute la page) jusqu'à ce qu'il soit prêt.
Pas de survol
Les infobulles, panneaux qui s'affichent au survol et aperçus d'études de cas au passage de la souris ne fonctionnent pas sur un écran tactile. Tout composant personnalisé qui repose sur le survol doit avoir un équivalent au tap. Pour les zones tactiles, le critère renforcé des WCAG 2.2 demande au moins 44 par 44 pixels CSS ; c'est un critère de niveau AAA, mais un minimum raisonnable pour les boutons principaux.
Des sessions courtes, et le même acheteur sur un autre appareil
Les visites mobiles sont souvent brèves et reprises plus tard sur un ordinateur portable. Un cookie déposé sur le téléphone n'est pas disponible sur l'ordinateur : les segments basés sur les cookies ne suivent donc pas la personne. L'identification au niveau de l'entreprise (IP inversée ou enrichissement sur le réseau du visiteur) et les contacts connus du CRM qui cliquent sur des liens trackés sont les signaux qui ont tendance à se transmettre d'un appareil à l'autre. Concevez les règles de personnalisation pour qu'elles gardent leur sens même si le visiteur n'a qu'une seule session sur chaque appareil.
Modèles de mise en page pour les blocs personnalisés
Définissez un ordre de priorité mobile pour vos blocs personnalisés avant que le designer ne les empile. Un ordre courant : titre, puis CTA, puis preuve (logo ou citation d'une ligne d'une entreprise similaire), puis contenu complémentaire comme une carte d'étude de cas. Quand les colonnes desktop se replient, les blocs apparaissent dans cet ordre plutôt que dans celui que la grille produit par hasard.
Autres tendances qui se confirment :
- Condensez, ne masquez pas. Sur ordinateur, une carte d'étude de cas peut afficher un titre, un résumé de deux phrases et un résultat. Sur mobile, affichez le titre et le résultat et placez le résumé derrière un tap. Le signal personnalisé (le nom du secteur, le logo client) reste visible.
- De courts carrousels horizontaux pour les preuves. Si vous personnalisez plusieurs témoignages, une rangée à faire défiler prend moins de place en hauteur que de les empiler. Limitez-vous à quelques éléments et désactivez le défilement automatique sur les appareils tactiles, où il contrarie les gestes de l'utilisateur.
- Gardez des textes de variante courts dès l'écriture. Un titre qui tient sur deux lignes sur desktop peut s'étaler sur cinq sur un téléphone. Rédigez la variante de chaque segment avec une limite de caractères et prévisualisez-la à 375 pixels avant publication.
CTA et formulaires sur mobile
Si votre produit dispose d'une application compagnon, un CTA d'installation peut mieux servir les visiteurs mobiles qu'un formulaire de démo. Nos exemples de landing pages d'applications montrent comment les équipes gèrent les badges des stores et les bannières d'application intelligentes sans perdre la conversion web.
CTA fixe, personnalisé par segment
Sur un téléphone, le CTA principal disparaît vite de l'écran. Une fine barre fixe en bas le garde accessible. Son libellé est un élément facile à personnaliser, par exemple :
- Comptes grands comptes identifiés : « Parler à l'équipe grands comptes »
- Petites entreprises : « Voir les offres et tarifs »
- Visiteurs récurrents ayant consulté les tarifs : « Choisissez un créneau de démo »
Gardez la barre suffisamment petite pour qu'elle ne masque pas le contenu, et veillez à ce qu'elle ne se superpose ni au bandeau cookies ni à un widget de chat. Pour aller plus loin sur l'adaptation des libellés de CTA aux segments, consultez les CTA personnalisés fondés sur les données.
Des formulaires plus courts, avec moins de champs à saisir
Taper sur un téléphone est lent, donc chaque champ coûte plus cher que sur ordinateur. Notre guide sur le formulaire de capture de leads recommande de ne demander que ce que vous ne pouvez pas retrouver vous-même ; sur mobile, cet argument est encore plus fort.
- Utilisez l'enrichissement plutôt que des listes déroulantes. Si l'entreprise est identifiée, préremplissez le nom, la taille et le secteur, ou supprimez ces champs. Affichez l'entreprise préremplie avec un lien « modifier » plutôt que de demander au visiteur de tout confirmer.
- Utilisez les bons types de champs.
type="email"ettype="tel"affichent les claviers adaptés, et l'attributautocomplete(email,name,organization) permet au téléphone de remplir les informations enregistrées. - Reportez les questions secondaires. Demandez le numéro de téléphone ou les détails du projet sur la page de remerciement ou dans l'outil de prise de rendez-vous, une fois la conversion principale enregistrée.
Mesurez l'effet sur votre propre trafic. Comparez les taux de démarrage et de complétion des formulaires sur les sessions mobiles avant et après, et vérifiez si la qualité des leads évolue ; un calcul de taille d'échantillon à l'aide de notre guide sur la taille d'échantillon des A/B tests vous indique combien de temps cela prendra.
Le click-to-call, pour les segments qui le souhaitent
Un lien tel: se déclenche d'une simple pression sur un téléphone. Pour les segments grands comptes, où un appel est une étape naturelle, un bouton « Appeler notre équipe grands comptes » peut fonctionner. Pour les segments en libre-service, généralement pas : l'acheteur d'une petite entreprise qui veut essayer le produit a peu de chances de vouloir un appel commercial. C'est un cas où les règles de segment évitent une mauvaise expérience autant qu'elles en créent une bonne.
Tester les variantes sur de vrais appareils
Vérifiez chaque variante personnalisée sur trois largeurs d'écran avant le lancement :
| Profil | Ampleur à tester | Ce qui casse généralement |
|---|---|---|
| Petit téléphone | 320-375 px | Titres de variantes trop longs qui passent à la ligne, barre fixe qui masque le formulaire, boutons repoussés sous la ligne de flottaison |
| Téléphone standard | 390-430 px | Scintillement sur les connexions lentes, balayages de carrousel en conflit avec le défilement de la page |
| Tablette | 768-1024 px | Recevoir la mise en page desktop avec une saisie tactile, si bien que les éléments au survol ne fonctionnent plus |
L'émulation d'appareils des DevTools convient pour la mise en page. Elle ne reproduit ni le vrai comportement tactile, ni le vrai rendu des polices, ni le processeur d'un smartphone milieu de gamme : ouvrez donc chaque variante sur au moins un téléphone physique avant sa mise en ligne. Pour voir une variante sans faire partie du segment, utilisez le mode aperçu de votre outil de personnalisation ou un paramètre d'URL qui la force.
Ce qu'il faut suivre séparément sur mobile
- Profondeur de défilement sur les pages personnalisées. Si la plupart des visiteurs mobiles n'atteignent jamais le bloc de preuves personnalisé, remontez-le ou supprimez-le sur mobile.
- Démarrage et finalisation des formulaires par appareil. Un faible taux de démarrage met en cause la page ; un faible taux de finalisation met en cause les champs.
- Rage taps et dead taps. Les outils d'enregistrement de sessions signalent les appuis répétés sur des éléments qui ne font rien, ce qui signifie généralement que quelque chose ressemble à un lien sans en être un.
- Retour multi-appareils. Parmi les entreprises identifiées, combien reviennent sur ordinateur dans la semaine qui suit une visite mobile, et convertissent-elles à ce moment-là ? Si c'est souvent le cas, jugez les pages mobiles sur leur capacité à générer ce retour, et pas seulement sur les conversions mobiles.
Là où les visites mobiles portent le plus d'intention
Événements
Les participants se renseignent sur les exposants entre deux sessions. Si vous exposez, programmez une règle pour les dates de l'événement qui montre aux visiteurs de la ville hôte (ou des entreprises de la liste des participants) un hero faisant référence à l'événement, avec un lien pour réserver un rendez-vous sur le stand. Retirez-la le jour de la fin de l'événement. Notre guide sur la capture de leads lors des événements traite de la partie relance.
Clics e-mail et LinkedIn
Consultez le rapport par appareil de votre plateforme d'e-mailing : pour la plupart des listes, une grande part des ouvertures et des clics se fait sur smartphone. Un clic depuis un e-mail de campagne vous indique déjà ce qui intéresse le visiteur. Transmettez-le via des paramètres UTM et servez-vous-en pour choisir la variante, afin que la page prolonge le sujet de l'e-mail au lieu de repartir de zéro sur une page d'accueil générique.
Liens envoyés par les commerciaux
Quand un commercial envoie un lien dans un message LinkedIn ou un e-mail de relance, le prospect l'ouvre souvent sur son téléphone. Donnez aux commerciaux des liens trackés (avec le compte ou la campagne dans les paramètres) qui ouvrent une page sur le sujet dont ils ont parlé. C'est là que la personnalisation au niveau du compte se justifie le plus facilement, car le contexte est explicite.
Lecture en déplacement
Quelqu'un qui lit dans le train survole, il n'évalue pas. Une option « envoyez-moi cette étude de cas » qui lui transmet le contenu par email convient souvent mieux qu'un formulaire de démo, et vous donne une raison de relancer une fois qu'il sera de retour à son bureau.
Un point de départ sur deux semaines
- Récupérez la répartition par appareil des sessions et des conversions, globalement et pour vos segments personnalisés.
- Choisissez la page où la part du mobile est la plus élevée parmi ces segments.
- Vérifiez la variante personnalisée de cette page sur un vrai téléphone et avec une connexion bridée. Corrigez d'abord le scintillement et la mise en page.
- Ajoutez un CTA fixe adapté au segment et réduisez le formulaire mobile aux champs que vous ne pouvez pas enrichir.
- Comparez les formulaires commencés et complétés sur mobile ainsi que les retours multi-appareils avec la période précédente, puis décidez s'il faut étendre les changements.
Si vous avez besoin d'un signal au niveau de l'entreprise qui résiste au passage du téléphone à l'ordinateur, l'identification des visiteurs de Markettailor identifie l'entreprise visiteuse sur l'un comme sur l'autre, et sa segmentation vous permet de construire les règles mobiles ci-dessus sur cette base.