Review our list of common reasons for this to happen and fixes for them below.
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 Event Visualizer and enter your website URL. Two tabs will pop up: the tab on your left will open your website, while the tab on your right is loading the Event Visualizer.
Step 2: On the tab containing your website, open the developer console by selecting Cmd + Opt + J on mac or Cmd + 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, the Event Visualizer may be being blocked by an ad blocker, 3rd party cookies, or an internal firewall.
To prevent ad blockers from blocking Heap, make sure that you whitelist
*.heapanalytics.com in any and all ad blockers. Another quick way to test if any ad blockers are preventing Heap to load on a page is to open your page in an incognito window.
Blocking 3rd party cookies
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 the Event Visualizer 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
If your Content Security Policy is blocking the Visualizer, 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, the Event Visualizer will not load properly on self-hosted heap.js sites.
If you’ve double-checked all of the reasons above and are still having trouble with the Event Visualizer, reach out to email@example.com with full-screen screenshots of the developer console on both tabs, or a video of what you are experiencing.