About the site inspector for Chrome

Analytics new + Tag Manager

Available from 15.3.0

Needed permissions: owner, manage, edit & publish, edit or view

The Piwik PRO site inspector is an extension for Chrome that shows heatmaps and other analytics data right on every page of your site. In this article, we’ll show you how to start collecting data for heatmaps, clickmaps and scrollmaps, add the extension and use the site inspector.

Site inspector for Chrome

Collect data for a heatmap and clickmap

First you need to add a custom tag with a code that will collect data about clicks on each page of your site. Clicks will appear as a heatmap and clickmap in the site inspector.

To add a tag for collecting data for a heatmap and clickmap, follow these steps:

  1. Here’s the code that you’ll use:
    <script> 
    (function () {
    var collectHeatmapClicks;collectHeatmapClicks=function(){"use strict";var e={460:function(e,t){t.default=function(){return{injectConfigForSiteInspector:function(){if(window.sevenTag){var e=window.sevenTag.configuration,t=document.createElement("script");t.id="ppas_container_configuration",t.setAttribute("data-appId",e.id),t.setAttribute("data-host",e.main_domain),document.head.appendChild(t)}},getElementPath:function(e,t){var n=(void 0===t?{}:t).blacklistedClasses,r=void 0===n?[]:n,a=function(e){var t=e;return r.forEach((function(e){t=t.replace(new RegExp(e,"g")," ").trim()})),t},o=function(e){for(var t,n=[],o=0,i=e[o];i&&i!==document&&i!==window&&"html"!==(t=i.tagName.toLowerCase());i=i.parentNode,o++){if(i.id){t="#"+i.id,n.push(t);break}if(Array.prototype.slice.call(i.parentNode.children).filter((function(e){return e.tagName.toLowerCase()===t})).length>1){var c=Array.prototype.slice.call(i.parentNode.children).indexOf(i)+1;c>0&&(t+=":nth-child("+c+")")}if("string"==typeof i.className&&i.className){var s=i.className;r.length&&(s=a(s)),s=s.replace(/\s+/g,"."),t+="."+s}n.push(t)}return n.reverse().join(">")},i=[],c="";if(e.composedPath)c=o(e.composedPath());else{for(var s=e.target;null!==s.parentNode;)i.push(s),s=s.parentNode;i.push(window.document),c=o(i)}return c}}}}},t={};return function n(r){if(t[r])return t[r].exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}(460)}().default;
      var heatmapCollector = collectHeatmapClicks();
    
      heatmapCollector.injectConfigForSiteInspector();
    
      document.addEventListener('click', function(e) {
        window._paq.push([
          'trackEvent',
          'Heatmap events',
          heatmapCollector.getElementPath(
            e,
            { blacklistedClasses: [] },
          ),
        ]);
      });
          })();
    </script>

    In this code, you can change the following parameters:

    • blacklistedClasses: [], // An array of regexps (e.g./class-name/ for strict string search) of CSS class names that will be filtered from the final path

    Note: This code saves clicks and clicked elements as custom events. Keep the event names as they are because the site inspector uses them to show the data.

    Note: This tag slightly delays page loading when a visitor clicks on elements that reload the page. It gives the tag time to send data to the tracker. The delay is less than one second.

  2. Go to Menu > Tag Manager.
  3. Navigate to Tags.
  4. Click Add new tag.
  5. Name the tag and choose the following tag type: Custom asynchronous tag.
  6. In Tag code, add the code from step 1.
    Site inspector for Chrome setup
  7. In Tag triggers, click Choose existing trigger to set up a trigger for your tag.
  8. Choose the following trigger: All page views.

    Note: You can also use a page view trigger that will fire the tag on specific pages.

  9. When you’re done, click OK.
  10. Click Save for the tag.
  11. Test your tag in debug mode.
  12. When you’re happy how the tag works, click Publish.

    Note: This tag will record a custom event each time a visitor clicks each element on your site. This will increase the number of actions on which we base our pricing.

    Note: This tag is also needed to authorize the site inspector when you use it for the first time.

Collect data for a scrollmap

To see data for a scrollmap in the site inspector, you need to add a custom event tag with a page scroll trigger for each scroll mark. The easiest way is to create four tags with 25%, 50%, 75% and 100% scroll marks, but you can use different marks.

