Web Installation

Base Installation

To get started with Heap, paste the following code snippet before your website’s closing </head> tag. When using this snippet, remember to replace YOUR_APP_ID with the app ID of the environment to which you want to send data. You can find this ID on the Projects page.

<script type="text/javascript">   
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};   
heap.load("YOUR_APP_ID"); 
</script>

Note that heap.js is always loaded over SSL.

❗️

If you’re installing Heap on both production and staging versions of your site, be sure to use the app ID that corresponds to the environment in Heap you want to send data to. If you send data to the wrong environment, it will pollute the data in that environment.

Content Security Policy (CSP)

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

script-src https://cdn.heapanalytics.com https://heapanalytics.com 'unsafe-inline' 'unsafe-eval'; img-src https://heapanalytics.com; style-src https://heapanalytics.com; connect-src https://heapanalytics.com; font-src https://heapanalytics.com;

Ignoring Sensitive Data and PII

Target Text Autocapture toggle

Admins can control the capture of sensitive information that lives on the target text of elements by turning on the Target Text Autocapture toggle on the Account > Manage > Privacy & Security page.

Please note that disabling target text entirely might make defining events more difficult. Also, if you have this setting enabled while using the APIs listed below (e.g. disableTextCapture), then the most privacy-conscious setting will win.

Precise data redaction via Heap Redact

You can redact a page title or an element’s target text by using data-heap-redact-text. The underlying interactions will still be captured (ex. pageview, click) but the sensitive parts will be replaced by *** in your Heap dataset before it leaves the browser.

Code snippet for redacting a page title:

<html>
  <head>
    <title data-heap-redact-text='true'>Page Title</title
  </head>
...
<html>

Code snippet for redacting the text of an element:

<div data-heap-redact-text='true'>
  Social Security Number
</div>

You can redact sensitive data attributes by using data-heap-redact-attributes. The content of these attributes will be redacted before it leaves the browser.

If sensitive data lives in an element’s target text, attribute, or in a page title, you can hide it from Heap by adding the attribute data-heap-redact. The underlying interaction will still be captured (ex. click) but the sensitive part will be replaced by *** in your Heap dataset before it leaves the browser.

Code snippet for redacting sensitive data living in an attribute:

<div data-heap-redact-attributes='attr1,attr2'>
    <div>
      <p id='customer info' attr1='something sensitive' attr2='something even more sensitive' attr3='completely safe'>Customer Profile</p>
    </div>
</div>

For more information on Heap's data privacy options, see How do I use Heap to comply with data privacy legislation?

Global data redaction via Disabling Text Capture

If you wish to redact the text content of elements on all pages (not locally), then you can set disableTextCapture. disableTextCapture will redact all target text on your website. We recommend adding Snapshots when text collection is necessary.

heap.load("YOUR_APP_ID", {
    disableTextCapture: true
});

For more information on Heap's data privacy options, see How do I use Heap to comply with data privacy legislation?

📘

heap-ignore has been replaced by Heap Redact but is still fully supported. By adding heap-ignore to an element, you exclude an element from being tracked in its entirety, not just the sensitive part(s).

Troubleshooting

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 [email protected].

📘

Browser Compatability

We recommend using Heap in Chrome. We only support the Event Visualizer 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.

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

Review our list of common reasons for this to happen and fixes for them below.

Ad Blockers

The most common reason for this to occur is if you are using an ad blocker. These extensions or plugins can prevent Heap from loading the JavaScript files we need for the Event Visualizer.

If this is happening, you’ll usually see errors in your developer console. To check your developer console for these errors, complete these steps:

  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.

  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.

  1. 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

Blocking 3rd party cookies in your browser can also prevent Heap’s JavaScript from loading. If you are blocking 3rd 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.

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 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.

Rocketscript

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 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.

Other

If you’ve double-checked all of the reasons above and are still having trouble with the Event Visualizer, reach out to [email protected] with full-screen screenshots of the developer console on both tabs, or a video of what you are experiencing.

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 [email protected].

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 a 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 Account > Manage > Projects then click on the project you need the app ID for. The ID will be listed under the environments section.

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.

For full steps to use the Event Visualizer for web, review the web platform section of our Event Visualizer guide.

I see above-normal session counts, users with only single sessions, or sessions with single pageviews.

In early 2020, most major browsers rolled out a change to the default value of the cookie attribute sameSite, which affects the way that browsers consider cookies, especially in the context of iframes. Spikes in session counts, many new single-session users, or users that have many sessions containing a single pageview are all possible symptoms of Heap’s JavaScript library loading in iframes, or on pages containing iframes, without setting the correct sameSite cookie attribute value. For more details, review the iframes and secureCookie sections under Advanced Configurations below.

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 [email protected].

iframes

If your site incorporates iframes, or your product is served via an iframe you control, the pages on your site and in the iframes must be loaded securely (via HTTPS, not HTTP), and you must have the secureCookie flag set to true in your Heap load snippet. Refer to the secureCookie section below for sample syntax.

secureCookie

You can enable the secureCookie option by turning on the toggle on Manage > Account > Privacy & Security.

We recommend the use of secure cookies if your website exclusively uses HTTPS. If you do not set this option and your app is loaded within any third-party context (such as an iframe), duplicate sessions will be generated within Heap. To learn more about this behavior, please refer to this blog post outlining recent cookie attribute updates.

You can also enable this setting using the following code snippet.

heap.load("YOUR_APP_ID", {
    secureCookie: true
});

disableTextCapture

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
});

For more information on Heap's data privacy options, see How do I use Heap to comply with data privacy legislation?

📘

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.

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 additional customization needs that aren’t covered in this guide, please email us at [email protected].

Tracker Tech Specs

  • Event size: The maximum request size for web is 4000 characters.
  • 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 50kb). However, if you use Snapshots, your script size will be substantially increased.
  • 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+.
  • 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.

Updated a day ago

Web Installation


Suggested Edits are limited on API Reference Pages

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