Scroll Map Setup on 1C-Bitrix
Scroll map answers one question: what part of page do most users reach. On long catalog pages and Bitrix landings critical — often turns out 70% users don't see "Benefits" block or inquiry form because located below "fold." Scroll data changes layout decisions faster than any A/B test.
Yandex.Metrica: Scroll Map Without Extra Code
Metrica builds scroll map automatically — separate tracking not needed, installed counter enough. Data available in "Webvisor → Maps → Scroll Map."
Important nuance for Bitrix: scroll map built for specific URL. If catalog has pagination and pages /catalog/?PAGEN_1=2 indexed as separate URLs — each page has its map. Normal, but analyzing look at first page (/catalog/ without param), as it gets main traffic.
Problem arises with clean URLs in Bitrix. If bitrix:catalog.section generates URLs like /catalog/category/sub/ — in Metrica scroll map separate for each section, inconvenient for comparison. Solution: group URLs by templates in Metrica settings via "URL Grouping."
Hotjar Scroll Maps: Setting Recording Depth
Hotjar writes visibility percent of each element — more accurate than just "reached pixel Y." Connection — script in <head>, same as heatmaps. For pages with dynamic content loading (infinite scroll in Bitrix catalog) Hotjar must be notified of page height change:
// After loading new products via AJAX
if (typeof hj !== 'undefined') {
hj('stateChange', window.location.href);
}
Without this Hotjar counts page height from initialization, and all AJAX-loaded products fall into "100% scroll zone" — map incorrect.
Microsoft Clarity: Free Alternative
Clarity builds scroll maps automatically, including handling SPA transitions correctly. For Bitrix plus — no manual stateChange calls needed. Code installed once:
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "XXXXXXXXXX");
In Bitrix added to header.php template or via OnBeforeProlog event handler.
Analyzing "Folds" on Specific Templates
For standard "Start" or "Corporate" Bitrix template typical problem — "Why us" block placed 1500–2000px from top. Scroll map shows 15–25% users reach it. Doesn't mean block needs deleting — means it needs lifting or page structure rebuild.
On order pages (component bitrix:sale.order.ajax) scroll map especially valuable: shows which step users stop interacting with form. If most don't reach "Place order" button — form too long or elements unclear.
Tracker Performance
All three tools (Metrica, Hotjar, Clarity) add third-party scripts to page. On weak mobiles extra 200–400ms execution time. If Core Web Vitals critical — connect via defer or setTimeout(..., 1000) after main content load.