When creating a custom event tag, you need to use the following framework because the site inspector will only then understand the data. That is:

  • Category: Heatmap events
  • Action: 25%, 50%, 75%, and 100%

We’ll show you how to set up a custom event tag for a 25% scroll mark, and you’ll be able to repeat these steps for other marks.

To set up the tag for a 25% scroll mark, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Click Add new tag.
  3. Name the tag and select the following type: Piwik PRO custom event.
  4. Click Next.
  5. Set category as Heatmap events.
  6. Set action as 25%.
    Heatmap events for the site inspector
  7. In Tag triggers, click Add new trigger.
  8. Name the trigger.
  9. In Event type, choose the following type: Page scroll.
    Site inspector for Chrome setup
  10. Click Next.
  11. In Amount of page scrolled, set the percentage as 25%.
    Site inspector for Chrome setup

    Tip: Percentage depth is the relative measure most commonly used for understanding the scroll depth. But if you want to use an absolute measure, you can change the percentage to pixels and record the scroll distance in pixels. This can be useful for comparing across devices where the relative percentage heights vary greatly.

  12. In Event conditions, optionally define conditions for the trigger. You can decide to fire the tag only on some pages.
  13. In Multiplicity, mark Fire tag once per page view. This is the best option to see how far people are scrolling on a page.
    Site inspector for Chrome setup
  14. When you’re done, click OK.
  15. Test your tag in debug mode.
  16. When you’re happy how the tag works, click Publish.

You can now repeat these steps to set up the 50%, 75%, and 100% marks. Remember to change the action to the 50%, 75%, and 100% and percentages in the trigger setup.

Tip: When setting up the 100% mark, you might need to use a bit lower mark to capture the end of the page. For example, 98% or 96%.

Install the site inspector in Chrome

After setting up data collection for heatmaps, clickmaps and scrollmaps, you can install the site inspector for Chrome.

To add the extension, follow these steps:

  1. Email us at support@piwik.pro, and we’ll send you a file with the extension.
  2. Unpack the file.
  3. Open your Chrome browser.
  4. Navigate to Extensions (chrome://extensions/).
  5. Turn on Developer mode.
    Site inspector for Chrome in Piwik PRO
  6. Click Load unpacked.
    Site inspector for Chrome in Piwik PRO
  7. Choose the unpacked file you received from us.
  8. Now the extension is installed.
  9. Pin the extension to see it on your site.
    Site inspector in Piwik PRO
  10. Authorize the extension.

    Note: To authorize the extension, you need to have access to Analytics (new) and an owner, manage, edit & publish, edit or view permissions for this site.

How to use the site inspector in Chrome

Once the extension is installed, you can start using the site inspector in the Chrome browser. Now we’ll just give you a quick tour.

To use the site inspector, follow these steps:

  1. Open your site and navigate to the page you want to look at.
  2. Click on the extension icon in the browser’s menu and click on Piwik PRO – Site inspector.
  3. The site inspector will appear on the right side.
    Site inspector for Chrome setup

    Note: To see data in the site inspector, you need to have access to Analytics (new) and an owner, manage, edit & publish, edit or view permissions for this site.

  4. Choose dates and click Load overlays.
  5. Turn on Heatmap, Clickmap or Scrollmap.
    Site inspector for Chrome in Piwik PRO

    Here’s what each map shows:

    • Heatmap: Shows where people clicked on this page. Intense warm colors show the most clicks. Pale cold colors the least clicks.
    • Clickmap: Shows the edges of the clicked elements. Hover over an element to see the number and percentage of clicks and the element ID.
    • Scrollmap: Shows how far visitors scrolled down this page. To see data for this scrollmap, you need to start collecting scroll data in Piwik PRO.

    Note: You can see all maps at the same time. Each time you change dates or a page, you need to click Load overlays to see data. Also load overlays again if the layout of elements changes after you scroll the page or interact with it.

  6. To change settings, click on the setting wheel.
    Site inspector in Piwik PRO

Was this article helpful?

Technical support

If you still have some questions, visit our community.
There’s always someone ready to help!

Back to help center