Solved

Measure time spent in a page


Userlevel 2
Badge +5

Hi everyone,

I wanted to know if it's possible to measure the time spend in a given platform page with Heap. Did anyone set up an event like this before?

Thank you!

Bernardo

icon

Best answer by jonathan 18 May 2022, 17:15

View original

13 replies

Userlevel 3
Badge +2

Hi Bernardo,

 

I’m hoping someone else has a clever solution but in general I’ve found most analytics tools can’t do this because in order to capture 100% of users it requires an event to be fired when someone closes their tab or browser, which isn’t possible or at least not easy.

 

The closest you can do in Heap is measure the difference in time between two tangible events - IE events you have defined in your environment. You could potentially set up an event for a view on a specific page, and then a separate event for a view on every other page excluding the page in your first event. Something like this:

 

 

Personally, I’ve never found any practical application of a time-on-page metric. We’ve always found it too complicated to objectively say that a shorter or longer session time is a “good thing”. Some people will swear that if the user gets through a page quickly it means they understood what was going on and were ready to convert. Others will swear that more time on a page is a good thing because it means they’re reading and digesting your content. 

Userlevel 2
Badge +5

Hi Adam,

Thank you for your answer. However, I would like also to know if we are able to get the page load time in Heap? I guess this is also an interesting insight.

Best regards,

Bernardo Madeira

Userlevel 4
Badge +3

@bernardo.madeira Take a look at this doc on how to Capture Page Load Time. Due to various timing issues, we can’t capture this data reliably when page views are fired, so the approach is to use the Snapshots feature as a tag manager, triggering a JavaScript function that fires an event on all pages when the page timing information is available.

 

 

 

Userlevel 2
Badge +5

Hi Jonathan,

Thank you for your prompt reply :). Unfortunately I'm not being able to capture the load time through the Javascript tag. I'm getting No results found when running a report analysis.
I added exactly the same tag you shared.

Userlevel 3
Badge +2

JavaScript snapshots (and all snapshots, actually) aren’t retroactive, they only start capturing from the time you add them. Is it possible that you haven’t had any new page views since adding the snapshot?

Userlevel 2
Badge +5

I didn't add the snapshot to new page. Only added to existing events defined previously

 

Userlevel 4
Badge +3

hey @bernardo.madeira — Snapshots are bundled into our tracking script and once configured take a few minutes to propagate via our tracking script, and then are only triggered going forward (as @adam mentions).

Also remember in this case you’re looking for a custom event, not a property. (Non-SPA Heap pageviews are fired on a browser event called DOMContentLoaded but to get page load time we need to wait until domComplete.) So your report should look like this. You can also group by Path to see load times by page. 

 

 

Results are in milliseconds, and by default the report will attempt to bucket them into ranges. You can customize the ranges by creating a Conditional Defined Property For example:

Hope this helps!

Userlevel 2
Badge +5

Hi Jonathan,

So this means I need to create a new page view event in order to capture the load time? Otherwise I can't get this information?

If I delete the event and create a new one exactly the same as the deleted one, will I be able to capture the load time via JS tag?

 

Thank you :)

Userlevel 4
Badge +3

Hey @bernardo.madeira — If you’’re talking about the Page Load event created by the Snapshot, yes. You will need to create that—the Snapshott snippet creates it—in order to get the page load time. As I mentioned in previous posts, page timing information is not available when Heap page events are triggered. That is why we use this workaround. If you want this data to trigger on all pages, you will need to delete the current Snapshot (not the event it is attached to) and add it to a new, broader event.

Let’s summarize where we are for clarity:

  • Right now you have this Snapshot installed on an Heap page view event that fires on all pages matching a specific pattern: /configure-dataflow/dataflow/*
  • On every page that matches this pattern, Heap will register a page event, and fire the JavaScript snippet you installed from our docs.
  • That snippet waits until all the timing information is available then makes a track API call, firing an event called Page Load which has a property Load Time. This is necessary because Heap’s pageview fires before all the timing information is available. 
  • You have this Pgae Load event available to you in your Heap account right now and can be graphed. Along with Load Time, it has all the normal Heap properties such as Path, etc. Give it a try!
  • If you want to capture the Page Load event on all pages, you can create an event that fires on all pages similar to this screenshot. This is not necessary but it is recommended and typical, unless you only care about page load times on specific pages. The name here is just a suggestion—you can call it whatever you want.

 

So if you want page load time on all pages in your product:

  1. Remove the Snapshot from the current event Dataflow - View - Page - Load Time
  2. Create an event like the above that fires on all pages
  3. Add the Snapshot to it. 

Does this help clarify things?

Userlevel 2
Badge +5

Hi Jonathan,

Thanks a lot for your detailed explanation. However, I created a Conditional Defined Property, just like mentioned in previous messages and I can't get the segmentation in my report when I group by the defined property.

Userlevel 4
Badge +3

It works for me? Are you graphing Page Load or Dataflow - View - Page - Load Time

 

Userlevel 2
Badge +5

Changed the definition! Now it's working for me too :)

Userlevel 4
Badge +3

Just to clarify for anyone else reading along, I don’t think it was the pageview definition that changed but that you switched the event you were querying. Dataflow - View - Page - Load Time is the event definition (return page views matching /configure-dataflow/dataflow/*) which triggers the custom event Page Load.

Reply