npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@adtech/adman3

v3.2.16

Published

AdMan ads player

Downloads

75

Readme

AdMan3

AdMan 3 - плеер для воспроизведения на web-страницах видео и html рекламы, призванный заменить уже существующие решения (AdManHTML SDK, rb_ext, nr-player). Важной характеристикой AdMan 3 является возможность настройки внешнего вида плеера и направленность на обеспечение максимального комфорта пользователя при просмотре рекламы (плавность протекания визуальных этапов работы плеера). В архитектуру плеера заложены механизмы обеспечения максимальной результативности встраивания рекламы на web-страницы. Одним из таких механизмов является начало показа видео рекламы только после попадания в зону видимости пользователя более половины рекламного блока и приостановка показа в случае потери фокуса страницы (переключение на другую вкладку в браузере или на другое приложение) или ухода более половины блока из зоны видимости. Также в целях обеспечения комфорта пользователя поддерживается три типоразмера элементов управления (small, medium и large), автоматически устанавливаемых при изменении ширины контейнера, в котором размещается рекламный контент.

Режимы работы плеера AdMan3

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

  • inpage - в этом режиме обеспечивается показ рекламы в контенте Web-страницы. При этом в качестве контейнера для размещения рекламы указывается не специально выделенный пустой HTML-контейнер (как правило это div-элемент), а блок с полезным контентом, который может содержать абзацы текста, изображения, вложенные элементы span, div и другие, в свою очередь содержание дополнительный контент и каким-либо образом стилизованные. Плеер анализирует размер целевого контейнера и его внутреннюю структуру, после чего определяет место для создания рекламного контейнера. создание рекламного контейнера и размещение (рендеринг) в нем баннера производится сразу же после загрузки плеера. При этом старт показа рекламы происходит при попадание в зону видимости более 50% площади баннера. До этого реклама стоит на паузе. Ширина рекламного контейнера будет равна ширине целевого контейнера с контентом. В конфигурации плеера можно указать желаемый процент от начала контента, с учетом которого будет размещаться реклама. По умолчанию это 50%, т.е. середина. После показа рекламы контейнер плеера плавно уменьшается, в течении 5 секунд показывается анимированная кнопка СТА, а затем рекламный контейнер окончательно удаляется с Web-страницы. Возможен показ нескольких рекламных баннеров различных форматов. При этом их ширина будет постоянной, тогда как высота будет рассчитывается в соответствии с соотношение сторон, указанных в баннере. Если после загрузки мета-данных видео обнаружиться несоответствие фактического формата размерам, полученных с рекламного сервера (в т.ч. при их отсутствии, когда по умолчанию для всех типов креативов используется формат 16:9), плеер изменит высоту рекламного контейнера в соответствии с фактическими размерами. Действует ограничение на размер рекламного контейнера в 90% от размера области видимости браузера. Дополнительно можно разрешить вынос рекламного контейнера у нижний угол, если при скроллинге страницы реклама уходит из области видимости более чем на 50%. Это позволяет обеспечить “доигрывание” рекламы. В противном случае при уходе из зоны видимости более чем на 50% реклама ставится на паузу.
  • instream - в этом режиме показ рекламы осуществляется в зависимости от показа базового видео. Переход плеера в этом режим происходит, если в качестве целевого контейнера указан html-элемента с тегом video. При этом управление воспроизведением видео в этом контейнере может осуществляться любым доступным способом. Плеер AdMan3 подписывается на события timeupdate, durationchange, pause и ended, при наступлении которых производится анализ текущей ситуации и при выполнении определенных условий принимается решение о запуске рекламы одной из поддерживаемых секций - preroll, pauseroll, middleroll или postroll. При запуске рекламы воспроизведение базового видео приостанавливается и на экране отображаются визуальные компоненты плеера AdMan3. Существенным моментом является обязательное использование режима overlay, в котором размещение контейнера AdMan3 осуществляется в контейнере, являющемся родительским по отношению к указанному в конфигурации css-селектору, указывающему на контейнер базового видео (тэг video). При этом размер контейнера AdMan3 устанавливается по размеру родительского контейнера, а цвет его фона задается в соответствии с указанным в конфигурации значением либо значением, равным ближайшему родительскому элементу. Если такое не будет найдено, то используется черный цвет (#000). Если пропорции родительского и рекламного контейнеров не совпадают, то образуются горизонтальные или вертикальные поля. Реклама при это позиционируется по центру. После завершения показа соответствующей секции контейнер AdMan3 скрывается и управление передается базовому видео. Баннеры секции midroll можно разделить на несколько групп, каждая из которых будет показываться в разные моменты показа базового видео. Точки показа можно указывать как в процентах, так и в абсолютных единицах. Если точки показа не указаны, плеер автоматически распределяет баннеры на 4 точки показа через каждые 20% хроно базового видео. AdMan3 использует собственные механизмы показа рекламы, в том числе и видео-роликов, не затрагивая работу механизмов базового видео за исключением вызова стандартных методов pause и play для секции midroll, соответственно приостанавливающие и возобновляющие показ базового видео.
  • preload - базовым поведением плеера является получение рекламы из слота при обращении к рекламному серверу. Однако в ряде случаев требуется показ рекламы по ее конфигурации, передаваемой плееру при инициализации. Для этого и предназначен режим preload, где описание рекламы должно быть передано в параметре visit конфигурации плеера. Такая функциональность активно используется в режиме SDK, где AdMan3 используется как часть сложного баннера для показа видео. Внешний код получает описание баннера с сервера, готовит конфигурацию инициализации AdMan3 и запускает плеер. Также режим может быть использован для любых задач, требующих показа конкретного баннера, включая тестирование.
  • inline - запрос рекламы с сервера не осуществляется, реклама для показа (inline-баннер) загружается из строки base64, размещенной в переменной AdmanBanner объекта window. В частности, такой режим используется для интеграции с внешними партнерами по технологии header-bidding.
  • overlay - базовым поведением плеера является вставка рекламного контейнера в имеющийся полезный контент или показ рекламы в специально выделенном контейнере (как правило определенного размера). В то же время для ряда задач требуется вывод рекламы поверх имеющегося контента. Для этого и предназначен режим overlay, где плеер создает контейнер, занимающий всю площадь целевого контейнера, полностью перекрывая имеющийся в нем контент. В частности, такой функционал используется при работе в режиме instream, где показ рекламы осуществляется поверх базового видео.
  • SDK - основным вариантом использования плеера AdMan3 является автоматический показ рекламы в соответствии с переданной конфигурацией или полученной с рекламного сервера без какого-либо дополнительного управления после инициализации. Однако в ряде случаем требуется программное управление работой плеера. В таком случае используется режим SDK, позволяющий программно создавать экземпляры плеера и инициализировать их с произвольной конфигурацией вплоть до рекламных баннеров, которые следует показывать. Также внешний код может ставить показ на паузу, возобновлять его, переходить к следующему баннеру, управлять звуком, запрашивать текущее состояние. Также AdMan3 поддерживает множество колбэков, позволяющих внешнему коду реагировать на различные события плеера.

Основные характеристики и фичи продукта

  • загрузка рекламы с рекламного сервера и ее запуск (в т.ч. рендеринг);
  • контроль показа рекламы (отслеживание времени нахождения рекламы в области видимости браузера в разрезе конкретной доли в области видимости);
  • обеспечение пользовательского интерфейса для взаимодействия с рекламой;
  • обеспечение возможности программного управления показом рекламы;
  • отправка статистики (в т.ч. пикселей) о показе и действиях пользователей;
  • завершение показа и удаление элементов с Web-страницы.
  • возможность настройки внешнего вида как с помощью предопределенных тем, так и посредством параметров конфигурации, а также с помощью CSS (в т.ч. использование произвольных иконок);
  • вынос контейнера с рекламой из основного контента в нижний угол страницы при ее скролинге с уходом рекламы из области видимости более чем на 50%;
  • плавное закрытие контейнера с рекламой в режиме inpage для исключения “рывков”;
  • анимация кнопки CTA, в том числе с размещением на ней логотипа и побуждающего текста, а также дополнительного нахождения на экране после завершения рекламы;
  • автоматическое изменение размеров элементов управления в зависимости от размера контейнера;
  • управление наличием элементов управления и составом adChoice (таймер, меню, метка “Реклама” с настраиваемым текстом, иконки и т.д.);
  • возможность размещения элементов управления в любом углу контейнера, управления размером отступов от границы контейнера, привязка к контейнеру плеера или креатива;
  • встроенная поддержка специальных предупреждений, отображение которых требуется в соответствии с законодательством (например, для лекарственных препаратов, БАДов, медуслуг и т.д.) с возможностью вывода как стандартного, так и произвольного текста;
  • возможность управления горизонтальным и вертикальным центрированием рекламы в целевом контейнере (в случае, если при несоответствии форматов образуются поля);
  • автоматическое размещение рекламы в целевом контейнере максимально эффективным образом;
  • автоматический ресайзинг размера рекламы при изменении размера целевого контейнера с ресайзингов специального предупреждения;
  • возможность установки видео или изображения (с размытием), которое будет отображаться в случае наличия полей, либо просто цвета фона (в т.ч. прозрачный);
  • автоматическое использование текущего видео в качестве фонового в случае наличия горизонтальных полей более 20% с выносом элементов управления во внешний контейнер и растягиванием специального предупреждения на всю ширину целевого контейнера;
  • возможность открытия ссылки при клике в модальном окне;
  • поддержка формата VAST;
  • возможность повтора видео как в ручном режиме с помощью кнопки, так и в автоматическом режиме;
  • передача различных параметров (в т.ч. передаваемых при инициализации) в запросе к рекламному серверу (браузерные топики, id пользователя, размер контейнера, данные о базовом видео и прочее);
  • нативная поддержка формата VideoMotion, который может быть использован в режиме SDK для показа произвольных товарных позиций, передаваемых в JSON.