Отслеживание кликов кнопки «Назад»

В рамках нашей новой метрики продукта мы должны измерять количество нажатий кнопки «Назад» на странице.

Поскольку сайт не является AJAX, и мы не используем «pushState», «popState» не срабатывает при возврате в браузере.

Единственная цель перехвата события кнопки «Назад» — регистрация события аналитики.

Погуглив пару часов и попробовав несколько разных решений, я ничего не понял — как ни странно, javascript просто не подходит для такой задачи.

С учетом сказанного, это недопустимый ответ :) Как бы вы справились с таким требованием?

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


person Noy    schedule 12.08.2014    source источник
comment
Я думаю, вам придется внедрить History API и использовать Google Analytics track функционировать как обратные вызовы   -  person Toni Michel Caubet    schedule 12.08.2014
comment
Как насчет сохранения стека URL-адресов в localStorage, а затем сравнения location, referrer и последнего посещенного URL-адреса в стеке, чтобы сделать вывод, что пользователь вернулся с другой страницы веб-сайта?   -  person pawel    schedule 12.08.2014
comment
Я думаю, что гораздо проще просто использовать API истории, как вы говорите; вы можете спутать кнопку «Назад» с добровольным переходом по ссылке (опять же)   -  person Toni Michel Caubet    schedule 12.08.2014
comment
@ToniMichelCaubet да, это зависит от того, является ли целью измерение пользователей, возвращающихся со страницы (независимо от того, как) или сравнение использования кнопки «Назад» с другими средствами навигации. (т. е. шаблоны навигации и взаимодействие с пользовательским интерфейсом).   -  person pawel    schedule 12.08.2014
comment
Спасибо за ваши ответы! Итак, вот в чем дело — мы пытаемся измерить недружественность навигации, что означает пару показателей, кнопка «Назад» (не возврат назад, а фактическое возвращение браузера) — одна из них. Что касается History API, я пытался реализовать его (используя Modernizer, history.js и даже простой HTML5), но «popstate» и «statechange» не срабатывают, если я не использую «pushstate», что означает Мне нужно будет преобразовать всю навигацию по сайту в AJAX... Я что-то упустил?   -  person Noy    schedule 13.08.2014
comment
Интересно, как вы можете отличить кнопку «Назад» в браузере от других кликов, если это не ajax? В любом случае, вы можете смешивать свои навыки/методы/применения?   -  person Gigamegs    schedule 16.08.2014
comment
Это именно то, что я спрашиваю - как я могу изменить ситуацию. И я могу смешивать свои навыки, просто еще не нашел подходящего сочетания :)   -  person Noy    schedule 18.08.2014
comment
@NoyGabay: ИМО это невозможно.   -  person Gigamegs    schedule 18.08.2014


Ответы (2)


Вы можете поймать window.onbeforeunload() и использовать файлы cookie для хранения количества нажатий кнопки «Назад» при каждом срабатывании кнопки «Назад», вы можете обновить файл cookie. Попробуй это.


Используйте popstate и файлы cookie, которых вы можете достичь. Я использовал плагин под названием cookie.

а также импортировать их на свою страницу.

Вот импорт.

<script src="/jqueries/jquery.cookie.js"></script>

Это код, который я использовал.

$(window).on('popstate', function () {
    var val = 1;
    if (typeof $.cookie('example') === 'undefined') {
        //no cookie
    } else {
        //have cookie
        val = parseInt($.cookie("example")) + 1;
        $.removeCookie("example");
    }
    $.cookie("example", val, { expires: 7 });
    //alert($.cookie("example"));
});

Это грубый код. Вы можете сделать его таким, каким хотите. Он создаст pushstate

Добавьте это в скрипт..

В HTML есть только DEMO-контент

<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="text" id="t3" />
<input type="text" id="t4" />
<input type="text" id="t5" />

Это сценарии pushstate HTML5 без AJAXify. Попробуйте эти...

    $('#t1').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/1234');
        }
    });
    $('#t2').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/12345');
        }
    });
    $('#t3').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/123456');
        }
    });

И так далее. Объявить подобное для других

По этому можно.

Эта часть предназначена для передачи значений URL-адреса, здесь t1, t2 получит значения, связанные с URL-адресом.

