[JavaScript] Поимка события 'onbeforeunload'

slavegirl
На сайте с 25.06.2012
Offline
388
935

Здравствуйте!

Помогите, пожалуйста, с одним интересным для меня вопросом.

Краткая предыстория

Устанавливаю на сайт JS HTML5 аудио-плеер от Uppod.ru, он играет у меня радио.

В плеере есть собственные генераторы и обработчики событий. В частности, сейчас пытаюсь разобраться с событием 'player_error'. Оно возникает, когда после нажатия на Play не удалось получить данные с радиостанции по ссылке (например, станция вдруг перестала существовать).

Обработка этого события мне нужна, чтобы по нему отправлять в Google Analytics записку с названием станции, которую нужно проверить/починить.

Упрощённый код выглядит следующим образом (используется jQuery):


$('#radio_player').on('player_error', radioOnError);

function radioOnError(){
ga('send', 'event', 'Radio', 'Error', 'Название станции');
}

Так вот... В Firefox (у меня сейчас последняя версия) обнаружила одну неприятную штуку. Если начать слушать полностью рабочую станцию, а потом просто обновить страничку или перейти по внутренней ссылке сайта, в плеере срабатывают события 'stop' и затем 'player_error'. В Google Chrome эти события не появляются.

Чего мне нужно?

Я хочу избавиться от ложного срабатывания 'player_error'. Для этого я добавила обработчик ухода со странички:


radio.muteErrors = false;

$(window).on('beforeunload', function(){
radio.muteErrors = true;
});

function radioOnError(){
if (!radio.muteErrors){
ga('send', 'event', 'Radio', 'Error', 'Название станции');
}
}

И по переменной radio.muteErrors определяю, стоит ли обращать внимание на ошибки или нет.

Теперь сам вопросик...

Обязательно ли в таком случае создавать собственную отдельную переменную? Может в JavaScript существует какая-то встроенная глобальная переменная, которая меняет своё значение при разных состояниях окошка?

Например:

window.status // beforeunload

Чтобы можно было просто ориентироваться по её значению в момент обработки ошибки от плеера.

Заранее большое спасибо за любые подсказки!

С уважением,

Slavegirl

https://t.me/joinchat/RKtR6f68OwU1NzM6  ❤️‍🔥  Сарказм is my orgazm
W
На сайте с 18.09.2006
Offline
86
#1
window.status // beforeunload

не такого нет.

я бы сделал не так, а вот так:

function radioOnError(){
// тут можно еще и запомнить ID таймаута и если по каким то причинам он все же вновь за играет то отменить операцию, если такое возможно, что он возобновится , и ты это в силах отследить например юзер нажмет паузу - плай и оно возобновится
setTimeout(function(){
ga('send', 'event', 'Radio', 'Error', 'Название станции');
}, 10000);
}

Ну и соответственно если окно закроется таймаут убьется автоматом не выполнившись

slavegirl
На сайте с 25.06.2012
Offline
388
#2

wanick, ясно-понятно... Спасибо за ответ! Жаль, конечно, с такой волшебной переменной всё было бы немножко проще.

wanick:
Тут можно еще и запомнить ID таймаута и если по каким то причинам он все же вновь заиграет то отменить операцию, если такое возможно, что он возобновится

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

Если интересно, плеер от Uppod работает следующим образом, чуточку получилось разобраться в его поведении.

В параметре {"file": "ссылка|зеркало1|зеркалоN"} ему передаётся адрес станции или сразу несколько (резервные адреса). После нажатия на Play он переходит в режим "играю" и ждёт 1 секунду (или на сколько установлен буфер в настройках). Если получить данные со станции не удалось, он пробует следующие зеркала (тоже по 1 секунде). Когда все зеркала закончились и ничего не получилось, плеер переходит в режим "пауза" + "стоп" и генерирует событие ошибки:

И дальше уже ничего сам не играет. Можно, конечно, в случае ошибки переходить на следующую станцию из той же категории (чтобы после фоновой музыки Ambient не включился какой-нибудь Drum & Bass), но это уже другой вопрос юзабилити.

