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

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

Какие продукты мы делаем

  • Измерительные и аналитические сборщики — скрипты, которые собирают сигналы со страницы и отправляют их на вашу платформу, как тот, что стоит за нашей работой по детекции ботов
  • Функциональные виджеты — чат, бронирование, формы, калькуляторы: кусочек вашего продукта, живущий внутри страницы вашего клиента
  • Интеграции, устанавливаемые сниппетом — онбординг «добавьте один тег script», который ставит ваш продукт перед посетителями вашего клиента
  • Приём данных за скриптом — бэкенд, принимающий то, что отправляет сниппет, на любом объёме, в который складывается трафик ваших клиентов
  • Дашборд, из которого ваши клиенты за всем этим наблюдают — интерфейсы отчётности и настройки разобраны на странице админ-панелей и дашбордов

Кто будет делать ваш встраиваемый скрипт

Одну такую систему мы построили целиком — от сниппета до платформы за ним.

Сборщик в тысячах враждебных страниц

Для платформы детекции ботов в реальном времени мы построили браузерный сборщик, который собирает доказательства, на основе которых выносится вердикт «человек или бот». Это чистый JavaScript — без фреймворка, без рантайма, добавляемого на этапе сборки, без зависимостей, — потому что он работает в тысячах страниц рядом со всем, что эти страницы ещё загружают, не может рассчитывать на модульную систему или набор полифилов и не имеет права конфликтовать с сайтом вокруг себя. Он работает в активно враждебной среде: то, что он измеряет, пытается его обойти. И он маленький, потому что каждый килобайт списывается с перформанс-бюджета самого клиента — на каждом просмотре страницы, всегда.

И платформа, принимающая то, что он отправляет

Сниппет — это видимая десятая доля системы. За этим сборщиком мы построили сервисы приёма и скоринга на Go и дата-платформу под ними — потому что успешный встраиваемый скрипт умножает собственный трафик на каждого клиента, который его установил, и бэкенд должен быть рассчитан на эту арифметику с первого дня. Полная архитектура — в кейсе.

Чего на самом деле требует встраиваемый код

Пять ограничений отделяют эту работу от обычной фронтенд-инженерии.

Бюджет размера, измеряемый в килобайтах

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

Ноль предположений о принимающей странице

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

Защита по замыслу

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

Версионирование, которое нельзя навязать

Клиенты вставляют ваш сниппет один раз и больше его не трогают. Эта одна строка обязана оставаться стабильным загрузчиком, пока всё за ней эволюционирует: поэтапные раскатки, нерушимый контракт между загрузчиком и полезной нагрузкой и совместимость, поддерживаемая годами, — потому что «пожалуйста, обновите код встраивания» — письмо, на которое никто не отвечает.

Согласие и приватность как архитектура

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

Как мы работаем

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

Staff augmentation. Наши инженеры входят в команду, которая владеет вашей платформой, — см. расширение команды.

В обоих случаях смету под задачу мы присылаем в течение двух рабочих дней после того, как разберёмся в требованиях.

Сколько стоит встраиваемый виджет

Сниппет маленький, система — нет: встраиваемый скрипт оценивается по тем же опубликованным тарифам, что и страница веб-разработки. Сборщик или виджет вместе с загрузчиком и компактным приёмом данных попадает в тариф веб-приложения, 1 350 000–3 600 000 ₽; когда платформа за ним несёт настоящий масштаб — скоринг, аналитику, клиентские дашборды, — система оценивается как работа уровня SaaS, от 4 500 000 ₽.

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

Частые вопросы

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

Потому что рантайм фреймворка оказался бы больше всего виджета целиком — и потому что принимающая страница может уже выполнять другую версию того же фреймворка или глобальное окружение, которое воюет с вашим. Встраиваемый код, который отгружается каждому посетителю каждого клиента, измеряется относительно перформанс-бюджета каждого из этих клиентов, поэтому серьёзные встраиваемые скрипты — это чистый JavaScript без зависимостей по замыслу. Собственный сайт вашего продукта может быть сколь угодно тяжёлым на фреймворки — код, который путешествует, обязан быть самодостаточным.
Ничего не предполагая и ничего не трогая. Всё работает внутри собственной области видимости, глобальное пространство имён трогается один раз — если вообще трогается, — стили изолированы, чтобы CSS принимающей страницы не протекал ни внутрь, ни наружу, а каждый путь отказа деградирует тихо: сломанный виджет никогда не должен утащить за собой оформление заказа клиента. Мы строим в расчёте на враждебные страницы с самого начала, потому что сборщик, который мы эксплуатируем, работает рядом со всем, что загружают тысячи никак не связанных сайтов.
Вставленная строка никогда не является продуктом — это крошечный стабильный загрузчик, который подтягивает актуальную полезную нагрузку. Контракт между загрузчиком и нагрузкой — тот единственный интерфейс, который нельзя ломать, а всё за ним может эволюционировать: поэтапные раскатки сначала на долю трафика, версионированные нагрузки и мгновенный откат, когда релиз браузера преподносит сюрприз. Правильно спроектированный в первый день, этот шов и делает «пожалуйста, обновите код встраивания» письмом, которое вам никогда не придётся отправлять.
Сторонний скрипт — это третья сторона по GDPR на каждом сайте, который его устанавливает, поэтому под согласие мы проектируем с самого начала. Мы явно фиксируем, что скрипт собирает, идентифицирует ли что-то из этого человека и как он ведёт себя относительно состояния согласия принимающей страницы — включая режим работы без согласия там, где этого требует комплаенс. Цель — встраиваемый код, который приватность-ревью ваших клиентов одобряет без совещания.
Да, и мы охотнее строим обе стороны, чем любую из них по отдельности. Успешный встраиваемый скрипт умножает свой трафик на каждого клиента, который его установил, поэтому приём данных должен быть рассчитан на суммарный объём с самого начала: платформа за нашим сборщиком оценивает десятки тысяч запросов в минуту в реальном времени, на сервисах на Go, которые мы построили целиком. Сниппет и его бэкенд — одна система, и её отказы живут на их стыке.
Виджет или сборщик с загрузчиком и компактным приёмом данных обычно стоит от 1 200 000 до 3 200 000 рублей и занимает один-три месяца — опубликованный тариф веб-приложения на нашей странице веб-разработки. Когда настоящий продукт — принимающая платформа: скоринг в реальном времени, аналитика, клиентские дашборды, — система оценивается как работа уровня SaaS, свыше 4 000 000. Сам сниппет редко бывает дорогой частью; дорог трафик, который он порождает.

Прочитайте, как сборщик встроен в систему целиком, в кейсе детекции ботов, посмотрите на сервисы на Go за ним или начните с пилларной страницы веб-разработки.