Не будучи программистом, опишите, как электронная коммерция работает с изображениями

План настройки E-commerce для интернет-магазина

Для работы потребуется внедренный на сайт контейнер GTM и Google Analytics с включенной электронной торговлей.

Сформулируем задачу. E-commerce подразумевает отправку данных с сайта о том, какие товары покупает пользователь, когда он заканчивает оформление заказа. Следовательно, требуется отправить данные о товарах в Google Analytics сразу после того, как пользователь заполняет форму заказа и нажимает кнопку.

Составляем пункты плана:

  • Оформить событие отправки формы заказа пользователем при условии её заполнения
  • Подготовить данные о товарах для отправки в Google Analytics сразу после события отправки формы

Создаем событие отправки формы заказа корзины с условием заполнения

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

В текущем примере, есть следующая форма заказа из корзины:

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

Для этой цели есть проверенный способ средствами GTM и небольшого программирования.

Для начала создадим Пользовательскую переменную — Собственный код JavaScript

Далее, введем следующий код JavaScript:

О том, что такое функции, переменные и условия, я объяснял в статье “Контекстный кодинг”. Если желаете разобраться в деталях, то рекомендую ознакомится.

В этой функции, есть две переменных — (name) имя и (phone) телефон, в которых в будущем будут значения полей формы. И условие if, которое гласит: Если имя и почта не содержат пустоту, то говорим (true) правда. В другом случае код скажет — (false) ложь.

Это и есть заготовка условия проверки. Теперь осталось в переменные name и email записывать данные из формы.

Сделать это достаточно просто. Нужно для начала найти элемент поля ввода на сайте и скопировать его Selector (селектор).

Пример в браузере Google Chrome:

Селектор, это уникальный путь к элементу, который позволит обращаться напрямую к нему и взаимодействовать с его атрибутами.

Далее, для теста найдем элемент в консоли браузера и попытаемся получить его value, предварительно заполнив поле ввода каким-то значением.

Для поиска элемента есть стандартная команда:

Выглядит это так:

Как видно, мы можем получать данные элемента по запросу.

Вставим эти команды в код проверки формы:

Важно: рекомендую копировать селекторы элементов формы в её исходном виде. То есть тогда, когда она еще не выдала ошибку при заполнении. Если говорить проще — перезагрузите страницу и только тогда копируйте селекторы.

Если вам тоже кажется, что эти селекторы смотрятся громоздко в коде, то в функционале GTM есть Пользовательская переменная — Элемент DOM, которая может получать данные элемента по селектору таким же образом, как и document. querySelector.

Заполняется она так:

А добавить в код нужно будет следующим образом:

Суть будет та же, но выглядит красивее.

В результате должна получится переменная проверки формы:

Я её назвал “Проверка на заполненность полей Оформить заказ” — чтобы точно было понятно что она делает.

Осталось сделать тег на отправку события и триггер на кнопку и после этого проверить работоспособность проверки.

Создаем стандартный тег на отправку события в Google Analytics:

Уверен с этим проблем не будет.

Далее, триггер. Нужно сделать триггер на клик кнопки “оформить заказ” и при этом сделать проверку заполненности полей.

Кнопку найдем с помощью селектора и добавим условие, чтобы переменная “Проверка на заполненность полей Оформить заказ” вернула нам true.

Условие: Click Element — соответствует селектору CSS позволяет сравнивать селектор элемента по которому был клик, с селектором условия. И при соответствии считает проверку успешной.

А вторым условием была подставлена переменная проверки, где ожидаемое значение: равно — true.

Конечный результат тега и триггера проверки отправки формы:

Важно: помните, что в теге Событие, поля Категория и Действия соответствуют Категории и Действию цели Google Analytics, которую вы создали.

Проверяем работу, не забыв обновить Диспетчер тегов и перезагрузив страницу сайта:

Без заполнения данных:

Условия не выполнены, событие не сработало и ничего не было отправлено.

При успешном заполнении:

После успешного оформления заказа сайт переадресует на страницу thanks, потому была показана статистика Google Analytics в реальном времени, где событие было отображено на временном графике.

Итак, отправка событий с формы работает успешно.

Шаблон проверки формы заказа гибок и его можно применять на разных таблицах с разными обязательными формами, просто меняя селекторы и изменяя количество переменных в условии. Например если бы там было еще обязательная переменная почта (email), то код бы выглядел так:

Событие отправки формы заказа по условию сделана, теперь перейдем непосредственно к настройке e-commerce.

Заполняем данные E-commerce в datalayer

Давайте разберемся для начала, какие данные нужны для e-commerce.

Для корректной работы e-commerce как минимум нужно:

transactionId — ID текущей транзакции (будет отображаться в отчетности Google Analytics)

transactionTotal — Сумма стоимости всех товаров

transactionProducts — Перечисление товаров

currency — Используемая валюта при покупке

Каждый товар в transactionProducts должен иметь следующие минимальные данные:

name — название товара

price — цена товара

quantity — количество единиц товара

sku — артикул товара

Здесь описаны дополнительные данные, которые можно собрать с помощью e-commerce

Отлично, теперь нам нужно определить, где взять в корзине сайта эти данные

Исходя из скриншота видно, что у товаров есть name, quantity и price. Но у товаров нету sku — это не проблема, разберем в процессе.

В корзине также есть сумма товаров, которую можно считать transactionTotal. В качестве currency (валюты) можно просто вписать RUB — т. на сайте используются рубли. А transactionId будет случайным числом, которое надо будет сгенерировать.

Начнем составлять шаблон для заполнения. Для этого нам потребуется тег “Пользовательский HTML”.

Внесем туда для начала переменные:

Выглядит для начала так:

transactionProducts равняется скобкам, потому что это обозначает в JavaScript будущий список значений. А учитывая, что туда будут динамично вписываться товары из корзины, то нужно написать именно так.

