CODEWITHSUNDEEP
javascripthtmlreactjsheap-analytics
Vibhor Sharma
Vibhor Sharma

Reputation: 145

Adding Heap Analytics code in React Project

I am trying to add heap analytics script in my react project but it keeps throwing this error "'heap' is not defined". And I cannot compile the project due to this error.

As far as I know, heap wants their code to run in <head></head> tags. But I can't figure out how to make a code run inside <head></head> in react. The rest of the scripts like GTM and FB pixel code is running fine.

Any help is appreciated.

Upvotes: 5

Views: 6586

Answers (4)

Christian Miljkovic
Christian Miljkovic

Reputation: 31

For some reason this isn't more clear on their website but if you check their docs here then you'll see that you just have to call window.heap.track() not just heap.track().

Also, you want the script as they mention in your index.html file at the bottom of the <head> element aka right before </head>

Upvotes: 3

Nick Pavlou
Nick Pavlou

Reputation: 21

Just call it off:

window.heap.identify('[email protected]', 'email');

Upvotes: 2

Felix
Felix

Reputation: 2691

If your're using webpack, you've got two options:

A) put your script in index.html and ask in your React-Scripts if the variables are defined B) Put the scripts in your webpack entries, like the following:

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

See webpack-entries for more information.

Upvotes: 0

Supritha Rao
Supritha Rao

Reputation: 26

You should be able to include the heap script under head tag as below (Set right path to script in place of yourHeapScriptPath)

<script type="text/javascript" src="yourHeapScriptPath.js"></script>

Upvotes: 1

Related Questions