3

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.

Vibhor Sharma
  • 125
  • 1
  • 3
  • 6
  • Do you want to run functions from heap inside your react scripts? – Felix Jan 08 '18 at 11:43
  • @Felix yeah I want to run the Heap analytics script in the project, and that includes heap analytics' function – Vibhor Sharma Jan 08 '18 at 11:44
  • yes but do they need to run inside your react project? otherwise you could just insert them in the head tag – Felix Jan 08 '18 at 11:45
  • I want to insert that script in the head tag but I cant find that markup of head tag in the project. This script is being run from a component which gets added in the body. – Vibhor Sharma Jan 08 '18 at 11:57
  • Do you run webpack or anything alike which have an html-generator? otherwise there must be anywhere an html-document where you can simply add an head and your scripts. – Felix Jan 08 '18 at 12:00
  • there is index.html which is in public folder. And yes I do use webpack. – Vibhor Sharma Jan 08 '18 at 12:08
  • Then just put your script in there and ask in your scipts if the variable is defined before using them – Felix Jan 08 '18 at 12:16

4 Answers4

2

Just call it off:

window.heap.identify('random@myemail.com', 'email');
Nick Pavlou
  • 21
  • 2
2

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>

Christian Miljkovic
  • 21
  • 1
1

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>
Supritha Rao
  • 26
  • 1
  • but head tag in which file? index.js or index.html or do i have to create a new component that inserts that script in head tag. – Vibhor Sharma Jan 08 '18 at 12:13
  • Do you have root html element is index.html? If so, you should be able to add the script tag within head in index.html – Supritha Rao Jan 08 '18 at 19:34
  • 1
    Yes, this solution is working but if I am trying to add it directly in the footer component it is not working. Anyways this one worked and I added taht script as external js file in the index.html file in public folder. – Vibhor Sharma Jan 09 '18 at 11:17
0

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.

Felix
  • 2,531
  • 14
  • 25