А теперь давайте последовательно заполним данными каждую переменную от простого к сложному.

Кстати если потребуется иная валюта, то просто впишите её аббревиатуру. Например для евро — EUR, для долларов — USD и т. Только не забудьте внести в кавычки как в примере (одинарные или двойные).

Внедряем полученную переменную в код:

Для этого нужно найти элемент на сайте, который выдает нужное значение:

Но прежде, давайте проверим в консоли, что это то, что нам нужно:

Как видно на гифке, первый вызов был по селектору с добавлением innerText — это позволяет получить данные записанные в найденном элементе.

И в выводе получился текст: “1 251 р. ” — что не подходит для записи в transactionTotal, т. нам нужно просто число.

Поэтому к следующему вызову был добавлен метод:. replace

Где в скобках первое значение в кавычках “что заменить”, а второе — “на что заменить”. В данном случае заменен: “ р. ” (конец строки после числа) на пустое значение. И на третий раз метод повторили и был убран лишний пробел, в результате получив число.

Рекомендую запомнить метод replace — определенно пригодится при поиске нужного значения на иных сайтах.

Результирующую комбинацию записываем в переменную:

Для начала повторим, что нам нужно сделать и в чём проблема.

В эту переменную нужно записать товары, которые были добавлены в корзину. Изначально неизвестно, какие товары будут добавлены в корзину и сколько их будет. Следовательно, элемент “товар” в корзине мы не можем выбрать по селектору, т. он непостоянный и динамичный. И в этом вопросе нам поможет немного логики и щепотка программирования.

Мы не можем работать с элементом которого может не быть, но мы можем работать с элементами, которые есть в корзине постоянно. И как бы “вслепую” работать с их дочерними элементами.

Смотрите пример ниже и разберем его далее:

Для начала, был найдена таблица, которая содержит все товары. Отличие таблицы от товаров — она статична и всегда будет на странице корзины, вне зависимости от количества товаров в корзине.

Далее, был взять селектор таблицы и найден в консоли. Следующим шагом, был использован метод children, который вывел список всех дочерних элементов — и это все товары.

Затем, с помощью квадратных скобок и введения номера, я мог выбирать любой дочерний элемент из списка. То есть сейчас имеется доступ ко всем товарам корзины и можно без проблем вписать данные каждого товара. Всё что требуется — создать последовательную запись каждого children таблицы.

Запишем следующее в код шаблона:

Что нового добавилось:

Объявлена новая переменная list, в которую записан селектор таблицы товаров с методом children. То есть по сути в list хранится список всех товаров. Осталось расшифровать данные, в чём нам поможет цикл for. О нём я подробно рассказывал в статье по контекстному кодингу, потому тут ограничусь краткой вводной.

В цикле for объявляется переменная i, которая принимает значение 0 и каждую итерацию цикла увеличивается на 1, до тех пор, пока длина списка товаров (list. length) больше переменной i. Например сейчас всего три товара в списке и list. length будет равно 3, значит цикл повторится 3 раза с увеличением переменной i на единицу каждый раз в конце прохода цикла.

Внутри цикла реализован следующий метод:

Как видно, можно обратится к children текущего children и найти интересующий нас элемент. В данном случае это был 1 элемент, который содержал нужный текст.

Следовательно можно дополнить переменную name такой формулировкой:

И теперь в name будет записываться название каждого товара.

С ценой и количеством поступим также:

При поиске количества товара как видно пришлось обратиться к дочернему элементу дважды и был получен нужный результат.

При поиске цены товара был задействован метод replace, чтобы избавиться от лишних символов.

В результате скрипт получится таким:

Теперь в цикле пополняется список актуальными данными каждого товара. Но как вы могли заметить, остался пустым sku — артикул товара. По той причине, что на сайте этих данных нет, а потом поле осталось пустым. Так же можно поступить и с любым другим полем, если по какой-то причине этих данных нет на сайте.

Ну и последнее — данные надо внести в datalayer.

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

Это по факту список Google Tag Manager, в котором он записывает и хранит данные произошедших событий. Его можно вызвать в консоли браузера, чтобы посмотреть его записи:

Как видно, он хранит все события, которые были произведены GTM.

Кроме того, с помощью datalayer можно вызывать события и хранить данные:

datalayer может вызывать пользовательские события. Здесь например был вызван test_event.

И есть возможность сохранить переменные с помощью push, в данном случае — data_list.

И все эти данные хранятся до тех пор, пока страница не будет перезагружена. Что как раз и нужно, для того чтобы сохранить данные о товарах и отправить их сразу при отправке формы заказа.

Дополним наш скрипт на основе полученных знаний:

Был добавлен метод dataLayer. push в который внесено пользовательское событие (event) — ecommerce. Вызов пользовательского события пригодится нам в будущем.

И добавлены переменные, которые были ранее собраны.

В результате в datalayer будут нужные для e-commerce значения и будет произведен вызов пользовательского события. Давайте протестим работу, добавив к тегу событие на клик кнопки оформить заказ:

Как видно, всё работает. В datalayer есть актуальные данные товаров, даже при их изменении.

Остался последний шаг — отправить данные в Google Analytics.

Завершение цепи событий — отправка транзакции в Google Analytics

Был создан тег на отправку события формы заказа с проверкой, тег на сбор данных e-commerce и осталось сделать тег на отправку данных и связать все эти три тега вместе.

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

Был создан тег в виде стандартного шаблона Google Analytics, где типом отслеживания была указана “транзакция”, а в качестве триггера было создано пользовательское событие ecommerce — то которое вызывает datalayer. Следовательно отправка данных будет сразу после того, как в datalayer попадут данные e-commerce.

Читать также:  Климченя и Климченко Л. С лучшие книги

Теперь осталось привязать событие добавления данных e-commerce при успешной отправке формы. Тут поможет порядок вызова тегов:

