Heap | Bi-directional

James Thompson
Created: 19 March 2020 11:44
Updated: 17 April 2020 16:48

Heap is a product analysis tool that will let you use data from events on your website to improve your product experience.

We have two ways you can integrate with Heap, sending SessionCam data to Heap and sending Heap data to SessionCam. Below are two examples of some data you can send but much more can be added.

The benefits of this integration are

You can go directly to a SessionCam recording from inside the Heap dashboard
You can filter recordings inside SessionCam for people that match the Heap user identifiers

Examples:

Sending Data to Heap

We can send the SessionCam Session ID to Heap through the Heap api, eg.

heap.addEventProperties({'Logged In': 'true', 'Payment Plan': 'Free'});

The add event properties method adds the values to all Heap events. This will allow us to add a link to a SessionCam session for every user journey

Sample Code

The following code can be added to your site (after the SessionCam tag and Heap tag) to enable this functionality

scsessionstarted = function(sc) {
  if (typeof heap != 'undefined') {
     heap.addEventProperties({'SessionCam Recording': 'https://console.sessioncam.com/Console/Recordings/PlaybackSession?sessionId=' + sc.sessionId
    });
  };
}
if (!window.sessioncamConfiguration) {
  window.sessioncamConfiguration = new Object();
}
sessioncamConfiguration.notifications = [{
  event: 'session/started',
  listener: scsessionstarted
}];

This code uses: Heap addEventProperties SessionCam sessionId and the notifications callback function

Sending Data to SessionCam

We can pull the Heap user ID/identity to SessionCam through a Custom Variable.

As mentioned in the Heap docs, the userId can only be used with anonymous users and the identity with identified users, please view this link for more information: https://docs.heap.io/docs/using-identify

Here is some example code that will set a Custom Variable called ‘Heap User Id’. This will either be the value you have set for identified users or if this doesn’t exist it will be the value for anonymous users

Sample Code

Add this code after your SessionCam tag and your Heap tag to send the Heap User Id/identity as a Custom Variable in SessionCam

if (!window.sessioncamConfiguration) window.sessioncamConfiguration = new
Object();
if (!window.sessioncamConfiguration.customDataObjects) window.sessioncamConfiguration.customDataObjects = [];
//check if Heap exists
if (typeof heap != 'undefined') {
  var item;
  //if identity is set use that, otherwise use the anonymous userId
  if (heap.identity) {
    item = {
      key: "Heap User Id",
      value: heap.identity
    };
  } else if (heap.userId) {
    item = {
      key: "Heap User Id",
      value: heap.userId
    };
  }
  //send the value
  if (item) {
    window.sessioncamConfiguration.customDataObjects.push(item);
  }
}

This code uses:

Heap heap.userId and heap.identity

SessionCam sessioncamConfiguration.customDataObjects

You can also use the Heap Identify method with this code, there is more information on how to do this here: https://docs.heap.io/docs/using-identify