Heatmap Setup on 1C-Bitrix
Heatmap shows not where users click, but where they expect interactivity — where there's none. Typical picture on Bitrix shop: red spot on product name in catalog, though name isn't link, link is "Add to cart" button nearby. Means markup contradicts user intent. Heatmap fixes this, but only if setup correctly.
Yandex.Metrica: Built-in Click Map
Most accessible tool — built-in Yandex.Metrica click map. Enabled in counter settings with flag clickmap: true. No extra code needed — Metrica itself intercepts clicks via global event handler.
Problem on Bitrix arises with AJAX navigation and dynamically added elements. Metrica attaches handlers on page load — clicks on elements appearing after AJAX response (e.g., products in infinite scroll) don't hit map. Solution similar to Webvisor: call ym(ID, 'hit', url) after every AJAX update reinitializes tracker.
Hotjar and Microsoft Clarity on Bitrix
For more detailed heatmaps use Hotjar or Microsoft Clarity (free). Both connect with single script in <head>. In Bitrix — via init.php or directly in template:
// In header.php template
\Bitrix\Main\Page\Asset::getInstance()->addString(
'<script>/* Hotjar Tracking Code */
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid: XXXXXXX, hjsv: 6};
a=o.getElementsByTagName("head")[0];
r=o.createElement("script"); r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r)
})(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv=");
</script>',
true
);
Excluding Service Pages from Recording
Heatmap collection not needed on auth, cart, checkout pages — personal data there, tools like Clarity can mask fields but not always correctly. Better exclude URLs explicitly.
In Yandex.Metrica — via "Filters" in counter settings, exclude /bitrix/, /personal/, /cart/, /order/.
For Hotjar — suppressSession parameter or conditional initialization in template:
<?php
$excludePaths = ['/cart/', '/order/', '/personal/'];
$currentPath = $_SERVER['REQUEST_URI'];
$exclude = false;
foreach ($excludePaths as $path) {
if (strpos($currentPath, $path) === 0) {
$exclude = true;
break;
}
}
if (!$exclude):
?>
<!-- Hotjar script -->
<?php endif; ?>
Heatmaps on Auth-Protected Pages
Personal cabinet and checkout pages in Bitrix closed by bitrix:main.login.form component or rules in main module. Hotjar and Clarity record such pages, but if user not logged in, URL may redirect — tracker fixes clicks on login page instead of target. Check via "Pages" report in Clarity: if /order/ present with zero clicks and high bounce rate — users don't reach it due to redirect.
Device Segmentation
Heatmaps on mobile and desktop must be analyzed separately. In Hotjar — automatic, there's toggle. In Metrica — via segments in "Click Map" report. Bitrix responsive template often changes element order on mobile (CSS order), so "red spot" on desktop and mobile will be on different DOM elements, though visually — same screen place.