diff --git a/app/webpack/hotjar.js.erb b/app/webpack/hotjar.js.erb
new file mode 100644
index 00000000..c7e25f7c
--- /dev/null
+++ b/app/webpack/hotjar.js.erb
@@ -0,0 +1,6 @@
+import Hotjar from '@hotjar/browser';
+
+const siteId = "<%= ENV['HOTJAR_ID'] %>";
+const hotjarVersion = 6;
+
+Hotjar.init(siteId, hotjarVersion);
\ No newline at end of file
diff --git a/app/webpack/packs/application.js b/app/webpack/packs/application.js
index 0d8f75c5..81115c20 100644
--- a/app/webpack/packs/application.js
+++ b/app/webpack/packs/application.js
@@ -9,7 +9,6 @@ import Turbolinks from 'turbolinks';
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue/dist/vue.esm';
 
-import Hotjar from '@hotjar/browser';
 import SignIn from '../components/authentication/sign_in.vue';
 import CookieLaw from '../components/cookie_law/cookie_law.vue';
 import LeaveSite from '../components/leave_site/leave_site.vue';
@@ -20,13 +19,9 @@ Turbolinks.start();
 
 Vue.use(TurbolinksAdapter);
 
+import '../hotjar.js.erb'; // eslint-disable-line import/first
 import '../vue-rollbar.js.erb'; // eslint-disable-line import/first
 
-const siteId = process.env.HOTJAR_ID;
-const hotjarVersion = 6;
-
-Hotjar.init(siteId, hotjarVersion);
-
 document.addEventListener('turbolinks:load', () => {
   const components = [
     {