If you have not yet installed Heap, you'll find your snippet on your install page. In the snippet below, remember to replace YOUR_APP_ID with the ID of the environment to which you want to send data. You can find this ID within your Account Settings under the Project tab.


To get started with Heap, paste the following code snippet before your website's closing </head> tag:

<script type="text/javascript">
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};

Sensitive Data

If there's a sensitive element you don't want autocaptured, you can hide it from Heap by just adding the attribute heap-ignore. All descendant elements will also be ignored by Heap.

For example, no events triggered on the element <input type='text' heap-ignore='true'> will be captured by Heap.


Having trouble installing Heap? Here's a list of some typical things to look out for. If your issue isn't addressed here, please email us at

I can't get the Event Visualizer to work. Why?

Adblockers, Blocking 3rd party cookies, Internal Firewall

There are a few reasons this might happen. The most common is content or ad blockers. These extensions or plugins can prevent Heap from loading the JavaScript files we need for the Visualizer. If this is happening, you'll usually see errors in your Developer Console. They'll look something like this along with a reference to

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Make sure that you whitelist * in any and all ad blockers. A 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.

In the same way adblockers can prevent Heap JavaScript from loading, so can blocking 3rd party cookies in your browser, or even at a firewall. Check your browser settings, or with your systems administrator, to see if this is causing problems.

Incorrect Heap snippet placement

The Heap snippet should be installed directly on the page just before the </head> tag. If loading the snippet in the <body>, it's possible that the snippet isn't getting loaded before the Visualizer times out.

Typos in the Heap snippet

If you received the snippet copy/pasted into an email, or other document, it's easy for typographical elements of the snippet to get reformatted. For example, ending up with curly double quotes instead of straight quotes, or + signs getting stripped. If in doubt, copy/paste the snippet directly from the developer documentation for your app.


If you're using Cloudflare, it will 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

If this is happening, you'll usually see errors in your Developer Console saying that the browser Refused to load the script because it violates the following Content Security Policy directive.

To fix this, include these directives in your CSP for Heap's Visualizer to work correctly:

script-src *:// *:// 'unsafe-inline'; img-src *://; style-src *://; connect-src *://; font-src *://;

The first script-src is for the installation snippet and identify API (hence the two domains). img-src is for our collector, and the final three, style-src, connect-src, and font-src are for the Event Visualizer.

My snippet is installed but I'm not getting data. What gives?

Data Latency

We open your Heap dashboard once data from your users hits our servers so you're not faced with an empty page. Usually this happens in a matter of minutes, but sometimes it's longer. We call this latency. Normal latency is under 30 minutes. Anytime beyond this, please feel free to contact us at

Missing app_id

When copy/pasting the snippet, be sure you have code that includes your app_id in heap.load(). If you get the snippet from the install page after you sign up, or from our developer docs while logged in, this won't be problem. However, if you copy a version while logged out, you might end up with heap.load("YOUR_APP_ID") which won't work.

Incorrect app_id

If your Heap account holds more than one project or environment, make sure that the correct app_id is included in the <script> so that data is being sent to the correct place. To confirm the app_id in Heap, navigate to your Account Settings > Projects page. Each environment has an id in parentheses.

Double check that the Heap snippet here is the same as what's in app_id in the heap.load() call in the script on your site, or by typing heap.appid in the developer console.

Advanced Configurations

On the web, heap.load() can take an optional Javascript object as its second argument for additional configuration options. However, Heap's default settings cover most use cases, and implementing these settings can cause unintended behavior, so use them with caution! If you're unsure about correct usage, please reach out to


Setting the secureCookie option means user cookies in heap.js will only be transmitted via SSL. If your site is entirely SSL, Heap defaults to sending data over SSL, so you do not need to enable this setting. If your site is a mix of SSL and non-SSL pages, using secureCookie can cause users to be duplicated between the secure and insecure parts of the site, so avoid using this if you have any non-HTTPS pages.

heap.load("YOUR_APP_ID", {
      secureCookie: true


Setting the disableTextCapture option will prevent heap.js from capturing the text content of elements. By default, Heap does not capture the contents of input fields, but does capture text from other rendered page elements. For limited disabling of text capture, heap-ignore may be sufficient.

heap.load("YOUR_APP_ID", {
      disableTextCapture: true

Snapshots & disableTextCapture

If you enable disableTextCapture, Heap will automatically drop all Target Text and potentially remove the metadata required for specificity in event definitions. We recommend adding Snapshots in these cases where text collection is necessary.

Content Security Policy (CSP)

If you have a Content Security Policy, include these directives in your CSP for Heap to work correctly:

script-src 'unsafe-inline' 'unsafe-eval'; img-src; style-src; connect-src; font-src;

The first 'script-src' is for the installation snippet and identify API (hence the two domains). 'img -src' is for our collector, and the final three, 'style-src', 'connect-src', and 'font-src' are for the Event Visualizer.

Other custom needs

If you have Heap installed on a single domain with hundreds of different projects or environments, please email us at

Tracker Tech Specs

  • Load time: The Heap client-side script is hosted on Amazon AWS Cloudfront, a global CDN, which allows for extremely fast load times. The size of the script is minimal (less than 25kb).
  • Cross-browser testing: The Heap client-side data collection script is tested against all modern browsers, including mobile and desktop Chrome, mobile and desktop Safari, Firefox, and Internet Explorer 9+. Internet Explorer 8 is tested via version 11's compatibility mode.
  • Network impact: The Heap client-side script batches all autocaptured events and submits these requests to our servers every 2 seconds. This induces minimal network overhead, even for heavy usage applications.
  • Performance: Heap adds minimal CPU overhead (less than 0.1%), leaving application responsiveness virtually untouched.


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.