*

*

0/500

Overlay Heatmaps

Overlay heatmap adds a layer with data of click, attention, and scroll on your web page in a browser.

How to see overlay heatmap for mobile devices?

Chrome

1.Open Overlay Heatmap.

2.Right-click anywhere on the web page and choose ‘Inspect Element‘.

3. In the Element panel, click ‘Show drawer’ to the right (1), and then ‘Emulation‘ (2). Click the phone icon if Emulation is disabled (3).

Switch device in Model dropdown-menu.

4.Select the device you like to display the web page in and click ‘Refresh‘ to reload the Heatmap.

Chrome Plugin

There are Plug-ins that can be installed on Chrome for faster switching between devices. Below we’ll explain how to install User-Agent Switcher.

  1. Click ‘Customize and control Google Chrome‘ and go to ‘More tools”–> ‘Extensions‘.

2.Click the ‘Get more extensions‘ link to enter Google Webstore. Search for “User-Agent Switcher for Chrome”. Click the ‘Free‘ button to download and install the plugin.

3.After the plugin has been installed, an icon will appear in the upper right corner of the browser, see the image below.

4. Clicking this icon will let you switch between various devices. Refresh the Heatmap after selecting a new device.

Firefox Addon (Plugin)

1.Open Firefox and go to ‘Tools‘ –> ‘Add-ons‘. Sometimes you have to press Alt key to make the toolbar visible.

2.Search for ‘Configuration Mania’ in the search bar and click ‘Install‘.

3.After the Add-on has been successfully installed, ‘Configuration Mania’ should now be visible in the dropdown tool bar. Go to ‘Tools‘ –> ‘Configuration Mania‘.

4.Locate User-Agent to the left and click ‘Preset‘ to change device. Exit Configuration Mania window and click ‘Refresh‘.

Safari

  1. Open Safari
  2. Click the Settings button in the upper right corner of the screen and locate ‘Preferences‘ in the drop-down-menu.

3. Click the ‘Advanced’ tab and check the box ‘Show Develop menu in menu bar‘.

4.  Exit the ‘Advanced‘ window and hit Alt key to display the toolbar. Go to ‘Develop‘ –> ‘User Agent‘ to switch device.

5.  Refresh the Heatmap.

 

How to take a screenshot from overlay heatmaps?

Chrome

To take a screenshot of the full page, install a screenshot plugin to your browser.

1.  Click ‘Customize and control Google Chrome‘ and go to ‘More tools‘ –> ‘Extensions‘.

2.  Click the ‘Get more extensions‘ link to enter Google Webstore. Search for “Awesome Screenshot: Capture & Annotate”. Click the ‘Free‘ button to download and install the plugin.

3.  After the plugin has been installed, an icon will appear in the upper right corner of the browser.

4.  Click this icon and choose ‘Capture entire page’.

Safari

Press the Alt key in Safari to display the toolbar. Go to ‘File’ and locate ‘Export to PDF’.

*You can also install a plugin called “Snippet”.

FireFox

1.Open Firefox and go to ‘Tools‘ –> ‘Add-ons‘. Sometimes you have to press Alt key to make the toolbar visible.

2.Search for “FireCaptor” in the search bar and click ‘Install‘.

3.After the Add-on has been successfully installed, FireCaptor should be visible in the top right of your browser. Click the icon to take a screenshot.

 

 

FAQs

There could be a few reasons to why you are unable to move the slider:

1. When there is no click data, it is not necessary to adjust the slider;

2. When all hot spots have a similar number of clicks, it is not necessary to adjust the slider (Overlay Click Heatmap);

3. When all areas of the page have the same idle time, it is not necessary to adjust the slider (Overlay Attention Heatmap);

How do I Hide/Show Overlay Heatmap?

Mouse over the top of the screen, just below the address bar and the toolbar should appear. In the toolbar,
Click ‘Hide’ to hide Overlay Heatmap or, Click ‘Show’ to see Overlay Heatmap.

How to Refresh Overlay Heatmap?

Click ‘Refresh’ in the toolbar.

I’ve changed the window size of my browser, and the Heatmap is no longer accurate!

After you’ve resized the web page, click ‘Refresh’ in the toolbar to adjust Overlay Heatmap for that page size.

How do I hide the toolbar?

Click the arrow icon to the right in the toolbar to hide the Overlay Heatmap toolbar.

How do I display the toolbar?

Mouse over the top of the screen, just below the address bar and the toolbar should appear.

Or, click the green arrow button in the top right of the screen.

What if my website has several slides under the same URL?

If the same web page has one more slider or slides to a new page when scrolling. Simply ‘Refresh’ Heatmap every time you switch to a new slide.

Can I apply Heatmaps to “Infinite scroll’ pages?

Yes! First, load the whole page by scrolling until you reach the very bottom of the page. Once the whole page has been loaded, click ‘Refresh’ in the toolbar to apply Heatmap.

How can I view a Heatmap for pages behind a login?

If you are going to a page behind a login, but it redirects you to the login screen, it will break the connection to Ptengine. After you’ve entered the login credentials and taken to the actual page you intended to visit at first, no Heatmap is displayed.

Method 1:

1. Open Overlay Heatmap to a page behind the login screen.

2. Because the login credentials are not saved on the computer, you are taken to a login screen. Enter and save your login credentials.

3. Go back to Ptengine and repeat step 1. You’ll now be taken directly to the web page as your login credentials are already saved.

Method 2:

1. Open Overlay Heatmap to a page behind the login screen.

2. Upon reaching the login page, copy the suffix of the URL, starting with a ‘?pt_xxxx‘, (marked in red).

Example of an Overlay Heatmap URL:

3. Enter your login credentials.

4. You should now have been redirected to the page you intended to visit at first. Paste the suffix part of the URL you copied in step two at the end of the current URL.

How do I apply Overlay Heatmap to the login page?

If you have saved your login credentials, you will often be redirected to a page behind the login. To apply Heatmap to the login page, first clear your cookies and then reload the web page.

Using Flash – Overlay Heatmap not visible?

Some Flash objects can sometimes cover the Overlay Heatmap, blocking it from view. In these cases, you can make the Flash object transparent by changing code.

Change (or add) the Flash object’s wmode to ‘transparent’.

<param name=”wmode” value=”transparent” />” or wmode=”transparent“,See image below: