Heap Analytics (Webflow Install)

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). 🥳