Мемори
На сайте с 11.11.2012
Offline
105
#3

1) если я понял правильно ваше описание проблемы то ошибка возникает после стоп. Значит не надо реагировать на ошибки после стоп, т.е. когда плеер не активен.

В Firefox (у меня сейчас последняя версия) обнаружила одну неприятную штуку. Если начать слушать полностью рабочую станцию, а потом просто обновить страничку или перейти по внутренней ссылке сайта, в плеере срабатывают события 'stop' и затем 'player_error'. В Google Chrome эти события не появляются.

2) не реагировать на ошибки если текущий браузер Лиса. Все равно Хром 80% и ошибки все равно вы увидите. Чисто статистически.

Это можно сделать фильтрами даже прямо в отчетах Аналитики ничего не меняя в коде на сайте.

slavegirl
На сайте с 25.06.2012
Offline
388
#4
Мемори:
1) если я понял правильно ваше описание проблемы то ошибка возникает после стоп. Значит не надо реагировать на ошибки после стоп, т.е. когда плеер не активен.

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

Последовательность такая:

Play => Не получаем ответа от станции => Pause => Stop => Error

Мемори:
2) не реагировать на ошибки если текущий браузер Лиса.

Уже вроде придумала рабочий вариант, как подлечить этот глюк в лисичке, может кому-то пригодится (код сокращённый, только по отправке записок в аналитику).


$('#radio_player').on('init', function(){
$(window).on('beforeunload', function(){
radio.unload = true;
if (radio.getStatus() == 1){
ga('send', 'event', 'Radio', 'Stop', 'Duration: ' + radio.CurrentTime().toFixed(1) + ', Volume: ' + radio.Volumed().toFixed(2) + ' (Page Leave)');
}
});
});

$('#radio_player').on('stop', function(){
if (!radio.unload){
ga('send', 'event', 'Radio', 'Stop', 'Duration: ' + radio.CurrentTime().toFixed(1) + ', Volume: ' + radio.Volumed().toFixed(2));
}
});

$('#radio_player').on('player_error', function(){
if (!radio.unload){
ga('send', 'event', 'Radio', 'Error', radio.CurrentStation());
}
});

Кстати, в премиум-версии Uppod можно подключить внутренний модуль по работе с Google Analytics и так не мучиться. Но мне, блин, понадобилось собирать свою аналитику. А тут вот такие сложности, как оказывается... К примеру, я хочу вычислить оптимальную громкость плеера, чтобы установить её по-умолчанию. Для этого мне нужно узнать, при какой громкости чаще всего будут выключать плеер сразу же (через несколько секунд) после начала воспроизведения, а при какой слушать радио дольше всего.

Вот такие у меня тараканы в голове.

Мемори
На сайте с 11.11.2012
Offline
105
#5

у тебя в коде есть

radio.unload = true;

и нет

radio.unload = false

так вообще-то как бы не програмится обычно :)

Вообще если по науке то имхо надо запоминать где-то ВНЕ страницы состояние ошибки,

так как перезагрузка страницы это фактически создание совершенно ДРУГОЙ страницы и переменные ява-скрипт будут пересозданы тоже и предыдущая

информация полученная во время beforeunload пропадет.

А почему не хочешь просто в самой аналитике отфильровывать стату только по Хрому (и не показывать по Лисе) ?

Это сразу выявит нерабочую станцию, так как с Хромом юзеров много.

Информация в аналитике какой браузер у юзерам имеется автоматически, ничего добавлять не надо.

С громкостью интересная штука! Напиши тут какая статистика получится!

slavegirl
На сайте с 25.06.2012
Offline
388
#6
Мемори:
у тебя в коде есть
radio.unload = true;
и нет
radio.unload = false

так вообще-то как бы не програмится обычно :)

Мемори, простите меня. Когда чистила лишнее из кода для примера, случайно удалила эту строчку и всё напутала.

Мемори:
С громкостью интересная штука! Напиши тут какая статистика получится!

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий