Под электронной коммерцией (e-commerce) понимается коммерческая деятельность, связанная с распространением, рекламой, продвижением, а также продажей услуг и товаров через интернет.
В этом материале мы рассмотрим виды электронной коммерции, плюсы и минусы этого вида бизнеса и принципы его работы.
В чем отличия электронной и мобильной коммерции и так ли важно их различать? О последних тенденциях m-commerce и о том, как сделать мобильное приложение мощным инструментом продаж, читайте в нашей статье.
На заре своего возникновения понятие e-commerce было достаточно широким и означало использование любых устройств для совершения онлайн-покупок.
Однако за последние годы число продаж именно через мобильные устройства возросло настолько, что появилось новое определение: мобильная коммерция (м-коммерция, m-commerce).
Электронная коммерция или, как ее называют, e-commerce – разновидность бизнеса, связанная с продажей товаров и услуг посредством Интернета. Все действия, которые направлены на получение заработка в Интернете, по существу, можно отнести к e-commerce.
Сам термин зародился еще в США, где и была совершена первая онлайн-продажа – 11 августа 1994 года с помощью зашифрованной транзакции был продан диск Ten Summoner’s Tales Стинга. С тех самых пор, несмотря на многочисленные трудности, сфера становилась все более популярной, а пандемия только подтолкнула ее к пику развития.
Настройка электронной торговли (ecommerce) практически всегда требует персонального подхода к сайту, а также разработчика, который всё настроит. Как сделать все самому, без помощи программиста, используя лишь Google Tag Manager и несколько готовых скриптов?
Привет, я Александр Зарайский — спикер курса «Весь контекст за 4 месяца». На курсе мы много обсуждаем как контекст вообще, так и аналитику в частности. Сегодня я хотел бы по шагам показать, как настроить отправку данных ecommerce с сайта интернет-магазина, не имея глубоких познаний разработчика.
Кроме того, разберем простыми словами что такое пресловутый datalayer, пользовательские события, как делать простую проверку отправки формы и еще пару приятных инструментов в интерфейсе GTM.
Руководство ориентировано на пользователей, которые уже работали с GTM и понимают, что такое события в Google Analytics и как настроить их отправку в GTM. Если вы только начали изучать, то рекомендую сначала ознакомится с моими прошлыми статьями о GTM:
Категории электронной коммерции.
Электронную
коммерцию принято делить на следующие
категории:
Принцип осуществления
подобного взаимодействия очень прост:
предприятие торгует с другим предприятием. B2B — одно из наиболее перспективных и
активно развивающихся направлений
электронной коммерции на сегодняшний
день. Интернет-платформы дают возможность
значительно упростить проведение
операций на всех этапах, сделать торговлю
более оперативной и прозрачной. Часто,
в таких случаях представитель стороны
заказчика имеет возможность интерактивного
контроля процесса выполнения заказа
путем работы с базами данных продавца. Пример сделки B2B — продажа шаблонов для
сайта компаниям для последующего
использования в качестве основы дизайна
собственного веб-ресурса компании. Безусловно, сюда относятся любые
взаимодействия, включающие в себя
оптовые поставки товара или аналогичное
выполнение заказов.
Данное направление
включает в себя все уровни взаимодействия
между компаниями. При этом могут
использоваться специальные технологии
и стандарты электронного обмена данными,
например такие, как EDI. Выгоды от подобного
сотрудничества трудно переоценить. Например, дилер получает возможность
самостоятельно размещать заказы и
следить за ходом их исполнения, работая
с базами данных поставщика. Также и
поставщик, имея подключение к складским
базам, может оперативно отслеживать
запасы партнера и тем самым своевременно
их пополнять. Подобные примеры можно
найти в любой сфере взаимодействия
между компаниями.
Основу этого
направления составляет электронная
розничная торговля. В Интернете сегодня
представлено большое число электронных
магазинов, предлагающих широкий спектр
товаров и услуг конечным потребителям.
В этом случае
предприятие торгует уже напрямую с
клиентом (не юридическим, а физическим
лицом). Как правило, здесь речь идет о
розничной реализации товаров. Клиенту
такой способ совершения коммерческой
операции дает возможность упростить и
ускорить процедуру покупки. Ему не
приходится идти в магазин, чтобы выбрать
нужный товар: достаточно просмотреть
характеристики на сайте поставщика,
выбрать нужную конфигурацию и заказать
продукт с доставкой. Коммерсанту же
возможности Интернета позволяют
оперативнее отслеживать спрос (помимо
экономии на помещении и кадрах).
Примеры этого вида
торговли — традиционные Интернет-магазины,
направленные на целевую группу
непосредственных потребителей товаров. В конце 2000-х начала развитие так называемая
социальная коммерция, или сфера продаж
товаров и услуг в социальных сетях.
Взаимодействие
бизнеса и администрации включает деловые
связи коммерческих структур с
государственными организациями, начиная
от местных властей и заканчивая
международными организациями. Например,
стремление правительств развитых стран
и руководства международных организаций
активно использовать Интернет для
проведения закупок товаров и услуг
посредством Интернета.
Это направление
наименее развито, однако имеет достаточно
высокий потенциал, который может быть
использован для организации взаимодействия
государственных структур и потребителей,
особенно в социальной и налоговой сфере.
Такой способ
осуществления электронной коммерции
предполагает совершение сделок между
двумя потребителями, ни один из которых
не является предпринимателем в юридическом
смысле слова. Интернет-площадки для
подобной торговли являются чем-то
средним между рынком-толкучкой и колонкой
объявлений в газете. Как правило,
коммерция по схеме С2С осуществляется
на сайтах Интернет-аукционов, приобретающих
все большую популярность в наше время. Для клиентов таких систем основное
удобство заключается в несколько более
низкой цене товара, по сравнению с его
стоимостью в магазинах.
Это направление
включает в себя возможность взаимодействия
потребителей для обмена коммерческой
информацией. Это может быть обмен опытом
приобретения того или иного товара,
обмен опытом взаимодействия с той или
иной фирмой и многое другое. К этой же
области относится и форма аукционной
торговли между физическими лицами.
Виды E-commerce
Самыми распространенными вариантами e-commerce являются B2B (Business-to-Business» – «Бизнес для Бизнеса») и B2C (Business-to-Consumer – «Бизнес для Клиента»).
Business-to-Business
B2B – это ниша бизнеса, подразумевающая заключение сделок и партнерских контрактов, продажу продуктов или услуг одного юридического лица другому. В B2B самое важное – установить взаимоотношения с теми сотрудниками и руководителями компании, которые уполномочены принимать необходимые для совместной работы решения от лица фирмы.
Для установления контактов, проведения поиска партнеров и ведения переговоров в этом секторе электронной коммерции задействуют специальные интернет-площадки, а также интерактивные базы данных. B2B сегмент отличается тем, что клиенты детально изучают информацию о товарах и услугах, которые собираются приобрести. Наиболее важными для них при этом являются преимущества над конкурентами, детали условий совместной работы и долгосрочные выгоды, которые стороны получат от сотрудничества.
Business-to-Client
Сфера «бизнеса для потребителя» – это коммерческие отношения между организациями и физическими лицами. К данному сегменту относятся розничные продажи, совершаемые с помощью различных онлайн-площадок. Инструментами B2C являются интернет-магазины, сервисы, банки, онлайн-обучение, интернет-аукционы, платные доски объявлений, а также интернет-биржи.
Онлайн-коммерция дает возможность предпринимателям сокращать расходы на содержание торговых площадей и складов. Преимуществом для клиентов является большой ассортимент товаров, а также удобство заказа с возможностью быстрой доставки на дом либо в офис.
В отличие от сегмента B2B, в сфере B2C люди ищут товары или услуги, способные удовлетворить их насущные потребности, никаких особых исследований они не проводят и принимают решение быстро – от нескольких минут до нескольких дней. B2C-компаниям имеет смысл фокусироваться не только на выгодах продукции или услуг, но и на эмоциональном вовлечении потребителя, а также ориентироваться на определенную проблему клиента, которую может решить их продукт или услуга.
Для ведения успешного бизнеса в сфере B2C необходимо проводить анализ стратегий конкурентов, изучать покупательские привычки, свойственные потенциальным клиентам, и постоянно следить за тенденциями на рынке.
Другие виды E-commerce
Кроме вышеназванных, есть и другие, более узкоспециализированные сегменты электронной коммерции.
- B2G (Business-to-Government – «Бизнес для Государства»)– это взаимоотношения между бизнесом, то есть компаниями, с одной стороны и правительством, то есть муниципальными органами и государственными инстанциями, – с другой. В качестве примера можно привести портал госзакупок Российской Федерации. Сделки в нише B2G заключаются на основе конкурсов и тендеров. Поскольку в этой сфере электронной коммерции участники имеют дело с крупными сделками, неудивительно, что требования к компаниям предъявляются весьма строгие. Юридическое лицо, участвующее в торгах, обязано иметь высокий статус и незапятнанную репутацию.
- C2C (Consumer-to-Consumer – «Клиент-Клиент») – подразумевает установление коммерческих отношений между потребителями (физлицами) через электронную систему объявлений для покупки товаров или услуг. Среди успешных интернет-площадок, работающих в этом сегменте, можно назвать платформы Avito, OLX, Ebay, Юла и т.п. К данной нише также относятся: интернет-аукционы, услуги консалтинга, барахолки, сайты для обмена товарами, репетиторские услуги, биржи фриланса и фотобанки.
- B2E (Business-to-Employee – «Бизнес для Сотрудников») – это сфера взаимодействия бизнеса с персоналом, наемными рабочими. В этой нише E-commerce используются разного рода системы автоматизации управления бизнес-процессами и корпоративными задачами для решения вопросов по страхованию сотрудников онлайн, проведению анонсов корпоративных мероприятий, оформлению запросов на необходимое оборудование и др.
- Есть еще один вариант деятельности – G2C (Government-to-Citizens – «Правительство для Граждан»), который тоже можно отнести к коммерческой нише, так как, помимо информационной поддержки граждан, в данном сегменте осуществляется обеспечение доступа к государственной информации посредством онлайн-сервисов. В качестве примера можно привести оплату штрафов и налогов, проведение регистрации проектов, а также форм коммерческой деятельности, выдачу разрешительных документов и многое другое.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Принцип работы E-commerce
Рассмотрим, как функционирует электронная коммерция, взяв в качестве примера заказ товара в интернет-магазине.
Сначала покупатель изучает онлайн-каталог на сайте магазина и выбирает продукт. Его компьютер или смартфон взаимодействует с сервером, на котором размещен магазин, через веб-браузер. Когда сервер получает заявку от покупателя, он направляет ее менеджеру в систему обработки заказов.
Менеджер, в свою очередь, отправляет запрос о наличии заказанного товара в базу данных на складе. При отсутствии товара делается запрос изготовителю и выясняется срок поставки продукции на склад. Полученная информация предоставляется клиенту. Если же товар имеется в наличие на складе, менеджер продолжит обработку заявки.
Затем происходит обращение к финансовой системе – направляется запрос на обработку оплаты от покупателя. В зависимости от того, в каком состоянии находится счет клиента (имеется ли на нем достаточное количество средств, не заблокирована ли карта), финансовая система позволяет или запрещает осуществление транзакции. Если сделка успешно производится, менеджер подтверждает оплату и направляет уведомление на сервер.
Далее сервер с помощью соответствующего сообщения информирует покупателя об успешном проведении оплаты и принятии заказа в обработку. После чего на склад будет направлена заявка, по которой сформируется заказ для отправки по указанному клиентом адресу.
Сотрудники отдела логистики производят доставку товара покупателю. После отгрузки заказа со склада сервер посылает клиенту SMS-сообщение или e-mail, уведомляя его, что товар находится в пути.
Преимущества и недостатки электронной коммерции
К плюсам e-commerce относятся:
- Упрощение бизнес-процессов во многих сферах предпринимательства и, следовательно, снижение затрат. К примеру, для открытия интернет-магазина владельцу не придется арендовать помещение, нанимать целый штат продавцов и сотрудников службы доставки. Все действия будут полностью автоматизированы. В случае если товар электронный, это упрощает доставку в разы. Как следствие, издержки предпринимателя снижаются, что положительно сказывается на цене товаров или услуг.
- Еще одним преимуществом является уменьшение числа посредников, сокращение цепочки между поставщиком товара и его клиентом. Онлайн-коммерция позволяет создать прямой канал между продавцом и потребителем, что приводит к уменьшению затрат и улучшению качества обслуживания.
- E-commerce позволяет выйти на расширенный рынок при малых финансовых затратах и вести торговлю через интернет по всему миру. Для бизнеса, связанного с физическими товарами, вопрос с доставкой можно решить за счет сотрудничества с компаниями, оказывающими транспортные услуги. А при продаже электронных товаров, таких как электронные книги или приложения, вообще не имеет значения, на каком расстоянии от продавца находится покупатель.
- В сфере e-commerce у продавца всегда есть прямая связь с потребителями, что повышает производительность и конкурентоспособность компаний. Интернет-магазины и другие онлайн-сервисы могут работать круглосуточно семь дней в неделю, не жертвуя качеством обслуживания.
В числе минусов электронной коммерции:
- Несовершенство законодательной базы и особенности налоговых систем. Для ряда сделок отсутствие правового регулирования электронной коммерции может стать препятствием для их заключения.
- Развитие коммерции в интернете возможно только в регионах, где имеется стабильный доступ к глобальной сети на высокой скорости.
- Существует риск нарушения конфиденциальности во время совершения онлайн-сделок. Для повышения безопасности компании, ведущие продажи через интернет, активно используют сертификацию, применяют авторизацию, капчи и другие способы борьбы с мошенничеством и утечкой информации.
- Также проблемы в сфере электронной коммерции составляют нарушения авторских прав, распространение пиратских копий программ, книг и т.д. Кроме того, иногда возникают сложности с возвратом некачественных физических товаров.
Торговые модели узлов межфирменной электронной коммерции
При создании ЭТП используются различные модели организации взаимодействия между продавцами и покупателями. Это могут быть модели с фиксированными ценами, типичные для продаж по каталогам, или системы динамического ценообразования, характерные для аукционной, биржевой или бартерной торговли.
Списочная или каталожная модель
концентрирует продавцов и покупателей в одном месте. Она является наилучшей для отраслей, характеризующихся сильной фрагментацией продавцов и покупателей, которые часто проводят сделки с относительно недорогими товарами. При этом не имеет смысла согласовывать цены, и они фиксируются продавцами. Каталожная модель также хорошо работает, если большинство продаж осуществляется известными поставщиками и по определенным правилам, а покупателю для выбора продавца необходимо ознакомиться с предложениями большого числа мелких поставщиков. И, наконец, эта модель хорошо работает на рынках, где спрос достаточно предсказуем, а цены меняются редко.
обеспечивает пространственное сведение продавцов и покупателей. Она хорошо работает в случаях, когда нестандартные, единственные в своем роде или скоропортящиеся товары или услуги продаются или покупаются компаниями, которые имеют различные подходы к определению стоимости товара. В эту группу попадают редкие предметы, капитальное оборудование, товары, бывшие в употреблении, складские остатки и тому подобные продукты.
обеспечивает временное согласование спроса и предложения. Такая модель требует создание механизмов согласования спроса – предложения в реальном времени, определения рыночной цены, а также процесса регистрации и проведения сделок. Эта модель является наилучшей для стандартизованной продукции, имеющей несколько легко стандартизируемых характеристик. Биржевая модель привлекательна для рынков, где спрос и цены нестабильны. Она позволяет участникам рынка управлять избытками или пиками спроса.
Зачастую, узлы межфирменной электронной торговли предлагают не один, а несколько методов торговли.
Функциональные возможности торговых площадок
В мире онлайновых торговых площадок не существует таких, которые предлагают весь набор функций, необходимых для заключения и исполнения сделок. Хотя многие модели электронной торговли предлагают широкий набор функций, ни одна из них не может поддерживать все из них в равной мере. В каждом конкретном случае наилучшим решением является выбор набора услуг (от информационного наполнения до управления цепочками поставок) и их функциональных возможностей, наиболее полно удовлетворяющих пользователей. Для различных типов площадок требования к функциональности каждой услуги заметно различаются.
Требования к функциональным возможностям торговых площадок
* – Низкая функциональность или ее отсутствие
** – Средняя функциональность
*** – Высокая функциональность
Таким образом, торговые площадки отличаются формой владения, функциональными возможностями, направленностью деятельности, выбором партнеров и преимуществами, предоставляемыми участникам.
В чем заключается суть e-commerce?
Техническая основа, на которой строится e-commerce, кажется даже проще, чем тот набор составляющих, без которых не может обойтись оффлайн-магазин. К техническому наполнению относится:
- сайт или интернет-магазин;
- база данных с товарами;
- система учета остатков запасов;
- CRM-система;
- система доставки товара покупателю и др.
Конечно, это сильно упрощенная модель, ведь каждую из этих категорий можно расписывать отдельно: однако самой важной составляющей из перечисленных будет являться хорошо работающий и грамотно построенный сервер, так как именно от него зависит скорость загрузки сайта.
Электронная коммерция, благодаря своему удобству и универсальности, реализуется во множестве ниш, в зависимости от ее целевой аудитории. Вот примеры ее успешной реализации:
- Онлайн-кинотеатры, подписки на музыку и книги. Позволяют легально наслаждаться плодами интеллектуального труда.
- Электронные доски объявлений. К ним относятся сайты типа Авито.
- Онлайн-сервисы оплаты государственных услуг. Своей популярностью обязаны экономии времени – больше не нужно стоять в очередях на оплату квартиры.
- Интернет-магазины и маркетплейсы. На них зиждется почти вся сфера e-commerce.
Какие существуют виды e-commerce?
Следующая классификация построена на разнице в целевой аудитории:
Как создать свой интернет-магазин?
Если вы собираетесь открыть интернет-магазин, стоит уделить большое количество времени его настройке – каждый его элемент от элегантной главной страницы до модуля оплаты должен быть максимально удобным для пользователя.
Едва покупатель заходит на ваш сайт, перед ним встает выбор – уйти или продолжить поиски. Если интерфейс и навигация домашней страницы не привлекают покупателей, да еще и долго грузятся, то шансов удержать покупателей становится все меньше и меньше. Однако несколько дополнений и вовремя проверенные настройки могут решить дело в вашу пользу:
- красивое оформление логотипа;
- высокая скорость загрузки сайта во всех браузерах и на всех устройствах;
- работающие ссылки на всех страницах;
- подборка самых популярных товаров;
- работающее поле поиска вверху вашего сайта;
- специальные предложения, рекламные акции, варианты бесплатной доставки;
- варианты выбора языка, если это необходимо.
О том, как увеличить конверсию интернет-магазина, подробно рассказали в одной из наших статей.
Лучшие платформы электронной коммерции
Сейчас, благодаря новой тенденции зерокодинга, начать заниматься онлайн-бизнесом может практически каждый. Зерокодинг означает то, что вам больше не нужны сложные навыки работы с кодом. Все программное обеспечение предоставляет сама платформа, на которой вы делаете онлайн-магазин.
Платформа Shopify – удобное решение для работы в сфере e-commerce, ведь на площадке можно успешно принимать оплаты со всего мира, причем практически без опыта создания сайтов. Для многих предпринимателей Шопифай действительно лучший способ начать свой путь в мире онлайн-бизнеса, так как в отличие от других конструкторов сайтов, он требует минимальных усилий и практически нулевых навыков создания веб-сайтов.
Также для его использования не нужны серьезные скиллы в программировании. Так как платформа была разработана для пользователей без продвинутых дизайнерских и технических навыков, она обладает максимально простой функциональностью.
Будущее электронной коммерции
Как и ожидалось, 2021 год не прошел незаметно для постоянно меняющегося рынка ecommerce. Все больше предпринимателей перестают использовать традиционные методы продаж, предпочитая что-то новое, чего еще нет у конкурентов, и что позволило бы выделиться в глазах покупателей, ведь от этого напрямую зависит конверсия магазина. В обиход входит все больше интересных “фишек” – одни устаревают, а другие только начинают свой расцвет.
К последним тенденциям сферы относятся:
- рост уровня популярности маркетплейсов
- ориентация на молодое поколение
- увеличение использования чат-ботов
- защита окружающей среды
- использование голосовой коммерции
- видеоконсультации из оффлайн-магазинов
- подписка на товары
- снижение сроков доставки
- платежное разнообразие
- рост расходов на привлечение клиентов
- омниканальность
- персонализация
Подробнее о каждой тенденции вы можете почитать в нашей статье. Все вышеперечисленные тренды указывают на одно – сфера e-commerce продолжает свое активное развитие. Миллионы людей наслаждаются тем, как легко совершать покупки в интернете, а доверие к онлайн-ритейлерам растет.
Платформы для покупки становятся все более удобными: добавляются новые способы оплаты и доставки, улучшаются маркетинговые стратегии, которые привлекают все больше новых клиентов. Неудивительно, что электронная коммерция переживает такой бум.
Что же дальше?
Как вы уже наверняка поняли из текста нашей статьи, электронная коммерция – один из самых перспективных и стремительно развивающихся сегментов рынка. Большое количество преимуществ перед офлайн-торговлей, а также постоянное совершенствование системы привлекают к себе внимание новых покупателей и производителей.
План настройки 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:
Немного статистики
В 2021 году количество пользователей смартфонов в мире достигло практически 4 миллиардов. Это половина всего населения Земли.
Только за 2020 год общая выручка от покупок, совершенных через мобильные устройства, составила 336,98 миллиона долларов. Это в 2,5 раза превышает показатель 2018 года.
Несомненно, причина таких изменений кроется во временном отсутствии альтернатив: пандемия коронавируса внесла свои коррективы в привычный ход жизни в целом и в способ делать покупки в частности. Из-за самоизоляции и бизнесы, и клиенты переехали в онлайн и плотно там обосновались.
Тенденции
С небывалым ростом числа мобильных приложений для ритейла выросли и запросы покупателей. Ничего удивительного в этом нет: чем выше конкуренция, тем строже требования к поставщикам услуг. Людям хочется покупать на площадках, предлагающих широкий ассортимент товаров с их подробными описаниями, быструю доставку, удобные способы оплаты — и никак иначе. К тому же, покупки хочется делать быстро, а для этого еще не придумали ничего лучше смартфона или планшета.
Это ответвление мобильной коммерции даже получило свое название: social commerce — торговля в социальных сетях. Стремительно развивающееся направление в полной мере олицетворяет оптимизацию продажи товаров и услуг.
Положение торговли в социальных сетях пока довольно шаткое: немногие пользователи начинают рассматривать социальные сети не с позиции источника контента, а с точки зрения торговой площадки.
Действительно, не всегда внедрение побочных функций идет приложениям на пользу, ведь изначально их скачивают с одной конкретной целью. Тем не менее торговля в упомянутых приложениях развивается и даже имеет своих сторонников. При этом очень маловероятно, что большинство пользователей полностью предпочтут социальные сети интернет-магазинами, и тем лучше для последних.
Ключевые различия
Такая уж большая разница между мобильной и электронной коммерцией?
Ключевое различие e- и m-commerce состоит в устройстве, которое выступает посредником между покупателем и продавцом. Все просто: если покупка совершена через компьютер или ноутбук — речь об электронной коммерции. Когда используется смартфон или планшет на iOS или Android — это m-commerce.
При этом стоит отметить, что многие интернет-магазины имеют не только мобильное приложение, но и веб-сайт — то есть представлены на разных платформах.
Из этого можно сделать вывод, что мобильная коммерция — более быстрый и современный вариант электронной коммерции. Мобильные устройства делают взаимодействие покупателя и продавца удобнее, чем когда-либо.
И действительно: владельцы бизнеса уже давно делают больший упор на мобильные приложения, стремясь привлечь пользователей именно в них: ведь именно они позволяют получать максимальную прибыль с мобильной коммерции. Яркий пример — AliExpress: в далеком 2009 году этот гигант создавался как веб-сайт, а сегодня функционал сайта куда беднее, чем таковой мобильного приложения. В приложении пользователя ждут куда более привлекательные скидки, встроенные игры и уникальные акции, которые стимулируют его чаще возвращаться за покупками.
Конечно, вряд ли кому-то удастся повторить успех этой площадки или даже к нему приблизиться. Однако наблюдение за общими трендами поможет вам определить направление, в котором следует двигаться. Если лидеры рынка фокусируются на мобильных приложениях, значит, это направление наиболее выгодно и перспективно.
Однако не всегда небольшому бизнесу целесообразно равняться на гигантов. Последние давно представлены на рынке и не нуждаются в рекламе: вопрос доверия и лояльности покупателей для них не стоит так остро.
Что делать в случае, если доверие покупателей еще нужно заслужить? Следует в первую очередь позаботиться о безопасности.
Безопасность m-commerce
Безопасность и желание пользователя продолжать совершать покупки идут рука об руку. Защита данных покупателей — главная забота владельца бизнеса в сфере мобильной коммерции. Никому не хочется стать жертвой кражи личных данных или незаконного списания средств.
Любая транзакция, совершаемая с мобильного устройства, включает три компонента, а именно:
- Пользователь — сторона, совершающая покупку
- Сервер — сторона владельца мобильного приложения
- Соединение — связующее звено между первыми двумя, которое обеспечивает их адекватное взаимодействие
Ни один из этих компонентов не должен иметь проблем с безопасностью. Обеспечьте непрерывную защиту транзакций, используйте безопасные протоколы. Пользователь, со своей стороны, должен иметь возможность настройки многофакторной аутентификации и контроль над функцией геолокации.
Способы оплаты
Самый страшный враг владельца смартфона — ручной ввод. Особенно если речь идет о вводе данных банковской карты при оплате товара. С этим нередко приходится сталкиваться, покупая на веб-сайтах.
Одно из весомых преимуществ м-коммерции — возможность расплачиваться не только банковской картой, но и с помощью мобильных электронных кошельков (Apple Pay, Android Pay), избегая ошибок при вводе и экономя время.
Еще об экономии времени
Ранее мы упоминали, что половина населения планеты имеет смартфон. К сожалению, не все устройства поддерживают новейшие версии приложений и операционных систем, что может отразиться на скорости загрузки экранов. Старайтесь сделать приложение для м-коммерции максимально легким: долгая загрузка каталога непременно оставит у покупателя негативное впечатление о вас.
Время — деньги. Следует также позаботиться о том, чтобы приложение корректно работало при слабом интернет-соединении. Разрывы соединения, особенно во время оплаты, не вызовут у пользователя ничего, кроме раздражения.
Комфорт пользователя
Все вышеперечисленное — очередное напоминание о том, что не стоит недооценивать важность общего пользовательского опыта, то есть комфорт при взаимодействии с приложением.
Мы уже писали, что на приложение стоит смотреть с разных сторон: глазами как покупателя, так и владельца бизнеса. Пользователь должен понимать, что вы со своей стороны нацелены не только на получение прибыли, но и на выстраивание долгосрочных отношений с ним. Этому поспособствуют опросы о качестве обслуживания, формы обратной связи, приветственный гайд при первом открытии приложения.
Когда клиент приходит со своей идеей мобильного приложения для e-commerce, мы всегда заглядываем вперед. В силу своего опыта мы видим то, что клиент увидеть не может: будущее. Да, мы действительно можем предположить, что ожидает проект в будущем: как пользователи отнесутся к тем или иным фичам, насколько удобно будет совершать покупки в интернет-магазине и как продвигать такой проект. Чаще всего владельцы бизнеса в сфере m-commerce даже не задумываются о том, какие трудности могут возникнуть в дальнейшем и как заслужить доверие покупателей. Они влюблены в саму идею проекта и зачастую не видят возможных проблем. Наша задача — не просто продать услугу, а помочь клиенту оптимизировать бюджет, сделать мобильное приложение удобным и успешным, предвидеть и предупредить возможные проблемы на проекте.
Отслеживание статистики
Мобильные приложения для ритейла предлагают удобные инструменты отслеживания статистики. Если веб-сайты требуют подключения инструментов для сбора бизнес-статистики, таких как Google Analytics, то мобильные решения позволяют анализировать KPI без сторонних сервисов. Вы можете узнать:
- Самые популярные категории товаров
- Время, проведенное в приложении
- Коэффициент конверсии
- Используемый мобильный трафик и др.
Как следствие — вы лучше узнаете свою целевую аудиторию и поймете, что именно ей нужно. Узнав больше о своих покупателях, вы сможете заслужить их лояльность.
Заключение
Большинство российских компаний признают возможности и преимущества, предоставляемые онлайновыми торговыми системами, но они, зачастую, недооценивают трудностей их внедрения. Для наиболее полной реализации преимуществ электронного бизнеса компаниям необходимо:
Плюсы и минусы интернет-торговли
Как и в любой другой сфере, в e-commerce есть свои преимущества и недостатки. Начнем с перечисления очевидных плюсов:
Минусы работы с e-commerce:
У приема международных платежей свои особенности, о которых мы рассказывали в статье.
В заключение
Руководство вышло довольно длинным и спасибо тем смелым людям, которые осилили его до конца. Надеюсь, описанное поможет лучше понять работу функционала GTM и e-commerce в частности.
Я планировал продолжить цикл статей по GTM. Следующей темой возможно станет разбор расширенного e-commerce — как считаете, актуально? И если у вас есть тема для разбора по GTM, пишите в комментариях, буду рад.
Впрочем, иногда текстовый формат сложен — проще один раз увидеть (и сделать самому), чем 100 раз прочитать. Мастер классы по GTM и аналитике, которые я веду в рамках “Весь контекст за 4 месяца” занимают около 5-6 часов демонстрации экрана — в таком формате контент воспринимается существенно проще, даже если у вас совсем немного опыта.
Если моя статья показалась вам не столь сложной, вы можете проверить свои знания о контекстной рекламе при помощи вот такого теста из 15 вопросов, в составлении которого я также принял участие.
Вывод
Владельцы бизнеса инвестируют в разработку мобильных приложений для торговли по многим причинам. Приложения обеспечивают больший ROI, повышают лояльность и вовлеченность покупателей, помогают в продвижении и делают площадку более узнаваемой.
Приложение для ритейла — неотъемлемый атрибут современного бизнеса. В скором времени порядка двух третей покупок в интернете будут совершаться через мобильные устройства, и это видится нам весомой причиной начать разработку m-commerce приложения.
Мы в SolveIt поможем сделать ваш бизнес прибыльным и узнаваемым. Свяжитесь с нами, и вместе мы продумаем все детали вашего приложения.
Мы разобрались, что представляет собой коммерция в интернете, рассмотрели виды e-commerce и ее преимущества. Несмотря на ряд недостатков, достоинства этого вида бизнеса выглядят более весомыми. Электронная коммерция позволяет компаниям увеличивать продажи, сокращая при этом расходы.