var ourl = "", t1 = "", t2 = "";
if (window.history.replaceState) {
    ourl = document.URL.toString();
    var url = document.URL.toString().replace('http://', '');
    var cnt = 0;
    for (i = 0; i < url.length; i++) {
        if (url[i] == '/') {
            cnt++;
        }
        else if (cnt == 2) {
            t1 += url[i];
        }
        else if (cnt == 3) {
            t2 += url[i];
        }
    }
}
person Ganesh Gaxy    schedule 18.08.2014
comment
Насколько мне известно, window.onbeforeunload() срабатывает всякий раз, когда я покидаю страницу, а не только при нажатии кнопки «Назад». - person Noy; 18.08.2014
comment
хорошо, тогда используйте popstate и cookies, которые вам помогут. У HTML% есть такая функциональность, попробуй. Это обязательно поможет вам. - person Ganesh Gaxy; 18.08.2014
comment
Итак, насколько я знаю и экспериментировал, 'popstate' срабатывает только тогда, когда ему предшествует pushstate - ваш обработчик никогда не сработает. - person Noy; 18.08.2014
comment
есть pushstate и огонь, без pushstate кнопка "Назад" не активна. Какова ваша позиция? - person Ganesh Gaxy; 18.08.2014
comment
Ну, чтобы иметь pushstate, мне нужно AJAXify мою навигацию, что я специально назвал излишним для события аналитики. И мы вернулись на круги своя. - person Noy; 18.08.2014
comment
Нет необходимости в навигации AJAXify. Я обновляю код, который имеет pushstate без AJAXify, а также поддерживает popstate. Подождите минуту. - person Ganesh Gaxy; 18.08.2014
comment
@NoyGabay Я сделал это, взгляните на отредактированный код. Я сделал это просто. Вы можете сделать это как вы хотите. - person Ganesh Gaxy; 18.08.2014
comment
Я прошу прощения за то, что не был достаточно ясен в своем комментарии - я знаю о решении, которое потребует от меня "pushstate" во всех моих элементах навигации (что очень много). Я ищу менее навязчивый способ. Сказав это, способ ответить! Получил мой голос, хотя бы за усилия. - person Noy; 18.08.2014
comment
P.S. - если бы я использовал pushstate, я бы, вероятно, обрабатывал popstate не более чем в 3 строки... - person Noy; 18.08.2014
comment
@NoyGabay Я понимаю. Но, пожалуйста, примите это, вы можете включить popstate без pushstate, поэтому без кнопки возврата нет popstate, поэтому без кнопки возврата как вы могли бы записывать? Это самый большой вопрос в моей голове. - person Ganesh Gaxy; 18.08.2014
comment
Поскольку кнопка «Назад» устарела для состояния push\pop, я продолжу и предположу, что у этого логического правила есть некоторые исключения. - person Noy; 18.08.2014

Я не уверен в каком-либо сокращенном процессе, но вы можете попробовать следовать логике, если ничего не работает.

Если вы не можете измерить количество кликов по кнопке «Назад» в браузере напрямую, вы можете измерить общее количество кликов «назад» и «назад» на своем веб-сайте. Вы можете вычесть это и получить свое значение.

Используйте этот код.

$('a').on('click', function(e) {
        if ($(this).attr('href') != 'javascript:void(0)') { // condition to check if its redirect href 
            e.preventDefault();
            localStorage.setItem('website_called', true);
            location.href = $(this).attr('href');
        }
    });

    window.onload(function() {
        if ((document.referrer).indexOf('yoursite.com') != -1 && localStorage.setItem('website_called') == false) {
            var backButtonUsed = localStorage.setItem('backButtonUsed');
            backButtonUsed = backButtonUsed + 1;
            localStorage.setItem('backButtonUsed', backButtonUsed);
        }
        localStorage.setItem('website_called', false);
    });
person Sauryabhatt    schedule 21.08.2014
comment
Я добавил код в свой ответ, это может помочь. Проверьте синтаксис и измените в соответствии с вашими требованиями - person Sauryabhatt; 21.08.2014
comment
Это я также могу сделать из журналов доступа к серверу — собрать поток и определить, пошел ли пользователь назад — но это не то, что я ищу. Я хотел бы знать, когда пользователь нажимал кнопку «Назад», а не использовал встроенную навигацию сайта. - person Noy; 21.08.2014
comment
Я не уверен, что вы хотите, но если вы хотите, чтобы количество раз была нажата кнопка «Назад» в браузере, вы можете проверить это в localStorage->backButtonUsed, так как оно увеличивается только тогда, когда будет нажата кнопка «Назад» в браузере, так как в это время будет установлен флаг веб-сайта ЛОЖЬ. - person Sauryabhatt; 21.08.2014
comment
В качестве альтернативы, если вы хотите отслеживать на странице, с которой была нажата кнопка «Назад», вы можете написать код window.load в событии window.unload и написать свой код в том месте, где увеличивается значение localstorage. - person Sauryabhatt; 21.08.2014