Как обнаружить возвращающихся посетителей на сайт

Question

Мне нужно иметь возможность стилизовать страницу для возвращающегося посетителя. Я пытаюсь сделать это, используя localStorage, вот что у меня есть.

1). проверить, установлен ли флаг посещения и добавлен ли класс в тело

if (localStorage.getItem("visit") !== null) {
    $('body').addClass('returning');
   }

2). добавить флаг в localStorage, если он не существует

if (localStorage.getItem("visit") == null) {
    localStorage.setItem("visit", 1);
   }

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

Как я могу обнаружить возвращающегося посетителя только после того, как пользователь возвращается на сайт, а не при перезагрузке страницы?

Answer 1

Это то, что Google Analytics сделал как стандарт! То, как они это делают, состоит в том, чтобы иметь несколько частей к хранимым данным (в случае GA это cookie, но локальное хранилище в порядке) - самое главное, время последнего просмотра страницы, идентификатор сеанса и идентификатор посетителя. Основная идея заключается в том, что когда пользователь посещает сайт, он получает идентификатор пользователя, идентификатор сеанса и отметку времени для своего просмотра страницы в одном и том же файле cookie. Затем, если они загружают страницу, а последняя записанная метка времени загрузки страницы> 30 минут назад, сеанс считается истекшим и начинается новый сеанс. Вы можете решить, когда истечет время ваших сеансов, и судить, что просмотр страницы является частью повторного посещения, если предыдущий просмотр страницы был определенное количество времени назад. Помните, что некоторые люди могут посещать сайт в полночь, поэтому просто сказать, что это отдельная сессия, если она происходит в отдельный день, может быть не очень хорошая стратегия.

Answer 2

Для каждого пользователя сохраните timestamp вместо просто boolean значения

Фрагмент кода

// When a user visits your web-page
var timestamp = localStorage.getItem("timestamp");

if (timestamp !== null) {
    // taking visiting-gap as 15 minutes
    var epochGap = 900;

    // convert timestamp to seconds
    var jsTimestamp = (new date(timestamp).getTime())/1000;
    var currentTimestamp = (new date(timestamp).getTime())/1000;

    // Mark visitor as returning if coming after the visiting-gap
    if (jsTimestamp > (currentTimestamp + epochHour)) {
        $('body').addClass('returning');
    }
}

// Save timestamp on first visit
if (localStorage.getItem("timestamp") == null) {
    var timestamp = new Date().getTime();

    localStorage.setItem("timestamp", timestamp);
}