Heatmaps

A heatmap shows one page of your site with its clicks drawn on it: the more clicks, the warmer the spot. Dashed lines mark where 75%, 50% and 25% of views stopped scrolling.

Heatmaps are on Solo, Studio and Agency. They are on for every site on those plans, with no code to add: your Sporetag tag already records them.

Open one#

• From the dashboard: hover a row in Top pages (or tap it on a phone) and pick the pointer at its end.
• From the site's Goals tab: pick Heatmaps.

Heatmaps are for you. Shared dashboards and invited clients do not see them.

It opens on your busiest page, on the device most of its views used, for the period you had on the dashboard. Change the page, the period or Desktop, Tablet and Phone at the top.

Beside the page:

• Most clicked lists the ten elements with the most clicks, like "Buy now" button, 312 clicks. Pick one to scroll the page to it.
• How far people scroll shows the share of views that reached each tenth of the page, and how far half of them got.

Desktop, tablet and phone#

Each view counts under the width of the browser when it started: Phone under 768 pixels, Tablet from 768 to 1,023, Desktop from 1,024. Each one is shown at a common width for its kind: 390, 820 and 1,280 pixels. Your layout changes between them, so a phone tap is never drawn on your desktop layout.

On a phone, the page opens on the Phone map. A wider layout is shown at a readable size, and you scroll sideways to see the rest.

Why the dots stay on the right element#

Many heatmaps store a click as a spot on the screen, which drifts as soon as a layout moves. Sporetag stores the element that was clicked (a short path like main > section 2 > a, never a class name) and where in that element the click landed. When the page is shown here, your tag finds each element at that width and the click is drawn on it. A click on something the page no longer has is drawn where it was on the page.

The page is your live page, not a screenshot, so it never goes stale.

What is recorded, and what never is#

For each view of a page:

• each click: the element's path, where in it, where on the page, and for a link or button its short visible name (at most 30 characters);
• how far down the page the view got, in steps of 5%;
• the device kind: phone, tablet or desktop.

Never recorded:

• anything typed, and any form field's value;
• clicks in or on form fields: text boxes, text areas, menus, checkboxes and anything editable. Not even where they were clicked;
• a name that holds an @ or four digits in a row, like an email or an order number. It is left out;
• mouse movement, and recordings of a visit (session replay);
• who clicked. Heatmap data has no visitor id, no cookie and no ad click id, so it cannot be tied to a person or a visit. 90-day tracking does not change that.

Show the page#

If your site tells browsers not to show it inside other pages (an X-Frame-Options header, or a frame-ancestors rule in its Content Security Policy), Sporetag cannot show it here. You still get Most clicked and How far people scroll.

To show it, allow Sporetag in your Content Security Policy:

Content-Security-Policy: frame-ancestors 'self' https://sporetag.com

and remove X-Frame-Options from that page, since browsers apply the stricter of the two. Only Sporetag's own pages can then show your page in a frame. Inside that frame your tag records nothing, and links and forms do nothing, so looking at a heatmap never adds a visit.

When the page does not answer#

To place clicks on your page, your tag loads one small helper from Sporetag inside that frame: https://sporetag.com/hv.js. It loads only there, never for your visitors. If your page does not load it, the heatmap shows Clicks can't be placed on this page in place of the page. Most clicked and How far people scroll still count every click and every view.

The usual cause is a Content Security Policy on your site that only lets scripts load from listed places. Add Sporetag to its script-src:

Content-Security-Policy: script-src 'self' https://sporetag.com

Keep everything already in your script-src and add https://sporetag.com to it. A site that serves the tag from its own tracking address needs https://sporetag.com there too, for this helper. The other causes: the tag is not on that page, or heatmaps were turned on less than five minutes ago.

Busy sites#

A view sends at most 30 clicks. A site with more than 20,000 views on the day before keeps a share of what arrives the next day and counts each one it keeps for the ones it did not, so the map and its numbers stay true while the cost stays flat. Heatmaps read the last 90 days at most.

Turn them off#

At the bottom of the Heatmaps page, Turn off stops recording for that site from the next visit. Turn on starts it again. Heatmaps never count toward your plan's monthly events.

How it loads#

Heatmaps are part of the small add-on file your tag already loads (x.js). They add about 1 KB to it, and only on sites that use them. The tag itself does not change. Behind a script proxy, pass /st/x.js on like the script itself.