Solved

I get multiple page loads for every page

  • 14 March 2023
  • 5 replies
  • 106 views

Userlevel 3
Badge +3

We are using React to build our pages and on some pages there are “pills” for various filters, when i go to the page Heap counts multiple page loads on that page as the query is built up. 

The other scenario we have is a slideout, when i close the slide out the page generates more page loads again, even though the page in the background from a user perspective has not changed at all.

icon

Best answer by jonathan 21 March 2023, 15:28

View original

5 replies

Userlevel 3
Badge +2

Hi! Happy to help here. It sounds like each of the filter “pills” and the slideout are altering the URL of the page—possibly just the query or hash—when triggered. Heap detects any change made to the current URL, even if made using the pushState or replaceState methods of the History API, and each such change triggers a new pageview event in Heap. (I suspect if you look at the “duplicate” pageviews you’re seeing, each will have different query or hash values, reflecting how the URL was updated.)

To prevent these “extra” pageviews, I’d recommend avoiding updating the URL when changes occur on the page.

Alternatively, depending on the URLs used by your app and your reporting needs, if you only want to count pageviews with no query or hash value, you could create a defined event for pageviews where the query and hash value are null, and then report only on that defined event. This should let you build reporting without the “duplicate” pageviews triggered by URL changes on the same base page.

Userlevel 3
Badge +3

Thanks Jonas,

I have been doing filtering to minimise this and that’s been working ok for the most part, It’s just a bit tedious having to watch every click and then change the filter, then check again. I was just wondering if there was something I am missing about single page apps that I should have set up to make this easier. 

The tricky one i can’t fix at the moment is we have a table - you click on a line item and then a slideout appears and then you close the slide out.

I have got it it 1 event when the page loads - hash and query filters

I have got it to 1 event to track slideout clicks - hash and query filters

But when you close the slideout and go back to the table, I still get a page view so it’s counting more page views than really are happening. I am stuck with this one.

Thanks again for taking the time to read my message.

Userlevel 3
Badge +2

Thanks for providing that additional detail! If you can share the URL of the page in question, I’d be more than happy to take a look and see if I can provide any additional feedback.

Userlevel 3
Badge +3

page without slideout

DOMAIN/company/UID/portfolio/UID/building/UID/insights?insightsquickDate=lastSevenDays

Page with Slideout

DOMAIN/company/UID/portfolio/UID/building/UID/insights?insightsquickDate=lastSevenDays&interval=900000#viewInsightDetails/UID/activity

 

Page after closing

DOMAIN/company/UID/portfolio/UID/building/UID/insights?insightsquickDate=lastSevenDays

Userlevel 5
Badge +3

@Plasticlizzard Heap pageviews happen on page loads and url state changes. It’s arguable that this is more accurate in general (your users are viewing different views of content) but completely understand that it’s not always the correct measurement.

IMO you shouldn’t have to change your app behavior because of this. I’ve shared this post with relevant teams as an example of why we should have a config to let you control whether state changes count as pageviews or not. 

For now, a couple workarounds:

  1. Handle the deduplication in a CSV (group by path, export, count the distinct paths)
  2. Handle the deduplication in SQL (count distinct path in your warehouse)

Reply