В теге отправки формы был настроен порядок активации тегов, где был указан тег для e-commerce. То есть тег e-commerce будет вызван сразу после отправки формы и не будет вызван, если произошла какая-то ошибка (неправильное заполнение например).

В результате выстраивается конечная цепочка тегов:

  • Тег отправки формы заказа
  • Тег заполнения данных для e-commerce
  • Тег отправки данных e-commerce в Google Analytics

Вот и всё! Результат можно проверить либо в отчетах Google Analytics по электронной торговле, либо с помощью расширения браузера — GA Debug:

Если еще нет такого расширения — рекомендую поставить. Удобно для отслеживания отправки событий в Google Analytics.

Это конечно круто, но как это применить к моему сайту?

Весь перечисленный выше алгоритм и примененные шаблоны кода можно применить к большинству сайтов, где есть корзина в табличном виде (это почти все интернет-магазины). Однако алгоритм по минимуму, но придется подстраивать под ситуацию. Например естественно селекторы будут уникальны для разных сайтов, а набор children, чтобы найти name или price может быть другим.

Еще например встречались мне таблицы, где содержались не только товары, но и куски заголовков:

Тут сразу стало понятно, что в списке товаров самый первый элемент и последний были лишними, потому условие в цикле перечисления товаров был другим. Было исходно так:

for (var i = 0; i < list. length; i++)

На этой сайте сделано так:

for (var i = 1; i < list. length — 1; i++)

То есть цикл начинался не с первого элемента, а со следующего (i = 1, а не 0) и последний элемент не обрабатывался (list. length — 1, длина на 1 меньше).

На другом сайте товары были вообще через один:

Потому элементы нужно было брать с пропуском. И условие цикла было таким:

for (var i = 0; i < list. length; i =+ 2)

где каждый цикл, к i прибавлялось не 1, а 2 (i =+ 2)Следовательно и на вашем сайте возможно придется изменить шаблон в зависимости от условий.

Если ваш сайт сделан в конструкторе Tilda, то вот шаблон ecommerce:

Актуальные тренды ecommerce дизайна

Помните — у вас не будет второго шанса оставить первое впечатление. Отходите от стандартных дизайнерских шаблонов и не бойтесь экспериментировать.

В ecommerce дизайне выделим несколько основных рекомендаций:

  • нужна четкая подача информации, посетитель должен сразу понять кто вы, что делаете и что он может получить здесь;
  • дизайн не должен быть статичным, динамичные элементы “оживляют” главную страницу и позволяют рассказать больше о себе;
  • обязательно подумайте о СТА (call-to-action), дизайн должен плавно подводить посетителя к совершению целевого действия. В случае с ecommerce — к оформлению заказа;
  • мобильный сегмент интернета постоянно растет, поэтому дизайн должен учитывать, что значительная часть посетителей будет заходить сюда со смартфонов. Дизайн изначально разрабатывается под разные устройства;
  • нужен диалог с посетителем. После входа на сайт у человека должно возникнуть ощущение, что вы обращаетесь к нему лично, знаете о том, что ему нужно и готовы предложить это. Отходите от излишней сухости и официоза;
  • уделяйте внимание визуальной составляющей.

На сайте awwwards. com регулярно отмечают лучшие по различным критериям сайты. Есть подобный ТОП и для ecommerce сайтов. Жюри оценивает:

  • дизайн в целом;
  • юзабилити;
  • уровень креатива;
  • насколько качественный контент публикуется.

По итогам оценки выдаются различные оценки, например, Honorable Mention — оценка жюри и авторитетных пользователей ресурса не опускалась ниже 6,5, Site of the Day — выдается интернет-ресурсам с максимальными оценками за день. Лучшие из лучших в итоге борются за звание сайта года.

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

Carineroitfeld. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Голландский проект, сайт посвящен духам, созданным Карин Ройтфельд. В 2019 г. вышла новая коллекция ароматов под названием 7 Lovers — именно эту надпись видим на главной странице.

В оформлении используются динамические элементы. Выбрана черно-белая цветовая гамма, только флаконы духов показаны в цвете. Текстового описания минимум — краткая характеристика каждого флакона и кнопка “Add to cart”.

Getwelly. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Проект основан в Миннеаполисе (США), в 2017 г. Эрик Райан и Даг Стакенборг объединили усилия и предложили всем желающим самостоятельно подобрать состав личной аптечки первой помощи. Туда можно включить повязки, простейшие инструменты.

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

Google Stadia

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Корпорация Google в дополнительном представлении не нуждается. Жюри awwwards. com выделило страницу в их магазине, посвященную новому проекту в сфере облачного гейминга.

Выделим четкую подачу информации — никакой воды, только конкретика. Даже человек, ранее не слышавший об облачном гейминге, за 20-30 секунд поймет концепцию Google Stadia. К такой информативности следует стремиться. Есть и динамические элементы — все красочно, понятно, эффектно смотрится.

Google Pixel 3a

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Еще один продукт от американской корпорации Google. Страница в магазине посвящена запуску новой модели смартфона.

Отметим информативность, использование анимации на странице. Интересно реализован скроллинг — сочетается вертикальный и горизонтальный скроллинг, выглядит эффектно. Отлично проработана мобильная версия.

Adidas Futurecraft

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Немецкий концерн, занимающийся производством спортивной одежды, обуви и инвентаря, обратил внимание на экологические проблемы. Запущена серия, полностью изготовленная из перерабатываемых на 100% материалов. Этот интернет-ресурс посвящен этой линейке в продукции Adidas.

Из интересных решений в оформлении сайта выделим: интерактивность, “бесконечный скролл”, 3D — показывается трехмерная модель обуви. Упор сделан на визуальную составляющую, текста минимум — только основная информация по новой линейке.

Closer. game

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Проект основан американской дизайнерской студией Lateral. Сайт описывает новую карточную игру и через него же можно купить соответствующие карты. Игра рассчитана на несколько человек — это не соревнование, а просто способ приятно провести время с друзьями и близкими.

