Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Shopping discovery platform: widgets and community
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

11
Perezvoni.com

Perezvoni.com

perezvoni.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
MuWID

MuWID

muwid.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

"Мобилизация" виджетов SocialMart - путь и первые результаты

423 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
В начале июля мы наконец-то запустили мобильные форматы виджетов. Спешим поделиться с вами небольшим рассказом о нововведении, а также первыми результатами и кейсами.

Целесообразность затеи "go mobile"

С самого начала мы понимали, что рано или поздно нам необходимо будет адаптировать наши виджеты под мобильные устройства и планшеты. Причем лучше рано, чем поздно. Однако реальность, состоящая из большого объема более (а иногда, будем откровенны, менее) приоритетных задач привела к тому, что данная задача лежала в нашем бэк-логе довольно долго. И вот, наконец, к концу весны, с приходом в нашу команду фронтенд-разработчика на фулл-тайм, мы приступили к разработке мобильных форматов.

Перед этим мы замерили, что в общем объеме трафика наших партнеров (25М уникальных просмотров страниц с нашими виджетами в месяц) на долю мобильного трафика приходится ни много ни мало 16%. Цифра хорошая, с учетом ее динамики и активности многих наших партнеров-паблишеров, которые на наших глазах адаптируют свои сайты под мобильные устройства. Напомним, что ровно год назад, в июле 2014, доля мобильного трафика в целом по РФ преодолела порог в 20%. Как обстоят дела сейчас, спустя год, - точной информации у нас нет. Если у кого-то есть последние цифры, поделитесь ими в комментах, пожалуйста.

Как делали

Первый мобильный формат рекламы, который нас заинтересовал, мы встретили на сайте Adme.ru (кажется, это была осень 2014-го) - блок Яндекс.Директа внезапно прилип к экрану моего смартфона. "Здорово!" - подумал я тогда, однако восхищение длилось не долго, поскольку содержание объявления по ретаргетингу Директа было для меня абсолютно не интересно и неконтекстно. Тогда мы в команде сошлись во мнении, что именно такой формат отлично подойдет нашим контекстным и дополняющим контент виджетам.

На входе, помимо цифры, характеризующей интенсивность мобильного трафика в общем объеме трафика, с которым мы работаем, у нас было знание специфики сайтов наших партнеров (на данный момент в рекламную сеть SocialMart входит 175 тематических сайтов). От этой специфики во многом зависела постановка технического задания. Сайты наших партнеров условно можно разделить на 3 категории:

  1. Старожилы
  2. Гибкие середнячки
  3. Новые и современные

b_55b368f4aebff.jpg

В категорию "старожилы" входят устаревшие и трудно подвижные в техническом плане сайты без адаптации под мобильные устройства. Чаще всего, это крупнейшие с точки зрения объема трафика сайты, которым по разным причинам очень сложно менять структуру и движок. Безусловно, владельцы таких сайтов видят необходимость адаптироваться под современные требования, однако для этого требуется много времени. Примеры - ixbt.com, 3dnews.ru, mobile-review.com, zoom.cnews.ru, THG.ru, igromania.ru, mobiledevice.ru. В связи с отсутствием мобильной версии сайтов для таких партнеров мы решили определять тип устройства посетителя и в случае смартфонов и планшетов заменять десктопный виджет мобильной версией, которая отличалась бы более крупными картинками и шрифтами. Если говорить о доле трафика таких сайтов в общем объеме, то это примерно 50%.

Гибкие середнячки - сайты помоложе, более гибкие и вовремя смекнувшие, что необходимо озаботиться мобильной версией. Примеры - mobiltelefon.ru, iRecommend.ru, notebook-center.ru. Для таких сайтов решили делать полноценные мобильные виджеты 2-х вариантов - 1) виджет адаптированный под мобильный сайт, расположенный в определенном месте страницы 2) виджет, который "липнет" к экрану при определенных условиях (при доскролливании до конца статьи, либо по истечении определенного времени). Доля трафика таких сайтов в общем объеме - примерно 30%.

Новые и современные - молодые сайты, изначально заточенный под мобильные устройства. Примеры - lenovo-smart.ru, s4galaxy.ru, xperia-droid.ru, galaxy-droid.ru. Таким сайтам предлагается те же варианты мобильных виджетов, что и гибким середнячкам. Доля трафика таких сайтов в общем объеме - примерно 20%.

Теперь немного о технике...

