How to tell the heatmap to stop collecting data/screenshots after new content loaded via AJAX?

Premium Features
1

Hi everyone,

We are trying to get a heatmap of our homepage, but are running into a snag with getting a good screenshot. (And I am wondering if this problem is affecting our heat map data, too.)

We have a search bar on our homepage, and when the user presses “enter,” the search results are loaded via AJAX into the page, and the URL in the address bar is changed to something like http://mywebsite.com/search-results/?k=keyword. It is meant to look like we have loaded a new page, but without triggering a whole reload.

So unfortunately, this means we keep getting screenshots of a search results page instead of the homepage. (I am wondering if this also means we’re getting heatmap data from the search results page.)

Any ideas on how to make sure the heatmap tool knows to stop collecting data/screenshots after the search results have been loaded & the URL has been changed? Would rather not convert it to a reload and lose the current speed of the search results.

Thanks for the help as always!

2

Hi There,

If you configure a screenshot, then visit that page it should just capture the screen as it is without the search results. What may be happening is when the page is configured a user is going to the page, then opening the search dialog as the page is being captured. You can delete the screen shot from the bottom left of the heatmap screen then immediately visit the page. As long as you are the first visit, your screen should be captured.

Thanks,

3

Thanks Jason! Somehow I didn’t think about getting the screenshot on my own, that’s a great idea for this kind of thing. I appreciate the insight!

As an update, I also figured out that Matomo wasn’t detecting the search results as a new pageview, but we actually wanted it to (since the URL changes when the search results pop up). I’m guessing it’s a really similar issue with tracking single-page apps. So I ended up adding some code that tracks a new pageview when the search results pop up:

var ref = location.href;

// Change the URL (this code already existed)
history.replaceState({state: 1}, 'Search Results', 'http://mywebsite.com/search-results/?k=keyword');

// Track a new pageview with the new URL & Title (Matomo) (This is what I added)
_paq.push(['setReferrerUrl', ref]);
_paq.push(['setCustomUrl', location.href]);
_paq.push(['trackPageView', document.title]);

Hopefully this might help someone else with this problem!

4

Hi Mikky,

We also have a SPA guide here https://developer.matomo.org/guides/spa-tracking that may help.

Thanks,