[NUXT] Best way to retrieve time elapsed on page

Hi,

Im currently implementing an analytics plan and I would like to track the time spend on a page.

My primary idea was to add a variable timeElapsed on every single pages of my Nuxt application initialised at the mounted() lifecycle and sent at the destroyed() lifecycle.

This works but it is very labourious, so I seek a solution that I can implement easily.

I can use the router router.afterEach callback but I dont know where I can initialised my timeElapsed variable.

If you have any better way to do feel free to share :slight_smile:

I would probably write a small global mixin for this. That would allow to track pages as well as any other component you want:

Vue.mixin({
  created() {
    if (this.$options.track !== true) return 
    this.$_mountTime = date.now()
  },
  beforeDestroy()  {
    if (this.$options.track !== true) return 
    const name = this.$options.name // component name.
    const elapsed = Date.now() - this.$_mountTime
    // send data to API somehow, i.e. through a Store action or simply use axios or sth.
    this.$store.dispatch('trackTimeSpent', {
      name, 
      elapsed,
    })
  }
})

Usage:

// ./pages/SomePage.vue
export default {
  name: 'SomePage',
  track: true,

  // Any other options ...
}
1 Like

Could you please help me to get time elapsed form “b-tabs”?

@LinusBorg Sorry for necroposting but am I missing something or would your suggested solution fail to track page/component views which end in the user closing the tab/window or navigating to another URL completely? Is beforeDestroy guaranteed to be executed completely in these cases? Even when depending on async Vuex actions which may rely on Axios requests?

I’m sure I don’t quite understand all of the nuances of the lifecycle events but I’ve always equated the beforeDestroy function with window.beforeunload which has many caveats in Vue.

If I’m not mistaken, is there a more reliable event or callback you would recommend for ensuring ALL time spent by a user in our apps are trackable?

A little context (if it helps): I have a learning management platform written in Vue which needs to track how long students spend on each lesson (one lesson per page) for the purpose of providing stats to teachers and content providers (i.e. for licensing purposes). If it doesn’t capture every use of the content then we’re in violation of our contracts with content providers and teachers don’t get a full picture of how long student’s are spending on their work. None of this works correctly today, so I’m researching possible solutions.

The solution I plan to implement: while a student is on a lesson page, there’s a periodic post (every 5-10s) of the session ID, lesson ID, and client timestamp (UTC) to our server, which upserts those into a usage table bumping the “endDate” date/time value to whatever value is provided by the request which can be used for reporting to determine how long the user was active on the page.

If you can tell me that the proposed solution here will work in this case then it would be way simpler than what I’m thinking…