Home Data Types Events I can’t get visual labeling (web) to work. Why?

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

I can’t get visual labeling (web) to work. Why?

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.

Ad Blockers

If you are using an ad blocker, it can prevent Heap from loading the JavaScript files we need for visual labeling.

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

Blocking third party cookies in your browser can also prevent Heap’s JavaScript from loading. If you are blocking third party cookies, use the steps above to check the developer console for errors. If this appears to be the cause, check your browser settings, or reach out to your systems administrator, to update these settings.

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.

Internal Firewall

Using an internal firewall can also prevent Heap’s JavaScript from loading. If you are using a firewall, use the steps above to check the developer console for errors. If this appears to be the cause, check your browser settings, or reach out to your systems administrator to update your firewall settings.

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.

Rocketscript

If you’re using Cloudflare, it’ll try to load JavaScript with Rocketscript, which compresses, concatenates, and defers any JavaScript on your web pages. It also prevents the Heap snippet from loading properly. If you are encountering this issue, see this Cloudflare thread for steps on turning Rocketscript off for Heap.

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.

Website Login

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.

Browser Compatibility

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.

Other

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.