10

Heap Destination

About this integration

Heap captures user interactions, including clicks, taps, gestures, form submissions, and page views that you can leverage to gain a deeper understanding of your customers’ journeys through your website or product. This destination lets you use source data to identify your users, enrich their profiles with data, and send events that accurately represent their activities in your app. This data helps you gain a deeper understanding of your audience, so you can drive conversions, increase customer retention, and deliver better overall experiences to your users.

There are two versions of this integration

You’ll see two entries for Heap in our integration catalog, with one labeled Web. We typically recommend that you use the standard integration, the one not labeled “Web” when possible. The web version of this integration only works with our JavaScript client and does not pass data through Customer.io’s servers, which can make it hard to debug your integration, capture a history of events sent to the integration, and so on. Learn more about Web integrations.

Getting started

1. Go to Data & Integrations > Integrations and select the Heap entry in the Directory tab.

2. (Optional) Select the data sources that you want to connect to your outbound integration. You can always connect data sources later. We’ll only show you data sources that work with your integration.

3. Configure your integration.

   1. App Id: The app_id corresponding to one of your projects.

   

   

4. Click Enable Destination.

Actions

When you’re done setting things up, you can go to the Actions tab to see how we map incoming data to your integration.

Getting started: web destination

1. Go to Data & Integrations > Integrations and select the Heap entry in the Directory tab.

2. (Optional) Select the data sources that you want to connect to your outbound integration. You can always connect data sources later. We’ll only show you data sources that work with your integration.

3. Configure your integration.

   1. App Id: The app ID of the environment to which you want to send data. You can find this ID on the Projects page.

   2. Disable Text Capture: Setting to true will redact all target text on your website. For more information visit the heap docs page.

   3. Secure Cookie: This option is turned off by default to accommodate websites not served over HTTPS. If your application uses HTTPS, we recommend enabling secure cookies to prevent Heap cookies from being observed by unauthorized parties. For more information visit the heap docs page.

   4. Tracking Server: This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap docs page.

   5. Hostname: This is an optional setting used to set the host that loads heap-js. This setting is used when heapJS is self-hosted. In most cased this should be left unset. The hostname should not contain https or app id it will be populated like so: https://${hostname}/js/heap-${appId}.js. For more information visit the heap docs page.

   

   

4. Click Enable Destination.

Web destination actions

When you’re done setting things up, you can go to the Actions tab to see how we map incoming data to your integration.

Troubleshooting

Anonymous traffic from server-side sources doesn’t appear in Heap

Heap’s API rejects server-side events that don’t include a user_id. You’ll need to pass a user_id in event calls from server-side sources — even if you use the anonymous_id as the user_id — when you send server-side events to Heap.

Heap does not supported nested objects/arrays

Heap does not accept nested properties so we automatically flatten the incoming object and stringify nested values from your source calls before we send data to Heap.

For example, if you sent this event:

cioanalytics.track('Signed Up', {
  foo: {
    bar: {
      cheese: 'american',
      prop: [1, 2, 3],
      products: [{"A": "Jello"}, {"B": "Peanut"}]
    }
  }
});

We’d transform the properties for Heap like this:

foo.bar.cheese: 'american'
foo.bar.prop: '[1,2,3]'
foo.bar.products: "[{'A': 'Jello'},{'B': 'Peanut'}]"