Мобільна B2B-персоналізація: як охопити покупців на кожному пристрої

Мобільна B2B-персоналізація зазвичай залишається на потім. Правила персоналізації проєктують у десктопному браузері, переглядають на 27-дюймовому моніторі й затверджують, перш ніж хтось відкриє варіант на телефоні. А потім покупець торкається посилання в повідомленні LinkedIn, отримує стандартний головний банер, бо персоналізований блок завантажився із запізненням, і прогортає картку кейсу, втиснуту в колонку завширшки два слова.

Наскільки це важливо, залежить від вашого трафіку, і це варто перевірити, перш ніж читати далі. У цій статті розглянуто, як оцінити мобільну можливість за власними даними, що змінюється під час персоналізації для малого екрана, патерни CTA і форм, що працюють на телефоні, як тестувати варіанти на реальних пристроях і ситуації, коли мобільні візити мають найвищий намір.

Почніть із власного розподілу за пристроями

Опубліковані дані про «частку мобільного B2B-трафіку» дуже різняться й змішують зовсім різні сайти, тож для планування від них мало користі. Ваша аналітика відповість на це питання для вашого бізнесу за кілька хвилин:

У GA4 відкрийте Reports → Tech → Tech details і змініть параметр на Device category. Використовуйте останні 90 днів.
Додайте порівняння для трафіку, який ви справді персоналізуєте (наприклад, сегмент ідентифікованих цільових акаунтів або сесії з платних та email-кампаній).
Зафіксуйте частку сесій і частку ключових подій (запити на демо, контактні форми) для мобільних і десктопів.
Повторіть для трьох цільових сторінок із найбільшим трафіком. Частка мобільних на сторінці, що отримує кліки з email і соцмереж, часто дуже відрізняється від частки на головній.

Варто реагувати на два патерни. Якщо на мобільні припадає велика частка сесій, але мала частка конверсій, мобільна версія, ймовірно, втрачає людей. Якщо мобільних загалом мало, але багато на окремих сторінках кампаній, спершу персоналізуйте для мобільних саме ці сторінки, а решту залиште.

Обережно з розривом у конверсії. Частина його — не проблема: багато покупців читають на телефоні, а конвертуються пізніше на ноутбуці. Перш ніж звинувачувати мобільну сторінку, перевірте картину між пристроями (див. розділ про метрики нижче).

Що змінюється на малому екрані

Один персоналізований елемент на першому екрані, а не чотири

Десктопний банер може вмістити персоналізований заголовок, смугу логотипів із галузі відвідувача, відгук і CTA поруч. На телефоні шириною 375 пікселів перший екран вміщує заголовок, рядок-два підтексту і, можливо, кнопку. Вирішіть, який один елемент сигналізує «це для вас», і переконайтеся, що він видимий без прокрутки. У більшості B2B-налаштувань це заголовок, бо його найдешевше варіювати і його читають першим.

Швидкість рендерингу вирішує, чи побачать варіант узагалі

Клієнтська персоналізація зазвичай працює так: відображається стандартна сторінка, скрипт запитує в сервісу персоналізації, хто відвідувач, а потім замінює контент. На повільнішому мобільному з’єднанні проміжок між цими кроками довший, тож відвідувач або бачить, як стандартна версія блимає перед варіантом (мерехтіння), або бачить порожній блок, доки той чекає. Ні те, ні інше не допомагає.

Щоб перевірити свій варіант, відкрийте персоналізовану сторінку в Chrome DevTools, увімкніть обмеження мережі одним із повільніших пресетів (наприклад, Slow 4G) і обмеження CPU 4x та запишіть профіль продуктивності. Подивіться, коли з'являється заголовок варіанта порівняно з варіантом за замовчуванням. Потім проженіть той самий URL через PageSpeed Insights і порівняйте Largest Contentful Paint для персоналізованої версії та версії за замовчуванням. Якщо варіант помітно затримує LCP, перенесіть рішення раніше: на сервер, на edge або принаймні приховуйте лише блок, що замінюється (а не всю сторінку), доки він не буде готовий.

Без наведення

Підказки, панелі, що з’являються при наведенні, і попередні перегляди кейсів при наведенні мишею нічого не дають на сенсорному екрані. Будь-якому персоналізованому компоненту, що покладається на наведення, потрібен відповідник для дотику. Щодо зон дотику, розширений критерій WCAG 2.2 вимагає щонайменше 44 на 44 CSS-пікселі; це критерій рівня AAA, але розумний мінімум для основних кнопок.

Короткі сесії, і той самий покупець на іншому пристрої

