Use Heap to monitor digital and marketing analytics

This tutorial shows you how to integrate Heap with Matrix, letting you monitor Heap’s digital and marketing analytics.

For instance, Matrix can easily integrate with Heap’s campaign management features (for example, analyze users' interactions with links sent through email, SMS, or push notifications by Heap on behalf of Matrix). Matrix can also integrate with Heap’s A/B testing testing features (for example, two variants of a Matrix page with a single change).

Before you start

For this tutorial, you will require:

  • A Heap account with at least the Admin organization role.

    For more information about Heap’s pricing plans, consult their pricing page. Users should also read Heap’s Privacy Policy and Terms of Use, as well as their help center.

  • A Matrix instance on which to configure Heap. You must have admin permissions granted on Matrix. must have admin permissions granted on this Matrix site, which is usually a Matrix Backend User with admin permissions granted at the top of the the site asset’s hierarchy.

Set up a Heap account

The assumption here is that you want to add another user in Heap to administer Heap for a Matrix site within your organisation.

If you want to administer Heap for this Matrix site, however, then you can skip to the next section.

  1. Sign in to Heap.

  2. Navigate to Account  Manager  Teammates

  3. Click on the Add teammates button at the top of the page.

  4. Complete the Email, Role, and Environment fields in the dialog box. The Email field can have multiple entries, separated by a comma.

  5. Select Send invites to send an invitation to all the email addresses supplied.

Set up a project in Heap

Heap lets you configure multiple projects for your organization, where a project contains configurations for a website on which to gather Heap digital and marketing analytics. Therefore, set up a Heap project for this Matrix website.

  1. Ensure you are signed in to Heap.

  2. Navigate to Account  Manage  Projects.

  3. Click on the Add project button at the top of the page.

  4. Complete the Project name, Access, and Environments fields in the new dialog box.

Set your Heap configuration in Matrix

  1. Ensure you are logged in to Matrix and have admin permissions.

  2. Edit the contents of Matrix’s <head> asset. This asset is usually within the Configuration  Design Assets  Design Nesters folder of your site’s asset tree.

    (Begin editing this asset by right-clicking Design Nesters and choosing Content from the menu.)

  3. Copy and paste the below code into an appropriate area of Matrix’s <head> asset.

    <script type="text/javascript"> window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"e".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0))),p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])}; heap.load("YOUR_APP_ID"); </script>
  4. On the Heap website, navigate to Account  Manage  Projects.

  5. Click on the name of the environment to which you want to send data.

  6. Copy the ID shown on the right-hand side of the page.

  7. Replace YOUR_APP_ID in the code sample in Step 3 with the ID you copied in Step 6.

  8. Select Save to save changes to the <head> asset.

Confirm Matrix and Heap are correctly configured

This procedure is designed to verify Heap’s integration with Matrix using a Heap test code snippet on one of the Matrix site’s pages.

After following this verification procedure, you can remove this Heap test code snippet.

  1. Ensure you are logged in to Matrix and have admin permissions.

  2. Edit the contents of Matrix’s home page asset. This type of page would typically be found within a Site  Standard page asset hierarchy in Matrix.

  3. Towards the end of this page, enter the following HTML elements to hold a JavaScript command:

    <script type="text/javascript"></script>
  4. Back on Heap’s Get Started  Quick Install page, copy the Track an event code snippet Heap.track("Video play"); and paste this within Matrix’s home page within the HTML element you added above :

    <script type="text/javascript">Heap.track("Video play");</script>
  5. Wait for between 5-10 minutes, and then preview this home page.

  6. Back in Heap’s Get Started  Quick Install page, select Check, and, if you see You are successfully sending data!, then Heap is successfully receiving data from Matrix.

    If this check is unsuccessful, repeat the previous step and continue.

  7. Remove this entire <script/> line from Matrix’s home page.