DEV Community

Victor De Grandis
Victor De Grandis

Posted on • Edited on

2

How to use Hotjar JavaScript triggers on Angular

JavaScript triggers are the most useful feature for using Hotjar HeatMaps in one page applications, because without that you can't create HeatMaps on dynamic content or modals, dropdowns, etc.
So i will show you how i made it work on an Angular project.
I'm making the assumption that you already have an Hotjar account and initialize a project.

Include Hotjar in your project

First we need to include the tracking code in our index.html

<!-- Hotjar Tracking Code for https://yourpage.com/ -->
<script>
   (function(h,o,t,j,a,r){
       h.hj = h.hj || function(){ ( h.hj.q = h.hj.q || []).push(arguments) };
       h._hjSettings = { hjid:xxxxxxx, hjsv:x };
       a = o.getElementsByTagName('head')[0];
       r = o.createElement('script'); r.async = 1;
       r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
       a.appendChild(r);
   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
Enter fullscreen mode Exit fullscreen mode

With that we already have the hj function on our window object.

Hotjar Service

Now my goal was to make the access to the hj function reliable and mantainable across the Angular aplication, so i made a service:

@Injectable()
export class HotjarService {
  public getInstance() {
    return window['hj'] = window['hj'] || this.getHotjarQueue(); 
  }

  public trigger(eventName: string) {
    try {
      this.getInstance()('trigger', eventName);
    } catch (err) {
      console.error(err);
    }
  }

  public vpv(url: string) {
    try {
      this.getInstance()('vpv', url);
    } catch (err) {
      console.error(err);
    }
  }

  private getHotjarQueue() {
    return function () {
      (window['hj']['q'] = window['hj']['q'] || []).push(arguments);
    };
  }
}
Enter fullscreen mode Exit fullscreen mode

Here we have the trigger function that allows us to register a new HeatMap, and the vpv function that register a new virtual page. The getInstance and the getHotjarQueue expose the window.hj if available to the service.

Conclusion

Making this little wrapper to the windows.hj we can make the use of Hotjar a lot more readable and mantainable in a big project. Using the function directly from the window object in frameworks as Angular is dangerous because of side effects and untraceable errors.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up