Google Tag Manager (GTM) Installation

Like any script, Heap can be installed via Google Tag Manager, or GTM for short. Because of the way GTM works, we strongly recommend setting the highest priority for Heap to be loaded.

To install, add the Heap snippet as a custom HTML tag and set it to fire on All Pages.

<script type="text/javascript">   
  window.heapReadyCb=window.heapReadyCb||[],window.heap=window.heap||[],heap.load=function(e,t){window.heap.envId=e,window.heap.clientConfig=t=t||{},window.heap.clientConfig.shouldFetchServerConfig=!1;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://cdn.us.heap-api.com/config/"+e+"/heap_config.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(a,r);var n=["init","startTracking","stopTracking","track","resetIdentity","identify","getSessionId","getUserId","getIdentity","addUserProperties","addEventProperties","removeEventProperty","clearEventProperties","addAccountProperties","addAdapter","addTransformer","addTransformerFn","onReady","addPageviewProperties","removePageviewProperty","clearPageviewProperties","trackPageview"],i=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);window.heapReadyCb.push({name:e,fn:function(){heap[e]&&heap[e].apply(heap,t)}})}};for(var p=0;p<n.length;p++)heap[n[p]]=i(n[p])};
  heap.load("YOUR_APP_ID"); 
</script>

📘

If you have not yet installed Heap, you’ll find your snippet on our install page. If using the snippet above, remember to replace YOUR_APP_ID with the ID of the environment to which you want to send data. You can find this ID on the **Account > Manage > Projects** page.

GTM waits until the page fully loads to load its scripts. So if a user navigates away from the page before Heap loads, that data point will be lost. If you are using our client-side API, calls that are normally stubbed before the page loads, like calls to identify or addEventProperties, can get dropped.

🚧

Not seeing any data?

Make sure you published the container after saving the trigger. If you continue to experience issues after saving, reach out to [email protected].

🚧

Encountering a "heap.push is not a function" error?

Make sure that the Heap script is only getting loaded once. You may have to configure the tag to fire only "Once per page" in the tag's advanced settings.