Review our list of reasons (ordered from most to least common) for this to happen and fixes for them below.
Note that we only officially support visual labeling in the Chrome browser. If you are running into an issue using a different browser, we recommend switching to Chrome.
If this is happening, you’ll usually see errors in your developer console. To check your developer console for these errors, complete these steps:
Step 1: Navigate to the Visual labeling page and enter your website URL. Two tabs will appear: the tab on your left will open your website, while the tab on your right is loading the visual labeling interface.
Step 2: On the tab containing your website, open the developer console by selecting Cmd + Opt + J on mac or Control + Shift + J on PC. Make sure you are on the ‘Console’ tab within the console.
Step 3: If you see red error messages like this:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT along with a reference to
cdn.heapanalytics.com, visual labeling may be blocked by an ad blocker, third party cookies, or an internal firewall.
To prevent ad blockers from blocking Heap, make sure that you allowlist
*.heapanalytics.com in all ad blockers. Another quick way to test if any ad blockers are preventing Heap from loading a page is to open your page in an incognito window.
Blocking 3rd party cookies
Using an Incognito Tab
Incognito tabs in Chrome block third-party cookies by default, which will always prevent visual labeling from loading. When testing in an incognito tab, be sure to allow third-party cookies by toggling the “Block third party cookies” setting OFF. This setting is present on any new incognito tab page.
Other types of content blockers
Some content blockers can prevent cookies from being sent to the server, regardless of whether the blocker is blocking Heap directly or not. If this is happening to you, in the Network Requests tab of the developer console, you should see a request containing
/login?redirect=%2Fjs%2Fved.js. To resolve this, try disabling or adjusting the settings on your content blocker to allow Heap.
Incorrect Heap snippet placement
The Heap snippet should be installed directly on the page just before the
</head> tag. If you are loading the snippet in the
<body>, it’s possible that the snippet isn’t getting loaded before visual labeling times out.
Typos in the Heap snippet
If you received the snippet copy/pasted into an email or another document, it’s easy for typographical elements of the snippet to get reformatted. For example, you may end up with curly double quotes instead of straight quotes, or + signs may have been stripped. When in doubt, copy/paste the snippet directly from the developer documentation into your app.
Content Security Policy (CSP)
If your Content Security Policy (CSP) is blocking visual labeling, you’ll usually see errors in your developer console saying that the browser
Refused to load the script https://heapanalytics.com/js/ved.js because it violates the following Content Security Policy directive. To fix this, use the snippet provided in the Content Security Policy section at the top.
Website is self-hosted on heap.js
Due to technical limitations, visual labeling won’t load properly on self-hosted heap.js sites.
You may encounter your login page when you try to access visual labeling on your product. This is because Heap isn’t installed on the login page for your website. Before trying to use visual labeling, log into your own website first.
We only support visual labeling for the latest version of Chrome on desktop. Mobile browsers are not supported. Other desktop browsers, including Firefox, Safari, Edge, and all others, are not supported.
If you are having any trouble with visual labeling on Chrome, you should check to make sure you are on the latest version of Chrome. For steps to do so, see Google’s support documentation.
If you’ve double-checked all of the reasons above and are still having trouble with visual labeling, visit our Get support page. You may be asked to provide full-screen screenshots of the developer console on both tabs, or a video of what you are experiencing.