В оформлении привлекают горизонтальный и вертикальный скролл, интерактивность — происходящее на сайте зависит от действий посетителя. Отметим узнаваемый дизайн и удачно подобранную цветовую схему. С информативностью проблем нет.

Natureelixir. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Еще одна американская компания, предлагает средства для ухода за поврежденными волосами. Основатель, Морис, занимает пост СЕО и компания Natural elixir стала делом его жизни.

При оформлении дизайна исходили из того, что визуальная составляющая имеет решающее значение. Использованы мягкие цвета, полутона, резкие переходы отсутствуют. Плавно изменяющийся фон на главной странице. Разработчики добавили приятную мелодию — она автоматически играет при входе на сайт.

Thisissleep

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан британской компанией Loaf, принадлежит бренд Чарли Маршаллу. На сайте предлагают ответить на ряд вопросов о своем сне и получить рекомендации по его улучшению. Здесь же продают подушки, одеяла, матрасы и прочие товары для здорового сна.

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

Jorik. askphill. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан Ask Phill — голландской студией, специализирующейся на создании интернет-площадок для новых европейских брендов. Этот ресурс создавался для нового бренда голландского музыканта и актера Йорика Шолтена (известен под псевдонимом Lil’ Kleine). На сайте продают одежду с оригинальными принтами.

Веб-ресурс интерактивен, используется оригинальный пиксельный шрифт. Интересно организовано описание товаров — при наведении курсора текст проявляется из бессмысленного набора символов.

Wonhundred. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Won Hundred — датская компания, работает в сфере моды с 2004 г. Сайт создан для продаж мужской и женской одежды.

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

Hinderer-wolff

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Интернет-ресурс создавался силами парижского агентства Adelios. Сайт посвящен новому бренду эльзасских вин, он одновременно выполняет и роль презентации, и роль торговой площадки. Здесь можно заказать 4 типа вин.

Великолепно проработана визуальная составляющая. Высокодетализированный 3D фон, при перемещении между разделами сайта он полностью меняется. Жюри awwwards. com также отметило техническую составляющую и проработанный дизайн мобильной версии.

Getobachan. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Через этот японский интернет-магазин продаются привычные в быту предметы, созданные в японском стиле. Запущен в 2017 г.

Создатели обещают буквально “принести Дзен в каждый дом” и в этом же стиле выполнено оформление сайта. Нет резких цветовых переходов и кричащих цветов, скролл очень плавный, лаконичное (но исчерпывающее) описание товаров. Дизайн сразу задает нужный настрой.

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Американский сайт, посвящен творчеству Джордана Соуэрса. Интернет-ресурс выполняет роль интернет-магазина, через него можно заказать понравившуюся картину и познакомиться поближе с творчеством американского художника.

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

Store. google. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Google Store — магазин, принадлежащий всемирно известной корпорации Google. В нем продаются товары либо произведенные самой Google, либо в кооперации к ней. Жюри awwwards. com включило в перечень лучших с точки зрения ecommerce дизайна обновленную версию этого магазина.

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

66nord. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Французский проект, работает с 2003 г. Команда опытных специалистов организовывает экспедиции на крайний Север. Через сайт можно заказать такую поездку и ознакомиться с уже организованными турами.

Удачное решение в оформлении — использование крупных изображений, связанных с экспедициями. Также в дизайне отметим анимированные элементы, взаимодействие с пользователем и информативность.

My360mirror. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан болгарским дизайнером Стеллой Петковой для американской Synergy Products. Веб-ресурс создан для демонстрации новых технологий в области оборудования для ванных комнат. Здесь же можно заказать новые решения.

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

Whitetailgin. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Английский проект, сайт — принадлежит шотландской компании, занимающейся изготовлением алкогольных напитков. Базируется она на острове Малл, его символов является белохвостый орел, отсюда и название.

Жюри отдельно отметило то, что сайт сделан на WordPress. Все элементы выдержаны в одном стиле, чужеродных элементов нет. Анимации немного, но сторителлинг от этого не страдает, использование подходящих изображений на заднем плане настраивает посетителя на нужный лад.

Seaharvest. net

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Sea Harvest — семейный австралийский бизнес, сайт принадлежит этой компании. Это классический интернет-магазин, через него продают морепродукты по выгодным ценам.

Сайт создан на WordPress, при создании выбран ретро стиль. Веб-ресурс внешне напоминает выпуск старой газеты, смотрится стильно и привлекает внимание.

Studio-job. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Голландский проект, Studio Job — коллектив дизайнеров, называющих себя пионерами современного прикладного искусства. В связке работают дизайнеры, специалисты в области искусства и современных технологий. Сайт — своего рода портфолио, через него можно связаться с командой и заказать их услуги.

Из оригинальных дизайнерских решений выделим красочность, использование оригинальных шрифтов, удобную навигацию. За креативность жюри Awwwards поставило максимальный балл.

Maradji. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

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

Неплохо реализованы микровзаимодействия посетителя с элементами сайта, отметим фотографии высокого качества и цветовое оформление веб-ресурса. Анимации мало, но на качестве это не сказывается.

Hopdeco

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Hop Deco — канадская дизайнерская студия, занимаются в основном дизайном интерьера. Через сайт можно познакомиться с дизайнерами и их работами поближе, а после этого — заказать услуги подбора дизайна комнаты.

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

Kopke1638. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан для самого старого винного дома Португалии, одного из мировых лидеров в производстве портвейна. Веб-ресурс — не только интернет магазин, но и настоящий путеводитель по истории компании и ее продукции.

Читать также:  Why Ghost Commerce is the Next Big Thing in E-commerce

Отметим обилие уместной анимации, приятное звуковое сопровождение, интерактивность. Сторителлинг здесь на высшем уровне.

Seedlipdrinks. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан для компании из Великобритании, специализирующейся на создании безалкогольных напитков. Seedlip говорит, что создает напитки для тех кто “хочет пить, но не пьет алкоголь”. Частично используются рецепты из труда 1651 г. “Искусство дистилляции”. Есть здесь и раздел с интернет-магазином.

Выделим минималистичный стиль, качественные анимации и видеоролики. На высоком уровне реализована навигация.

Bang-olufsen. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт создан для датской компании, занимающейся производством видео-, аудиосистем премиум класса. В Awwwards выделили страницу, созданную для новой линейки “бронзовых” устройств.

Сохранился узнаваемый стиль, при скроллинге страницы автоматически меняется размер изображений. Цветовая гамма соответствует “бронзовому” направлению.

Femmeandfierce

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Это голландский интернет-магазин, создан силами дизайн-студии Wonderland. Все стандартно — товары разделены на категории, есть корзина, пользователь выбирает одежду, обувь, оплачивает заказ и ждет посылку.

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

Wonderlandams. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Wonderland — голландская дизайн-студия, сайт создан ее силами для рекламы и продвижения своих услуг. Занимаются созданием сайтов и обещают индивидуальный подход к клиентам.

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

Alafut

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт принадлежит канадской компании, занимающейся пивоварением, создавался агентством Stereo. Это крафтовое пиво, повсеместно не продается, через сайт можно его заказать и больше узнать о продукте. Здесь же можно ознакомиться с меню ресторанов, в которых подается это пиво.

Эксперты awwwards. com высоко оценили юзабилити и дизайн в целом. Есть анимация, красочные фото на заднем плане, горизонтальный и вертикальный скроллинг. Отметим и информативность.

ETQ-Amsterdam. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

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

В первую очередь дизайн выделяется простотой и спокойной цветовой гаммой. Анимации мало, но сайт все равно смотрится современно.

Swallowtailtea. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Бренд Swallowtailtea разработан американской компанией Red Rooster Coffee Roaster в ответ на повышенный спрос на качественный чай со стороны кафе и ресторанов. Сайт посвящен этой новинке.

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

Arche68. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт принадлежит французской компании, занимающейся производством обуви, одежды, женских сумочек и аксессуаров. Бренд основан в 1968 г. , сайт запущен к 50-летнему юбилею. На сайте можно заказать понравившуюся вещь, обсудить ее кастомизацию.

Дизайн необычный, отметим необычную навигацию в главном меню и обилие анимации. Выглядит стильно и гарантированно запоминается.

Charles-simon. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Через этот сайт продаются чемоданы и сумки ручной работы, изготовленные Чарльзом Симоном. Дизайн разрабатывала студия Phoenix.

Чарльз Симон изготавливает простые, но стильные вещи, тот же принцип дизайнеры исповедовали и при создании интернет-ресурса. Из удачных решений отметим “вертикальное меню”, анимацию и подходящую палитру цветов.

Cowboy. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Американский интернет-магазин, посвящен электровелосипедам. Это и своего рода презентация новинок, и классическая торговая площадка, через нее можно заказать подходящий велосипед.

Сайт современный и высокотехнологичный. В дизайне использована анимация, 3D элементы, качественные фото на заднем плане, яркий цвет шрифта и крупные надписи.

Mowellens. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Канадский сайт, существует с 2016 г. , через него продаются различные препараты на основе каннабиса. Это не лекарства, а скорее средства для нормализации эмоционального фона и снятия стресса. Ограничений по поставкам в разные страны мира нет.

В дизайне выделим нестандартную навигацию, плавную анимацию, горизонтальный скролл. Удачно подобрана цветовая гамма — спокойные цвета задают нужный настрой.

Keus-store. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Этот французский интернет-магазин посвящен продажам рюкзаков. Сайт новый, работать начал в 2018 г.

Здесь в глаза бросается хорошо реализованный горизонтальный скролл и в целом удобная навигация по сайту. Есть анимированные элементы, подача информации организована хорошо, все важное находится на виду. Сторителлинг на высоте.

Thecoolclub

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

The cool club — голландский интернет-магазин, являющийся по сути компанией единомышленников, увлеченных созданием карточных игр. Помимо необычных колод здесь можно заказать постеры и прочую печатную продукцию

Дизайн создавался с тем, чтобы подчеркнуть уровень креатива команды. Используется анимация, есть звуковой фон в некоторых разделах сайта. Сознательно выбран не слишком серьезный стиль оформления.

Jacquemus. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Это официальный сайт одноименного французского бренда. Сочетает в себе функции обычного интернет-магазина и путеводителя в мире моды.

Выделим информативные фото, оформление сайта в светлых тонах, удобная навигация. Есть видеовставки.

Gettyendlessstories. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Бразильский сайт, посвящен “бою столетия” между Мохаммедом Али и Джо Фрейзером. Здесь ничего не продают, сайт скорее информационного характера, создан с помощью фото с Getty Images.

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

Myfood

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

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

В оформлении сайта выделим обилие фотоматериалов, видео, информативные фото теплиц. Есть анимация, навигация по сайту проста и удобна.

Notanotherbill. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Это британский интернет-магазин, в нем продаются подарки на любой вкус. Есть подарочные наборы, украшения, предметы быта и прочие типы подарков.

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

Ceremonycoffee. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Американский сайт, создан дизайн студией Drexler. Компания Ceremony Coffee основана в 2002 г. и занимается только кофе, предлагая классические и экзотические рецепты. Есть на сайте и обычный интернет-магазин, через него можно заказать различные варианты любимого напитка.

В оформлении предпочтение отдали минималистичному дизайну. Есть анимация, интерактивные элементы, а наибольший балл жюри awwwards. com поставили за адаптацию сайта под мобильные устройства.

Nomos-glashuette. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Nomos Glashütte — немецкий бренд, компания занимается производством механических часов. В этом году исполняется 20 лет с даты регистрации домена. Через сайт можно познакомиться с компанией поближе и ознакомиться с моделями часов.

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

