👀 Необходимость отслеживать JavaScript-события на моем сайте для души stihirus24.ru возникла в ходе его редизайна и появления на страницах стихов HTML тега summary (заголовок) в оболочке details (аккордеон). С помощью конструкции:
<details><summary>Развернуть</summary>
Я спрятал от глаз часть неуникального текста чужих стихов, оставив возможность прочитать их целиком при клике на заголовок блока-аккордеона.
☝ *Заголовок «Развернуть» можно заменить на любой другой, важно чтобы он был одинаковым на всех страницах Joomla, что необходимо потом для массовой его замены на код с событием onclick.
Зачем использовать details summary
🤔 Я решил уменьшить объем неуникального текста, но не вырезать его напрочь, так как специфика проекта требует, чтобы на странице был сам стих (часть его прячем в summary) и его анализ.
Ранее структура была такой:
- Картинка
- Полный текст стихотворения.
- Анализ.
- Видео чтения стиха.
Сейчас она такая:
- Картинка.
- Начало стихотворение и далее details до конца произведения.
- Анализ.
- Видео, тоже спрятанное в
Вот пример работы кода на сайте:
https://stihirus24.ru/aleksandr-blok/pogruzhalsya-ya-v-more-klevera.
💥 Сказано – сделано, но возникла проблема отследить, насколько разворот текста удобен для пользователя и как часто он им пользуется. Для этого пришлось создать цель и обернуть details в специальный код JavaScript-события Метрики.
Создаем цель в Метрике
☝ Для начала отслеживания кликов создаем цель в Метрике, выбрав из предложенных вариантов JavaScript-событие.
Переходим по пути:
Метрика – настройки – цели – добавить цель.
Выбираем JavaScript-событие, а идентификатор цели ставим в позицию «совпадает».
Ниже появляется код цели для сайта, его надо скопировать и сохранить, например, в программе Блокнот, который не портит html-код.
Теперь надо наш код с details и summary обернуть в событие onclick для фиксации клика через Javascript.
👀 Готовый код выглядит так:
<details><summary onclick="ym(38726910,'reachGoal','summary'); return true;">Развернуть</summary>
Где «ym(38726910,'reachGoal','summary')» это ваш код для цели из Метрики. Мой использовать не надо, у меня и так все хорошо).
Важно знать:
- Details – это интерактивный элемент, при клике открывающий блок с информацией.
- Summary – это заголовок блока «аккордеон», если его не указать, то в details будет скупое для глаз «подробнее».
Теперь надо проверить работу цели на экспериментальной странице, для чего можно кликнуть раз-другой по заголовку summary или отписать в ТП Метрики для проверки их бесконечными нервами и силами).
Вставляем onclick на все страницы
✨ После того как цель на проверочной странице проверена и работает, надо применить код на всех страницах, где он есть. То есть, теперь нам надо заменить
<details><summary>Развернуть</summary>
На
<details><summary onclick="ym(38726910,'reachGoal','summary'); return true;">Развернуть</summary>
Если изначально вы details нигде не использовали, то сразу вставляйте готовый код с событием onclick, как на примере выше. Если же конструкции аккордеона уже есть на большом количестве страниц, то старый код надо заменить на новый.
💥 Для этого есть расширение Замена, где надо создать новое правило и указать в верхнем окне старый, а в нижнем новый код.
Таким образом можно отслеживать клики по заголовку аккордеона summary с помощью события onclick хоть на миллионе страниц. Это поможет видеть реакцию пользователей и учитывать их интересы для дальнейшего развития сайта.