Мобільні візити часто короткі, а продовжуються пізніше на ноутбуці. Cookie, встановлений на телефоні, недоступний на ноутбуці, тож сегменти на основі cookie не слідують за людиною. Сигнали, що зазвичай переносяться, — це ідентифікація на рівні компанії (зворотний IP або збагачення за мережею, в якій перебуває відвідувач) і відомі з CRM контакти, що клікають на відстежувані посилання. Плануйте правила персоналізації так, щоб вони мали сенс, навіть якщо відвідувач бачить лише одну сесію на кожному пристрої.

Шаблони макета для персоналізованих блоків

Встановіть мобільний порядок пріоритетів для персоналізованих блоків, перш ніж дизайнер розташує їх стовпчиком. Поширений порядок: заголовок, потім CTA, потім доказ (логотип або цитата в один рядок від схожої компанії), потім допоміжний контент, як-от картка кейсу. Коли десктопні колонки згортаються, блоки з'являються саме в цьому порядку, а не в тому, який випадково дасть сітка.

Інші патерни, що себе виправдовують:

Стискайте, а не ховайте. Картка кейсу на десктопі може показувати заголовок, підсумок із двох речень і результат. На мобільному показуйте заголовок і результат, а підсумок відкривайте за дотиком. Персоналізований сигнал (назва галузі, логотип клієнта) залишається видимим.
Короткі горизонтальні каруселі для доказів. Якщо ви персоналізуєте кілька відгуків, ряд, який можна гортати, займає менше вертикального простору, ніж розміщення їх один під одним. Обмежтеся кількома елементами й вимкніть автопрокручування на сенсорних пристроях, де воно конфліктує зі свайпами користувача.
Пишіть тексти варіантів коротко з самого початку. Заголовок, що займає два рядки на комп’ютері, на телефоні може розтягнутися на п’ять. Пишіть варіант для кожного сегмента з обмеженням символів і переглядайте його на ширині 375 пікселів перед публікацією.

CTA та форми на мобільних

Якщо ваш продукт має супутній застосунок, мобільним відвідувачам може краще підійти CTA для встановлення, ніж форма демо. Наші приклади лендингів застосунків показують, як команди використовують значки магазинів і smart app banners, не втрачаючи конверсію у вебі.

Закріплений CTA, персоналізований за сегментом

На телефоні основний CTA швидко зникає з поля зору. Тонка закріплена панель унизу тримає його в доступі. Її напис легко персоналізувати, наприклад:

Ідентифіковані корпоративні акаунти: «Зв'язатися з командою для корпоративних клієнтів»
Менші компанії: «Переглянути тарифи та ціни»
Повторні відвідувачі, які переглядали ціни: «Оберіть час для демо»

Робіть панель достатньо малою, щоб вона не закривала контент, і переконайтеся, що вона не накладається на банер cookie чи віджет чату. Більше про узгодження тексту CTA із сегментами — у статті про персоналізовані CTA на основі даних.

Коротші форми й менше полів для заповнення

Набирати текст на телефоні повільно, тож кожне поле коштує дорожче, ніж на десктопі. Наш посібник про форму захоплення лідів радить питати лише те, чого не можна знайти самостійно; на мобільних цей аргумент ще сильніший.

Використовуйте збагачення замість випадних списків. Якщо компанію ідентифіковано, заповнюйте наперед назву, розмір і галузь компанії або приберіть ці поля. Покажіть наперед заповнену компанію з посиланням «змінити», а не просіть відвідувача підтверджувати все.
Задайте правильні типи полів. type="email" і type="tel" відкривають відповідну клавіатуру, а атрибут autocomplete (email, name, organization) дає змогу телефону підставити збережені дані.
Переносьте другорядні запитання на потім. Запитуйте номер телефону чи деталі проєкту на сторінці подяки або в планувальнику, після того як основну конверсію зафіксовано.

Вимірюйте ефект на власному трафіку. Порівняйте частку початих і завершених форм у мобільних сесіях до і після та перевірте, чи змінюється якість лідів; перевірка розміру вибірки з нашого посібника про розмір вибірки для A/B-тесту покаже, скільки часу це займе.

Дзвінок одним натисканням для сегментів, яким це потрібно

Посилання tel: — це один дотик на телефоні. Для enterprise-сегментів, де дзвінок — звичний наступний крок, кнопка «Зателефонувати нашій enterprise-команді» може спрацювати. Для сегментів самообслуговування зазвичай ні: покупець з малої компанії, який хоче спробувати продукт, навряд чи захоче дзвінка від відділу продажів. Це випадок, коли правила сегментів запобігають поганому досвіду так само, як створюють хороший.

