Skip to content
Keep user data between visits
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add prettier and bundlesize Dec 21, 2018
test Fix jest setupFiles filename Dec 21, 2018
tools Add prettier and bundlesize Dec 21, 2018
.babelrc Upgrade dependencies Dec 21, 2018
.codeclimate.yml Update CI options Dec 21, 2018
.editorconfig 🎉 It's alive Nov 17, 2017
.eslintrc Add prettier and bundlesize Dec 21, 2018
.flowconfig 🎉 It's alive Nov 17, 2017
.gitignore 🎉 It's alive Nov 17, 2017
.prettierignore Add prettier and bundlesize Dec 21, 2018
.prettierrc Add prettier and bundlesize Dec 21, 2018
.travis.yml Update CI options Dec 21, 2018
README.md Update README.md Dec 21, 2018
jest.config.js Add prettier and bundlesize Dec 21, 2018
package-lock.json 0.3.0 Dec 21, 2018
package.json 0.3.0 Dec 21, 2018

README.md

react-web-session

NPM version build status Maintainability Test Coverage

How many sessions does it takes for an user to create an account? Or purchase something?
Now you can track these metrics!

What is a session anyway?
This is how a web session is defined by Google Analytics:

a period of time (30 minutes by default) that is extended automatically upon user interaction.

How does it ends?

  • after 30 minutes of inactivity.
  • at midnight (based on your GA settings, not client timezone).
  • campaing query change (utm or gclid)

Usage

npm install --save react-web-session

And require it in your component

import WebSession from 'react-web-session';

const App = () => (
  <div>
    <WebSession
      callback={sessionCallback}
      history={yourOwnHistory}
      timezone="America/New_York"
    />
  </div>
);

Props

callback {function}: A function to receive the session data.

data {object}: A custom object to be saved with in the session data.

duration {number}: The duration of the session in minutes. Defaults to 30

history {object}: An instance of createBrowserHistory from history. Usually the same instance you passed to your router. Defaults to a new instance of history/createBrowserHistory

name {string}: The name of the session in localStorage. Defaults to WebSessionData

timezone {number}: The timezone used in GA. Defaults to UTC

Edit react-web-session demo

Stored data

{
  origin: {
    createdAt: '2000-01-01T00:15:00.000Z',
    href: '/',
    referrer: ''
  },
  current: {
    campaign: {},
    expiresAt: '2000-01-01T00:15:00.000Z',
    href: '/',
    referrer: ''
  },
  history: [
    {
      createdAt: '2000-01-01T00:15:00.000Z',
      href: '/cpc?utm_source=cpc',
      referrer: ''
    },
    ...
  ],
  visits: 1
}

References

Counting web sessions with JavaScript by @Swizec
How a web session is defined in Analytics

You can’t perform that action at this time.