Device Detection (GDTT) для Cotonti CMF

Версия: 1.0.0 | Совместимость: Cotonti CMF 1.0+, PHP 8.5+, MySQL 8.4+ | Лицензия: Commercial / Proprietary (плагин device_gdtt) + MIT (MobileDetect)

О плагине

Device Detection (GDTT) — это расширение для Cotonti CMF, которое автоматически определяет тип устройства посетителя: смартфон, планшет, ноутбук, настольный компьютер или широкий профессиональный монитор.

Определение выполняется двумя независимыми способами:

1. По строке User-Agent, которую каждый браузер присылает при обращении к сайту. В этой строке содержится информация о браузере, операционной системе и типе устройства (например, упоминания Android, iPhone, iPad, Windows Phone, признаков мобильного браузера). Плагин анализирует эту строку с помощью встроенной библиотеки MobileDetect, содержащей тысячи шаблонов для смартфонов и планшетов.
2. По ширине области просмотра в пикселях, которую браузер передаёт в служебном заголовке (Client Hints — в Chrome, Edge, Opera, Brave) или сохраняет в cookie на предыдущем визите. Ширина используется для точной классификации настольных устройств — от маленького ноутбука до широкого монитора.

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

Плагин работает «на лету», не требует JavaScript у посетителя и предоставляет разработчику простой способ адаптировать контент под каждое устройство — без создания второй темы и без дублирования шаблонов.

Зачем это нужно владельцу сайта

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

• Размер экрана — на телефоне узкая область просмотра, на мониторе широкая. Если сайт не адаптирован, пользователь вынужден постоянно масштабировать страницу.
• Скорость интернета — мобильные сети часто медленнее проводных. Тяжёлые изображения и скрипты загружаются долго, и посетитель уходит.
• Способ взаимодействия — на телефоне удобно нажимать пальцем, на компьютере — кликать мышью. Некоторые элементы управления могут быть неудобны на определённых устройствах.
• Приоритет контента — часть информации нужна только на больших экранах, часть — только на мобильных.

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

Какие типы устройств различает плагин

Плагин различает шесть типов устройств:

1. Смартфон — мобильные устройства. Определяется по строке User-Agent.
2. Планшет — планшетные компьютеры. Определяется по строке User-Agent.
3. Маленький ноутбук — ширина области просмотра до 1366 пикселей (настраивается).
4. Средний ноутбук или монитор — ширина от 1367 до 1600 пикселей (настраивается).
5. Большой монитор — ширина от 1601 до 1920 пикселей (настраивается).
6. Очень большой монитор — ширина свыше 1920 пикселей.

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

Как именно определяется ширина экрана

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

Способ 1. Служебный заголовок от браузера (Client Hints)

Современные браузеры на движке Chromium (Chrome, Edge, Opera, Brave) поддерживают механизм Client Hints. Браузер присылает сайту точную ширину области просмотра в специальном заголовке Sec-CH-Viewport-Width. Плагин читает этот заголовок и сразу получает точное значение ширины — без каких-либо дополнительных действий.

Условия работы Client Hints:

• только по протоколу HTTPS;
• только начиная со второго запроса к сайту;
• только в браузерах на движке Chromium.

В Firefox и Safari этот механизм не поддерживается.

Способ 2. Cookie с шириной, установленная скриптом

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

Этот способ работает:

• во всех современных браузерах, включая Firefox и Safari;
• не зависит от HTTPS — работает на любом протоколе;
• только если у посетителя включён JavaScript.

Способ 3. Значение по умолчанию

Если ни Client Hints, ни cookie недоступны (например, при первом визите или если у посетителя отключён JavaScript), плагин использует безопасное значение по умолчанию — средний ноутбук или монитор. Это наиболее вероятный вариант для большинства посетителей.

Где и как использовать плагин

Плагин открывает широкие возможности для адаптации сайта. Вот основные сценарии.

Показ различного контента

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

Адаптация рекламных блоков

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

Управление навигацией

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

Оптимизация скорости загрузки

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

Аналитика и статистика

Плагин может передавать информацию о типе устройства в системы аналитики (Google Analytics, Яндекс.Метрика) или в другие плагины Cotonti — например, в Visitor Statistics. Это позволяет лучше понимать аудиторию сайта.

Интеграция с другими расширениями

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

Экономическая выгода: почему плагин окупается в первый месяц

Скрытая проблема «мобильной версии»

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

Проблема в том, что две темы — это два независимых проекта. Каждая имеет собственные:

• систему шаблонов и структуру файлов;
• стили и скрипты;
• систему компонентов, галерей, форм;
• логику взаимодействия с модулями и плагинами Cotonti;
• точки интеграции с внешними сервисами (аналитика, реклама, оплата).

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

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