Тестування варіантів на реальних пристроях

Перед запуском перевірте кожен персоналізований варіант на трьох ширинах:

Профіль	Ширина для тестування	Що зазвичай ламається
Малий телефон	320–375 px	Довгі заголовки варіантів переносяться на кілька рядків, закріплена панель перекриває форму, кнопки зсуваються за межі першого екрана
Звичайний телефон	390–430 px	Мерехтіння на повільніших з’єднаннях, свайпи каруселі конфліктують із прокручуванням сторінки
Планшет	768–1024 px	Отримання десктопного макета із сенсорним введенням, через що елементи, які працюють лише при наведенні, перестають працювати

Емуляції пристроїв у DevTools достатньо для макета. Вона не відтворює реальну поведінку дотиків, реальний рендеринг шрифтів чи процесор смартфона середнього класу, тож відкрийте кожен варіант хоча б на одному фізичному телефоні, перш ніж запускати. Щоб побачити варіант, не належачи до сегмента, скористайтеся режимом попереднього перегляду в інструменті персоналізації або URL-параметром, що його примусово вмикає.

Що відстежувати для мобільних окремо

Глибина прокручування на персоналізованих сторінках. Якщо більшість мобільних відвідувачів не доходять до персоналізованого блоку доказів, перемістіть його вище або приберіть на мобільних.
Початок і завершення заповнення форми за пристроями. Низький рівень початку вказує на проблему зі сторінкою; низький рівень завершення — на поля.
Rage taps і dead taps. Інструменти запису сесій позначають повторні дотики до елементів, які нічого не роблять; зазвичай це означає, що щось виглядає як посилання, але ним не є.
Повернення з іншого пристрою. Скільки ідентифікованих компаній повертаються з десктопа протягом тижня після мобільного візиту і чи конвертуються вони там? Якщо таких багато, оцінюйте мобільні сторінки за тим, чи приводять вони до цього повторного візиту, а не лише за мобільними конверсіями.

Де мобільні відвідування мають найбільше намірів

Заходи

Учасники заходів шукають інформацію про постачальників між сесіями. Якщо ви виставляєтеся, заплануйте на дати заходу правило, яке показує відвідувачам із міста проведення (або з компаній зі списку учасників) банер із згадкою про захід і посиланням для запису на зустріч біля стенду. Приберіть його в день завершення заходу. Наш посібник зі збору лідів на заходах описує етап фоллоу-апу.

Кліки з email та LinkedIn

Перевірте звіт про пристрої у вашій email-платформі: для більшості списків значна частка відкриттів і кліків припадає на телефони. Клік із листа кампанії вже говорить, що цікавило відвідувача. Передайте це через UTM-параметри й використовуйте їх для вибору варіанта, щоб сторінка продовжувала тему листа, а не починала все заново на загальній головній.

Посилання, надіслані відділом продажів

Коли менеджер надсилає посилання в повідомленні LinkedIn чи в листі фоллоу-апу, потенційний клієнт часто відкриває його на телефоні. Дайте менеджерам посилання з трекінгом (з акаунтом чи кампанією в параметрах), що відкривають сторінку про тему, яку обговорював менеджер. Тут персоналізацію на рівні акаунта найлегше обґрунтувати, бо контекст явний.

Читання в дорозі

Людина, що читає в потязі, переглядає, а не оцінює. Опція «надіслати мені цей кейс», яка відправляє контент на email, часто доречніша за форму демо — і дає вам привід для фоллоу-апу, коли людина повернеться за робочий стіл.

Відправна точка на два тижні

Отримайте розподіл за пристроями для сесій і конверсій — загалом і для ваших персоналізованих сегментів.
Оберіть одну сторінку, де частка мобільних найвища серед цих сегментів.
Перевірте персоналізований варіант цієї сторінки на справжньому телефоні та з обмеженою швидкістю з’єднання. Спершу виправте мерехтіння і макет.
Додайте закріплений CTA з урахуванням сегмента і скоротіть мобільну форму до полів, які не можна збагатити.
Порівняйте початки та завершення заповнення форм на мобільних і повернення з інших пристроїв із попереднім періодом, а тоді вирішіть, чи поширювати зміни.

Якщо вам потрібен сигнал на рівні компанії, який зберігається при переході з телефона на ноутбук, ідентифікація відвідувачів Markettailor визначає компанію-відвідувача на будь-якому пристрої, а її сегментація дає змогу будувати на цій основі мобільні правила, описані вище.