Automatically pass a member's information into Heap and track every interaction retroactively.
What is Heap?
Heap.io gives you a complete dataset of every interaction with your product. Every click. Every tap. Every swipe.
Easy Install (Low Code)
The code below uses the Memberstack Extended library to help you integrate with Intercom as simply as possible.
Installation:
Add the following script to the BODY block in the custom code of your global site settings.
<script type="module" src="https://memberstack.github.io/memberstack-x/dist/memberstack-x.es.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const MSX = window.Msx
const HEAP_WORKSPACE_ID = "<workspace_id>"
let { heap } = MSX.plugins;
MSX.registerPlugins(({ member, hooks }) => ({
plugins: [
heap({
workspace_id: HEAP_WORKSPACE_ID ,
// use hooks.getField("<field-id>") to pass in custom fields!
Name: hooks.getField("first-name"),
}),
],
}));
});
</script>
💪 There's no need to supply member ID, Email, or Plan IDs. The plugin will automatically pass that data to Heap.
The code snippet above uses the Memberstack Extended (MSX) library. This library is a companion to your existing Memberstack script that helps you keep your Webflow code clean and concise. It also makes working with the Memberstack front-end API much simpler!
Implement from Scratch (For Advanced Users)
If you’re comfortable with JavaScript and prefer to implement Heap yourself (without the help of an abstraction library), you can follow the steps below.
Identify Logged In Members & Attach Basic User Properties
First, make sure you’ve added the Heap embed script the HEAD section of your global code scripts.
In the global BODY section, add the following snippet of code. Replace the userProperties
object with custom field IDs from your Memberstack account.
<script>
const memberstack = window.$memberstackDom;
function initHeap(member) {
if (member) {
try {
// user property object to send to heap
const userProperties = {
Memberstack_Id: member.id,
Name: member.customFields['name'], // must exist as custom field in your account
// use lowercase "email" key so heap recognizes it as a built in property
email: member.auth.email,
};
// identify current heap user with the memberstack id
heap.identify(member.id);
// attach user properties object above to heap user
heap.addUserProperties(userProperties);
} catch (e) {
console.log(e);
}
}
}
memberstack.getCurrentMember().then(({ data: member }) => {
// other 3rd party initialization functions can go here
initHeap(member);
});
</script>
Attaching Plan Info to User Properties
You can pull in a member’s plan data from Memberstack and attach it to a heap user session. By having a list of plan Ids, you can create user segments based on plan subscriptions.
Use the following snippet to attach plan details to your Heap user properties: (If you’re already using the example above, replace the entire snippet).
<script>
const memberstack = window.$memberstackDom;
function initHeap(member) {
if (member) {
try {
// get list of plan connections
const planConnections = member.planConnections;
// user property object to send to heap
const userProperties = {
Memberstack_Id: member.id,
Name: member.customFields['name'], // must exist as custom field in your account
// use lowercase "email" key so heap recognizes it as a built in property
email: member.auth.email,
// if plan connection array has items, convert to a csv of plan Ids
// we need to convert plan connection array to comma seperated values..
// ...bc heap user property objects only accept text or integer values
...(planConnections.length && {
Plans: planConnections.map((plan) => plan.planId).join(', '),
}),
};
// identify current heap user with the memberstack id
heap.identify(member.id);
// attach user properties object above to heap user
heap.addUserProperties(userProperties);
} catch (e) {
console.log(e);
}
}
}
memberstack.getCurrentMember().then(({ data: member }) => {
// other 3rd party initialization functions can go here
initHeap(member);
});
</script>
The user property object will look like the following:
heap.addUserProperties({
Memberstack_Id: "mem_....",
Name: "Nicolas",
email: "nicolas@memberstack.com",
Plans: "pln_cku4gsei0000209l2hj3fdb4l, pln_new-free-plan-1u100oco"
})
Now you can build a segment that uses the Plan property. For example, let’s say you have a plan called “Premium” with a plan ID of pln_cku4gsei0000209l2hj3fdb4l
. In Heap, you can set up a filter like this one below:
Call this segment “Premium Users’ and it will return all users subscribed to this plan (provided that this plan ID is listed in the Plans user property). 🥳
Comments
2 comments
I have tried to implement this.
Added my Heap ID to this section const HEAP_WORKSPACE_ID = "<workspace_id>"
It looks like it is passing name and Memberstack ID and Plan (see attached) but no email address?
Any thoughts?
Update: This code works for me:
Please sign in to leave a comment.