В целом, разработка и бесперебойное функционирование мобильной версии виджетов в условиях их работы на различных платформах, экранах различной диагонали, спецификой сайтов-партнеров и т.д. - оказалась непростой задачей. Необходимо было исключить влияние стилей сайта на виджет. Мы провели всесторонний анализ и в результате выбрали полный (экстремальный) сброс стилей с помощью cleanslate. Данный набор стилей позволил, если не полностью, то максимально, обеспечить независимость стилей виджета от сайта-носителя. В самой верстке виджета, для обеспечения наилучшего визуального отображения и максимальной гибкости, использован flexbox-подход и колоночная верстка. Возникли проблемы с совместимостью некоторых свойств из состава flexbox, в частности с flex-basis на Android версии ниже 4.3. Данная проблема была решена добавлением css-свойства width в колонки. Также в виджете использован самописный swipe, для просмотра доступных моделей товаров. Активно применены и будут расширяться media-queries для обеспечения наилучшей визуализации виджета на конкретных мобильных устройствах.

Что получилось

Для мобильного браузинга немобильных сайтов получился укрупненный формат, который стал существенно более заметным, чем прежде.

b_55b3590d69d1e.jpg

Полноценного A/B-тестирования нового формата мы пока не проводили, однако по ощущениям CTR вырос на 10-15%.

Для мобильных сайтов получился полноценный мобильный виджет, который можно устанавливать в определенном месте статьи, либо задавать условия, при которых он будет "липнуть" к экрану (скролл до конца статьи, либо по истечении определенного времени после загрузки страницы - 0, 3, 5, 7 и 10 секунд).

b_55b35a6d1bcf2.jpg

Виджет скрывается тапом на логотип, принимая компактный и нераздражающий вид, и таким же образом раскрывается снова. Предусмотрен горизонтальный скролл для пролистывания товаров, а также вертикальный скролл для пролистывания предложений магазинов. Многие наши партнеры заводят отдельный виджет мобильного формата для мобильной версии сайта, чтобы по нему можно было видеть отдельную статистику, не смешивая ее с обычным десктопным форматом. Приводим 2 кейса и делимся конкретными цифрами

Кейс - Паблишер "А"

2 отдельных виджета - под десктоп и мобильную версию сайта. Мобильный формат виджета - "липнет" к экрану после доскролливания до конца статьи.

  • средний CTR виджета до запуска мобильного формата - 1,01%, среднее количество кликов в сутки - 235
  • средний CTR десктоп-виджета после разделения форматов - 1,48%, среднее количество кликов в сутки - 189
  • средний CTR мобильного формата - 1,22%, среднее количество кликов в сутки - 119

Результат: разделение трафика на мобильный и десктопный дало 308 кликов против 235 (рост на 31%).

Кейс - Паблишер "Б"

1 общий виджет на обе версии сайта (десктоп и мобильная). Мобильный формат рендерится на мобильной версии сайта - "липнет" к экрану через 5 секунд после загрузки страницы.

  • средний CTR виджета до запуска мобильного формата - 1,02%, среднее количество кликов в сутки - 156
  • средний CTR виджета после запуска мобильного формата - 1,83%, среднее количество кликов в сутки - 269

Результат: Рост по CTR - 79%, рост по кликам - 72%.

Получив такие цифры, "мобилизацию" мы признаем крайне успешной. Остается только сожалеть о том, что не разработали мобильные форматы сразу, когда запускали первый виджет в мае 2013-го. Однако тут как нельзя кстати актуально выражение - "лучше поздно, чем никогда".

Несколько живых примеров:

  1. Мобильный виджет на обычном сайте
  2. Мобильный виджет на мобильном сайте
  3. Мобильный виджет на мобильном сайте (через 5 секунд после загрузки страницы)

Развитие мобильных форматов

Для дальнейшего развития мобильных форматов наших виджетов мы видим несколько направлений:

  1. Мобильный формат для гипертекстового виджета - когда виджет всплывает при тапе на название модели или вендора в тексте статьи;
  2. Полноэкранный формат ("витрина") - виджет можно будет развернуть на полный экран, для того чтобы увидеть больше товаров, релевантных контенту, и воспользоваться дополнительным функционалом;
  3. Выдача дополнительных товаров - похожих, рекомендованных и аксессуаров;
  4. Дополнительный функционал - в частности, мы планируем добавить поисковую строку, для того чтобы можно было найти любой интересующий товар прямо из виджета.

Оставляйте свои комментарии - будем рады развить горячую тему мобильных форматов рекламы. Также ждем критики, вопросов и предложений.

Николай Пашолок (SocialMart CEO & founder, product ideologist)

0
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать