How to use hotjar with ember ?

Question

I need to use hotjar for work, but i have some difficulties to set it up. The project is an ember project, and i have found this project to integrate hotjar : https://github.com/byrnedo/ember-hotjar

In this github page, it says : "in routes and controller you will have _hj.push available", but i can't manage to make it work and i can't find any information about how to set it up.

I added this in config/environment.js :

hotjar: {
  id: my-id
},

And in a route, if i do this :

console.log(this.get('_hj'))

I get this result in the console :

ƒ () {
    (window.hj.q = window.hj.q || []).push(arguments);
  }

Meaning that hotjar is successfully installed, but when i'm trying to something like :

this.get('_hj').push('trigger', 'hello_world');

An error appears saying :

Uncaught TypeError: this.get(...).push is not a function

Does anyone know how to make it work or if i'm making something wrong ?

Answer 1

Uncaught TypeError: this.get(...).push is not a function

Is a result of you attempting to call .push on a function. As in, from your console.log, we can see that this.get('_hj') is a function, and you attempted to call .push on it. You'd get the same error if you tried:

let x = function(){ }
x.push()

Anyway, let's get to the bottom of it. The addon has provided an initializer ember-hotjar that invokes:

import hj  from '../hotjar/main';
...
let h =  hj.create();
application.register('hotjar:main', h, {instantiate: false});
application.inject('controller', '_hj', 'hotjar:main');
application.inject('route',      '_hj', 'hotjar:main');

Whatever hotjar/main exports is used to create h. This is registered in the dependency injection container for ember with the key hotjar:main as a shared object (ie hotjar:main holds a reference to an already instantiated object and not a factory). Then, because of the inject, all routes and all controllers are getting access to said object via this._hj. Please see registration or the injections section of the guides for more information.

So now, we need to investigate the main.js function that is exporting hj

var  hj = window.hj = window.hj || function(){(window.hj.q=window.hj.q||[]).push(arguments)};

...

export default {
  create:  function () {
    return hj;
  }
};

this is assigning window.hj || function(){(window.hj.q=window.hj.q||[]).push(arguments)}; to both hj and window.hj, which ultimately means that in your controller, this._hj === function(){(window.hj.q=window.hj.q||[]).push(arguments)};

So having seen all of that, I'm not really sure what you're expecting push to do. I think you may just want this._hj('trigger', 'hello_world')? Best of luck