Contiducco

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Итальянский проект, сайт принадлежит Conti Ducco — одной из лучших виноделен Франчакорты. Здесь есть интернет-магазин с каталогом вин, большое внимание уделяется сторителлингу, можно больше узнать о винодельне и ее продукции.

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

Franshalsmuseam. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Сайт сделан по заказу голландского музея имени Франса Халса. Сайт подробнее рассказывает о самом музее, есть календарь запланированных на ближайшее будущее мероприятий, здесь же можно купить билеты онлайн.

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

P448shoes. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

P448 — итальянский бренд, компания занимается дизайном и производством мужской и женской обуви. Через одноименный сайт продается их продукция.

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

Huru. rocks

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Один из немногих украинских проектов, попавших в ТОП по версии Awwwards. Через сайт продают удобные и функциональные рюкзаки.

Дизайн достаточно прост, из примененных приемов отметим использование анимации, обилия информативных фото (хотя пока что продаются только 2 модели рюкзаков), есть на сайте и видео.

Crypton. trading

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

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

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

Everyday-needs. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Это новозеландский интернет-магазин, в нем продают предметы, которые каждый из нас привык использовать в быту. Это кофемолки, тканые подставки под посуду, сервировочные предметы, чашки, бокалы и прочее. Некоторые из них не выделяются на фоне других магазинов, другие — эксклюзивные вещи.

Жюри awwwards. com выделило в первую очередь подход к подаче информации, цветовую гамму, информативность сайта. Наибольшую оценку поставили именно за дизайн.

Webflow. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Webflow — американская платформа для построения собственного коммерческого сайта. Как обещает команда Webflow — не понадобится писать ни единой строчки кода для создания полноценного сайта.

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

Mrleight. com

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Еще один американский проект, братья Гарретт и Ларри Лейты создали бренд и стали заниматься выпуском солнцезащитных и обычных очков. Сайт разработан для продвижения новой линейки очков женских и мужских очков. Здесь же есть список магазинов, где они есть в продаже.

Дизайн довольно красочный, основной упор сделан на фото, используется анимация и интерактивные элементы.

Shopskin

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Английский проект, через него продвигаются различные средства по уходу за кожей. Это средства по уходу, борьбы со старением, излишней сухостью и прочими косметологическими проблемами. Через магазин можно заказать любое средство с доставкой.

Отметим удобную навигацию и хорошо продуманную структуру сайта, все товары разнесены по соответствующим категориям, затруднений при выборе не возникает. Удачным оказался выбор крупных качественных изображений и общая цветовая гамма.

История появления

Основоположники e-commerce — системы для автоматизации и управления бизнес-процессами. Одной из таких была система SABRE, созданная в 1960-х г. американскими компаниями American Airlines и IBM. Технология использовалась для автоматизации бронирования авиарейсов. Так, за счет оптимизации процесса резервирования мест, снизилась стоимость авиабилетов и увеличился пассажиропоток.

Первыми, кому удалось осуществить продажу через компьютерную сеть, были студенты Массачусетского технологического института (МТИ). В 1971 году ученикам МТИ удалось наладить поставку психоактивных средств студентам Стэнфордского университета через вычислительную сеть ARPANET, разработанную для Минобороны США.

Развитие электронной коммерции в мире

В 1979 году английский изобретатель Майкл Алдрик продемонстрировал всему миру программу Videotex для осуществления онлайн-покупок. Он создал новую модель для коммуникации с клиентами, объединив в единую систему телевизор и телефонную линию.

В 1981 году была создана система онлайн-торговли B2B. На следующий год французская компания France Télécom разработала программу Minitel для заказов в онлайн-режиме на основе программного обеспечения Videotex.

Расцвет электронной коммерции пришелся на 1990-е г. прошлого столетия. В 1995 году были созданы крупнейшие платформы электронной торговли Amazon и eBay (тогда еще AuctionWeb). А уже в 1999 — Alibaba Group.

Спустя 5 лет на рынке появляется новая платформа DHgate для транзакций b2b. Сервис сыграл значимую роль в развитии b2b-площадок. Благодаря китайской компании, другие торговые платформы для поиска партнеров по бизнесу начали уходить от модели «желтых страниц».

В 2012 году продажи электронной коммерции достигли $ 1 трлн, а количество интернет-площадок составило 32,5 тыс. В 2017 объем розничных продаж составлял уже $ 2,304 трлн, что на 230% больше, чем 5 лет назад.

С появлением мобильных устройств рынок e-commerce вырос более чем на 25%. Множество компаний по всему миру стали инвестировать в мобильные приложения.

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

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Прогноз продаж электронной торговли за период 2020-2023 гг.

По прогнозам экспертов, к 2023 году товарооборот электронной коммерции превысит $6,5 трлн. Стоит отметить, что каждый пятый доллар (22%) будет потрачен на покупки в глобальной сети.

Тренды электронной торговли в 2022 году

Рассмотрим популярные тренды, актуальные на сегодня.

Компании Oberlo, сотрудничающая с платформами Shopify и AliExpress, прогнозирует стремительный скачок онлайн-продаж к 2024 году. По данным специалистов, оборот электронной коммерции в мире составит 6,4 триллиона долларов.

Модель бизнеса D2C (Direct-To-Consumer) позволяет компаниям поставлять потребителям товары без посредников и дилеров. Владельцы бизнесов поняли, что значительная часть от всей выручки идет посредникам, потому предприниматели все больше предпочитают общаться с потребителями напрямую, устанавливая с ними долгосрочные отношения.

Читать также:  Словарь маркетолога. Что такое B2B, B2C и B2G

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

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

По прогнозам Oberlo, в ближайшее время ожидается рост электронной торговли во всем мире. Одна из главных причин — увеличение использования гаджетов. С мобильных устройств пользователи просматривают отзывы и изучают товары. Как правило, клиенты совершают покупки со стационарных устройств, поэтому важно, чтобы сайт был оптимизирован под смартфоны.

