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.

This destination supports both cloud and direct modes

Heap supports cloud and direct modes. In general, we recommend that you use the cloud mode destination, so that you capture data in Customer.io and can easily debug your implementation, capture a history of events, and so on.

Getting started: cloud mode

1. Go to the Data Pipelines tab and click Connections.

2. Click Add New under Destinations.

3. Select the Heap destination.

4. (Optional) Select the sources that you want to connect to this destination. You can always connect sources to your destination later. We’ll only show you eligible sources.

5. Configure your destination.

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

   

   

6. Click Enable Destination.

Cloud mode actions

When you’re done setting up your destination, you can go to the Actions tab to see how we map source events to your destination.

Getting started: direct mode

1. Go to the Data Pipelines tab and click Connections.

2. Click Add New under Destinations.

3. Select the Heap destination.

4. (Optional) Select the sources that you want to connect to this destination. You can always connect sources to your destination later. We’ll only show you eligible sources.

5. Configure your destination.

   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.

   

   

6. Click Enable Destination.

Direct mode actions

When you’re done setting up your destination, you can go to the Actions tab to see how we map source events to your destination.

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:

analytics.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'}]"