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.
On
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.
On
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>
You should be able to include the heap script under head tag as below (Set right path to script in place of yourHeapScriptPath)