Тренд на бесшовную коммуникацию с потребителем по нескольким рекламным каналам существует уже давно. По-прежнему считается эффективным способом взаимодействия с клиентами.

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

Виды e-commerce

Электронной коммерции можно разделить на 7 групп в зависимости от целевой аудитории, с которой взаимодействует компания.

Наиболее распространенный вид онлайн-предпринимательства. Ниша «Бизнес для потребителя» — коммерческие отношения между компанией и клиентом через интернет-площадки. Онлайн-магазины торгуют товарами или оказывают услуги напрямую (без розницы).

Сфера «Бизнес для бизнеса» предполагает торговлю товарами и услугами между компаниями. Производители заключают сделки между собой на продажу, покупку или обмен продуктов.

Кстати, можно интегрировать web-платформу клиента с нашим сервисом голосовых рассылок Zvonobot для автоматизации процесса оповещения пользователей на сайте

И первые 20 звонков — за наш счет! 🙂

B2G — экономические отношения между бизнесом и правительством, осуществляемые на основе конкурсов, тендеров и котировок. Такая система характеризуется высокими требованиями, предъявляемые к исполнителям и крупными размерами сделок.

Такая схема подразумевает осуществление коммерческой деятельности между физическими лицами. Отличный пример сегмента «Потребитель для Потребителя» — интернет-сервисы для размещения рекламных объявлений.

G2C-сегмент «Государство для граждан» отвечает за обеспечения доступа к государственной информации через web-порталы. С помощью таких сервисов можно оплачивать налоги, коммунальные услуги или, например, штрафы за нарушения ПДД.

Схема C2B подразумевает совершение торговых сделок онлайн между потребителями и бизнесом. В такой экономической модели клиенты сами устанавливают стоимость продукта, а производитель соглашается на сделку или отказывается от нее.

G2G — интересный вид электронной коммерции. Под которым понимаются деловые отношения государственных органов между собой, а именно: поставка продукции, оказание услуг и осуществление других внутригосударственных процессов.

Ниша «Бизнес для партнеров» предполагает взаимодействие компаний с филиалами, партнерами сторонних организаций и совместными предприятиями.

Это взаимоотношения между компанией и сотрудниками (наемными рабочими) для решения корпоративных задач. К примеру, бизнес может помочь сотрудникам с решением вопросов по страховке или сделать анонс корпоратива.

Данная экономическая модель — симбиоз двух различных видов электронной коммерции – В2В и В2С. Комбинация ниши «Бизнес для бизнеса» и ниши «Бизнес для клиента» является эффективным примером взаимодействия.

Например, компания, закупающая товары в Китае, осуществляет сделку со складами Карго на отправку заказов по адресам покупателей. Образуется цепочка вида: компания-продавец (В2В) – склад (В2В) – покупатель (В2С).

E2E — это объединение двух и более интернет-бирж для осуществления экономической деятельности между собой. Сервис обмена электронной валюты — отличный пример бизнес-модели «Биржа для биржи».

Не будучи программистом, опишите, как электронная коммерция работает с изображениями

Как работает электронная коммерция, этапы

Изучим классическую воронку продаж, которая применяется в электронной торговле. Путь клиента от первого контакта с компанией до покупки состоит из 7 этапов, а именно:

  • Представление товаров на онлайн-площадке.
  • Привлечение целевой аудитории на портал.
  • Взращивание потенциальных покупателей.
  • Обработка заявок.
  • Оплата заказа.
  • Доставка товаров (возможен возврат).
  • Обслуживание всех предыдущих этапов.

Например, cервис массового автообзвона Zvonobot может взять на себя большинство рутинных задач. С помощью голосового робота можно сделать простую автоматическую рассылку сообщений или поставить его на прием звонков первой линии колл-центра.

Этап 1. Презентация товаров или услуг на интернет-платформе

Есть несколько простых способов для создания площадки для презентации своего продукта. Рассмотрим наиболее популярные из них.

  • Создание лендингов или многостраничных сайтов через специальные программы для разработки web-страниц. Наиболее известные сервисы — Tilda и WordPress.
  • Ведение группы или странички в соцсетях. Сегодня существует несколько социальных сетей для эффективного продвижения своих услуг, например, ВКонтакте и Одноклассники. Более чем у 3 млн россиян социальная коммерция является существенным источником дохода!
  • Торговые онлайн-площадки. Не стоит забывать и про сервисы для размещения рекламных объявлений, например, площадки Авито или Юла. Они пользуются большой популярностью у предпринимателей и бизнесменов.

Важно понимать, что выбор платформы зависит от размера фирмы и специфики работы. Небольшим предприятиям или стартапам лучше начинать с социальных сетей. Однако для крупных компаний с широким ассортиментом товаров рекомендуется создать собственный сайт.

Если у вас агентство недвижимости, то подойдут базы объявлений об аренде, продаже и покупке квартир. Интернет-площадки Авито и Циан идеально подходят для решения таких задач.

Этап 2. Привлечение целевой аудитории на платформу

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

  • Группа или странички в VK и ОК. Алгоритмы большинства социальных сетей построены таким образом, что постоянный и уникальный контент хорошо ранжируется в пределах самой платформы. Поэтому если вы выбрали продвижения своего продукта через соцсети, то вас стоит обратить внимание на качество контента и количество публикаций.
  • Базы объявлений. На большинстве онлайн-площадок есть платное продвижение, позволяющее быстрее попасть в рекомендации или подборки. Кроме того, внимательно стоит относиться к правилам сервиса, в противном же случае руководство платформы оставляет за собой право не размещать объявление на сайте.

Этап 3. Взращивание потенциальных клиентов