Сколько стоит разработка двух тем

По реальным рыночным ставкам 2024–2026 годов разработка двух тем для проекта средней сложности стоит от $22 000 до $35 000 — против $11 000–$18 000 для одной темы. Разница — от $11 000 до $17 000 только на этапе старта проекта.

Сколько стоит поддержка двух тем

Разработка — это только начало. Настоящая проблема двух тем — поддержка, которая не заканчивается никогда:

• контентные обновления — $2 100–$4 200 в год;
• обновления Cotonti — $800–$3 600 в год;
• добавление новых модулей и плагинов — $2 000–$6 000 в год;
• SEO-правки — $3 840–$7 680 в год;
• срочные фиксы — $500–$3 000 в год.

Итого: поддержка двух тем обходится в $9 000–$24 500 ежегодно. За 5 лет — от $45 000 до $122 500.

Что даёт плагин Device Detection

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

Единая база данных, единая логика, единая точка поддержки. Обновление Cotonti, добавление плагина, SEO-правка — всё делается один раз.

Сводная экономия

Чистая экономия за 5 лет: от $43 000 до $102 250.

• цифры номинальные и взяты с мировых площадок.

Дополнительные выгоды

• Ускорение запуска. Одна тема с условными блоками разрабатывается за 2–3 недели вместо 5–8 недель при двух темах.
• Снижение рисков. Меньше источников багов — меньше простоев — меньше потерь.
• Улучшение конверсии. Точечное скрытие ненужных элементов на мобильных повышает удобство и снижает отказы.
• Повышение SEO-показателей. Единый URL, единый HTML, единый контент лучше для поисковых систем, чем отдельные мобильные адреса.
• Унификация аналитики. Вся статистика по всем устройствам — в одном отчёте, без раздвоения данных.

Окупаемость

Плагин стоит символическую сумму. Внедрение и разметка условий занимают 4–8 часов работы разработчика. Полная окупаемость наступает в первый месяц использования. Дальше идёт чистая экономия.

Для каких проектов подходит плагин

• Интернет-магазин. Компактная корзина на мобильных, развёрнутая на десктопах. Отключение тяжёлых 3D-просмотров на телефонах. Показ блока «Похожие товары» только на больших экранах.
• Фриланс-биржа. Единая тема при сохранении полной функциональности чатов и списков. Точечное скрытие второстепенных блоков на мобильных.
• Новостной портал. Разные блоки рекламы, разные форматы ленты новостей, отключение тяжёлых видеоплееров на мобильных.
• Тематическое сообщество. Компактный список тем на телефонах, развёрнутый с превью на десктопах. Быстрый ответ на мобильных, расширенный редактор на десктопах.
• Лендинг. Точная адаптация промо-блоков, скрытие декоративных элементов на телефонах, разный порядок секций для разных устройств.

Преимущества

• Простая установка — как любое другое расширение Cotonti, через панель администратора.
• Гибкая настройка — пороги ширины можно менять под конкретные нужды сайта.
• Полная совместимость — работает на всех современных браузерах, с резервными механизмами для остальных.
• Производительность — определение устройства занимает доли миллисекунды, кэширование исключает повторные вычисления.
• Безопасность — все входные данные проверяются, плагин не создаёт уязвимостей.
• Открытый исходный код — можно изучить, убедиться в надёжности, внести изменения.
• Локализация — русская и английская.
• Без зависимостей — Composer не требуется, всё включено в комплект.

Технические детали

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

→ Полная техническая документация плагина Device Detection (GDTT)

В статье разобраны:

• архитектура плагина и назначение каждого файла;
• работа хука rc и резервного хука global;
• пошаговая настройка всех параметров через панель администратора;
• примеры использования флагов в шаблонах TPL;
• вызов публичной функции из PHP-кода;
• интеграция с другими плагинами Cotonti;
• отладка и устранение неполадок.

Установка

1. Скопируйте папку device_gdtt в каталог plugins/ вашего сайта.
2. В админке Cotonti перейдите в раздел «Расширения».
3. Найдите плагин в списке и нажмите «Установить».
4. При необходимости настройте пороги ширины.
5. Используйте флаги устройства в шаблонах темы.

Подробная инструкция по настройкам и работой с файлами шаблонов в архиве.

Никаких правок ядра, никаких дополнительных действий, никаких зависимостей.

Итог

Device Detection (GDTT) — это не «ещё одно расширение», а базовый инструмент экономии и гибкости для любого существующего проекта на Cotonti CMF или кто давно уже решается перейти на него.

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

Одна тема. Одна база. Один набор шаблонов. Полный контроль над устройствами.

Стоимость плагина — символическая. Окупаемость — в первый месяц. Экономия за 5 лет — от $43 000 до $102 000.

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