How to Install the Heap Code Snippet (Video)

  • 28 July 2022
  • 4 replies
  • 251 views
How to Install the Heap Code Snippet (Video)
Userlevel 1
Badge

Heap's code snippet is responsible for all of the magic that is autocapture. In just a few minutes, you can start tracking user behaviors in your site and start powering your product decisions with customer activity data. Today, I’ll show you how to put it in place.

 

 

What is the Heap code snippet?

The snippet is a single piece of JavaScript code that tracks every time a user clicks, swipes, fills in a form, visits a page, adds an item to a cart…and much, much more.

Where does the Heap code snippet live?

The snippet is placed at the top of every page in your site in the <head> tag of those pages. This is done by updating the HTML directly on your site or by using Heap’s Third Party Installations. Check out our Help Center for standard installation guide and the full list of our supported third party installations .

 

Did these steps help? What do you recommend others do to make it easier? Add it in the comments below.

 

 

". "


4 replies

Badge

Hi, does heap retroactively capture events? Say I put heap tracking on a site and want to get the UTM source of people who landed on it before Heap was inputted. 

Userlevel 3
Badge +3

Hi, does heap retroactively capture events? Say I put heap tracking on a site and want to get the UTM source of people who landed on it before Heap was inputted. 

Great question! Heap does not capture events from before the Heap snippet was added to your code, it can only capture data after you install Heap. Does that answer your question?

Badge

Does this have to be put in the Head tag? Or can it be loaded at the end of the body tag to prevent blocking...

Userlevel 4
Badge +2

Hi Shekhar!

Great question. It’s not required that Heap is installed in the <head> tag, but it’s our recommendation for data capture performance. There are reasons you may want to install any analytics script at the end of <body>, especially if it unblocks the script. Another reason to install at bottom of <body> is when you want to ensure that Heap loads after experiment data that Heap is capturing. For instance, if you load A/B data in a frontend object and want to capture that context in Heap, it’s critical that the A/B context is loaded before Heap. 

There is one-size-fits-all answer to the question, but there’s generally no harm installing in <body>.

Reply