About the site inspector for Chrome

Analytics + Tag Manager

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

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

Site inspector for Chrome by Piwik PRO

Install the site inspector in Chrome

To add the extension, follow these steps:

  1. Open our extension in your Chrome browser.
  2. Click Add to Chrome.
    Piwik PRO - Site inspector
  3. Confirm your installation.
  4. Pin the extension. You’ll be able to quickly access it in the browser.
    Site inspector in Piwik PRO
  5. Go to the site or app that you want to analyze with the site inspector.
  6. Click on the extension icon in the browser’s menu and click on Piwik PRO – Site inspector. You’ll see an authorization panel on the right.
  7. Click Authorize extension.

    Note: To authorize the extension, you need to have access to Analytics and the following site or app permission: owner, manage, edit & publish, edit or view.

  8. Done! You can start using a tracker debugger in the site inspector right away (available from 16.3.0). For a heatmap, clickmap and scrollmap, you need to start collecting data.
    Site inspector for Chrome by Piwik PRO

    Note: To see data in the site inspector, you need to have access to Analytics and the following site or app permission: owner, manage, edit & publish, edit or view.

Collect data for a heatmap and clickmap

Note: For versions below 16.8.0, use a custom code to collect data for heatmaps and clickmaps.

If you want to collect data for a heatmap and clickmap, you need to use our heatmap & clickmap tag. This tag records clicks on pages as custom events and sends them to Analytics. The site inspector can then access this data and show you heatmaps and clickmaps on your pages.

To add our heatmap & clickmap tag, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Navigate to Tags.
  3. Click Add a tag.
  4. Name the tag and select the following type: Heatmaps & clickmaps.
  5. Click Next.
  6. In Advanced tag settings, choose Consent type. Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.
  7. Respect opt-out and DNT is turned on by default. Leave it as is, if you want to respect visitors who set Do-Not-Track in their browsers, or visitors who opt out of tracking using our opt-out form.
  8. In Flight dates, set the date and time when the tag is fired.
  9. In Tag triggers, click Add a trigger or Choose existing trigger to set up a trigger for this tag.
    • For tracking all clicks on all pages, use a click trigger without conditions.
    • For tracking selected clicks, use a click trigger with conditions.
    Heatmap & clickmap tag

    Note: Only a click trigger can be used for a heatmap & clickmap tag.

  10. Click OK.
  11. Test your tag in debug mode.
  12. If everything works fine, click Publish.
  13. Done! Now data is collected. After about an hour, you’ll see it in the site inspector for Chrome.
    Site inspector for Chrome by Piwik PRO

Collect data for a scrollmap

Avaliable from 16.22.0

Piwik PRO collects scroll data automatically. You don’t need to set anything up to see scroll data in the site inspector. Just make sure that nobody turned off the option responsible for tracking page scrolls.

To check the page scroll tracking option, follow these steps:

  1. Go to Menu > Administration.
  2. Navigate to Sites & apps.
  3. Pick the site you want to check.
  4. Navigate to Data collection.
  5. In Page scrolling, the following option should be turned on: Measure scroll depth.
    Page scroll tracking in Piwik PRO

    Note: If you’re tracking page scrolls with your own custom events, we recommend removing them, otherwise scroll events will be tracked twice.

    Note: You can also use a manual scroll tracking, and then see such data in the site inspector for Chrome. But we recommend staying with the automatic method.

How to use the site inspector in Chrome

Now we’ll give you a quick tour of our site inspector.

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 by Piwik PRO

    Note: To see data in the site inspector, you need to have access to Analytics and the following site or app permission: owner, manage, edit & publish, edit or view.

  4. Choose dates and click Load overlays.
  5. Turn on Heatmap, Clickmap or Scrollmap.
    Site inspector for Chrome by 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.

    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. Available from 16.3.0 To see a tracker debugger with your ongoing session, click on the bug icon.
    Site inspector for Chrome by Piwik PRO
  7. To change settings, click on the setting wheel.
    Site inspector for Chrome by 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