Атрибут ping тега <area>
Описание
Атрибут ping для тега <area> определяет список URL-адресов, которые должны получить уведомление (POST-запрос), когда пользователь кликает на область изображения-карты. Это позволяет отслеживать клики без JavaScript.
<img src="ad-banner.png" usemap="#admap" alt="Рекламный баннер">
<map name="admap">
<area shape="rect" coords="0,0,300,250"
href="https://example.com/product"
ping="/track/click?id=123"
alt="Купить продукт">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Формат значения | Список URL через пробел |
| Тип запроса | POST с текстом "PING" |
| Заголовки | Включает Ping-To и Ping-From |
| Безопасность | Подчиняется CORS и политике безопасности |
| Браузерная поддержка | Не все браузеры поддерживают (Chrome, Edge - да) |
Рекомендации по использованию:
- Используйте для аналитики кликов по изображениям
- Указывайте относительные URL для своего домена
- Предусматривайте fallback через JavaScript
- Учитывайте политики конфиденциальности
- Не используйте для критически важной логики
Пример с несколькими ping-URL:
<area shape="circle" coords="100,100,50"
href="/offer"
ping="/analytics/click /log/impression"
alt="Специальное предложение">
JavaScript fallback:
<script>
document.querySelector('map').addEventListener('click', function(e) {
if (e.target.tagName === 'AREA' && !e.target.hasAttribute('ping')) {
fetch('/track/click', { method: 'POST', body: JSON.stringify({id: e.target.dataset.id}) });
}
});
</script>
Ограничения и проблемы:
- Firefox и Safari могут блокировать по умолчанию
- Не поддерживает передачу сложных данных
- Адреса должны быть HTTPS в защищенных страницах
- Пользователи могут отключать в настройках браузера
Примечание: Атрибут ping предоставляет простой способ отслеживания кликов без JavaScript, но его использование должно соответствовать политикам конфиденциальности и иметь резервные решения.