Creating a Heatmap

Creating a heatmap is easy. The steps below explain how:

  1. Click on + New Heatmap on your heatmap dashboard. This will load the creating a heatmap page
  2. heatmap-dashboard-3

  3. Enter the heatmap name and select pageviews size the heatmap should record.
  4. Heatmap-create1

    The pageviews size determines for how many sessions TruConversion will track your page before it considers the report as complete.

  5. Enter URL you want to collect data from. If you wish to gather data from multiple pages, simply select the Starts with, Ends with, Contains or Regular expression match type.Heatmap-create2You can then optionally enter a Screenshot Page URL that will determine which page the screenshot will be taken of.
  6. View Heatmap Report In Live Mode
  7. By clicking this the heatmap report will overlay data points on live ste. First the mentioned URL will open then the heatmap report overlays data points.

    Sometimes when we load the site in an iframe to show the heat intensity on the page this keep on loading because X-Frame-Options is set to deny in your server configuration, which is not allowing us to load the report in an iframe. If you change this setting X-Frame-Options to SAMEORIGIN, then it will resolve the problem and you will be able to view the report.


    Please add the below line in your server configuration based on the server you have.This issue can be resolved if you allow X-Frame-Options allow with same origin.
    For Apache,
    Header set X-Frame-Options SAMEORIGIN
    For Nginx,
    add_header X-Frame-Options “SAMEORIGIN”;

    Alternatively: UnCheck this “VIEW REPORT IN LIVE MODE” and “SAVE” in heatmap configuration. Now by clicking the “View Report” the heatmap report will overlay data points on the screenshot taken at the time of campaign created.

  8. Set Trigger to start heatmap.
  9. Select Activation Status. Checking schedule will help you set future time/date for your heatmap campaign.
  10. Google Analytics Integration
  11. If you have Installed GA (Google Analytics) code at your site (manually not using Google Tag Manager) by clicking this checkbox TruConversion will Send scroll reach (percentage) as an event to Google Analytics.

    Remember: You need to add Google Analytics code manually at your site instead using GTM (Google Tag Manager).

  12. Create Heatmap.
    • If you change anything in webpage you must create new heatmap. But before changing the page you must download its heatmap reports before updating the page.
    • Our heatmap reports works on live site mean its overlay its data point on live site elements using Xpaths. When you change the base element the data point will remain there because they are appearing as overlay using xpath.