Немаловажным процессом в воронке продаж является взаимодействие с лидами. Чтобы клиент перешел на следующую ступень, нужно подогреть его интерес. Разберем основные способы, которые мотивируют клиента к совершению сделки.

  • Используйте на сайте чат-бот, который избавит вас от ненужных сложностей и проблем: поможет разгрузить 1-ую линию техподдержки, увеличить конверсию продаж, а также собирать сведения пользователей.
  • В социальных сетях можно выкладывать посты с образовательным, информационным и развлекательным контентом. Подогревайте желания клиентов с помощью промокодов или краткосрочных акций.
  • Если вы работаете с онлайн-площадками, то в описании объявления важно донести ценность до покупателей (объяснить потенциальным покупателям, почему им стоит купить товар именно у вас).

Этап 4. Обработка заявок

Здесь заинтересованные клиенты оформляют заказ.

  • На сайте этот процесс выглядит следующим образом: покупатели добавляют нужные товары в корзину и переходят к оформлению заказа.
  • В соцсетях алгоритм оформления заказа отличается от интернет-магазина. Как правило, клиенты пишут в личные сообщения и менеджер принимает заявки.
  • Доски объявлений. Здесь пользователь может уточнить всю необходимую информацию у продавца и договориться о сделке.

Этап 5. Оплата заказа

Проведение платежа — один из самых важных этапов воронки продаж. Здесь нужно сделать все максимально быстро и удобно, чтобы пользователю осталось лишь ввести данные банковской карточки. Наладьте интеграцию с несколькими платежными системами (PayPal, Visa, GooglePay, Yandex Деньги, WebMoney).

Этап 6. Доставка и возврат средств

После оплаты заказа следует доставка товар до потребителя в указанные сроки. Для этой задачи подойдут популярные сервисы экспресс-доставки (Boxberry, CDEK, FedE). В случае, когда продукт не подошел или испорчен, нужно действовать в соответствии с предписанными правилами возврата.

Этап 7. Обслуживание всех предыдущих этапов

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

Составляющие электронной коммерции

Логистика

Выполнение заказов — неотъемлемый процесс, без которого не существуют интернет-магазины. Чтобы выделяться на фоне конкурентов, компании, работающие в сфере электронной коммерции, должны позаботиться над поиском лучших способов доставки товаров.

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

Преимущества и недостатки электронной коммерции

  • Снижение уровня затрат. В отличие от оффлайн-магазина для открытия web-площадки не требуется аренда помещения и найм целой команды сотрудников.
  • Увеличение целевой аудитории. В глобальной сети существует множество инструментов для привлечения клиентов на сайт. Правильно разработанная рекламная кампания обеспечивает прирост заинтересованных пользователей в интернет-магазине.
  • Торговля без посредников. Одно из важнейших преимуществ электронной торговли — продажа товаров напрямую. Таким образом сокращаются расходы за счет уменьшения числа посредников.
  • Удобная коммуникация. Если клиент хочет проконсультироваться с менеджером по товару, пользователь может написать личное сообщение на страничке компании в соцсетях или в онлайн-чате на сайте.
  • Глубокая аналитика. Для повышения эффективности маркетинговых кампаний можно использовать сервисы для аналитики сайтов (Google Analytics, Yandex Аналитика и другие источники данных) или коммерческих страничек в соцсетях (Sociate, Antidogs).
  • Онлайн-коммуникация. Все общение с клиентом происходит в глобальной сети. Безусловно, в интернете есть множество удобных программ для связи с пользователями, но это не заменяет «живого» общения. К примеру, клиент собирается приобрести смартфон через интернет-магазин. Он может узнать нюансы у менеджера, но нет возможности лично попросить продавца объяснить особенности выбранной модели.
  • Не такое яркое впечатление от покупки. Приобретение долгожданного товара — волнующий момент, который может запомниться на всю жизнь. Если клиент покупает продукт через интернет, то потребуется определенное время, чтобы товар можно было забрать. Длительное время доставки уменьшает степень удовольствия от новой покупки.
  • Невозможность проверить товар. С этой проблемой сталкиваются множество бизнесов. Некоторые товары достаточно сложно выбирать через сервисы онлайн-шопинга. Можно далеко не ходить за примером — покупка одежды и обуви. У клиентов возникают сложности, связанные с определением размера одежды и проверкой качества материала.

Примеры электронной коммерции

Сфера e-commerce глобально подразделяется две категории: интернет-банкинг для осуществления транзакций в сети и интернет-маркетинг для рекламы компании. Сейчас мы рассмотрим несколько интересных примеров использования Е-коммерции в разных нишах бизнеса.

Ранее мы уже рассказывали про гигантов e-commerce Amazon и eBay, которые известны большинству людей, как универсальные платформы с огромным ассортиментом товаров. Однако площадки имеют разную специфику. Например, на eBay можно найти как новую продукцию, так и антиквариат. В свою очередь, Amazon специализируется только на продаже новинок.

В настоящее время практически любой бизнес имеет свой сайт или страничку в соцсетях. Если дело касается ниши интернет-магазинов, то здесь можно найти неимоверное количество товаров различных категорий: от продажи декоративных изделий вплоть до недвижимости.

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

Стриминговые сервисы — это платформы, обеспечивающие потоковое вещание различных событий в режиме реального времени. Платформы предоставляют пользователям контент на любой вкус и цвет: кино, трансляции матчей, концерты любимых исполнителей и еще многое другое.

Самая нашумевшая видеостриминговая платформа — Twitch. Интерактивный сервис позволяет пользователям смотреть видео игрового процесса в онлайн-режиме.

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

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

Сайты поиска работы

Сервис HeadHunter является самой популярной платформой на территории РФ для поиска работы и подбора персонала. На сайте HH. ru пользователи могут создавать резюме, отслеживать новые вакансии или проводить карьерные консультации с ведущими специалистами разных областей деятельности.

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

Одна из таких Art Online 24. На сайте можно найти работы современного и классического искусства. Компания основана в 2015 году российской топ-моделью, актрисой и телеведущей Полина Аскери.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *