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.

If you’re comfortable with JavaScript, 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);
    }
  }
}

if (memberstack) {
  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);
    }
  }
}

if (memberstack) {
  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). 🥳