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 destination, 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 destination, and so on. Learn more about Web destinations.

Getting started

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 sources that you can use with your destination.

5. Configure your destination.

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

   

   

6. Click Enable Destination.

Actions

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

Getting started: web destination

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 sources that you can use with your destination.

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.

Web destination actions

When you’re done setting up your integration, you can go to the Actions tab to see how we map incoming data to your outbound 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'}]"