Triggers are not working on Angular Stepper

[IvanSGurdian]

I'm not sure if this is a bug or if I'm missing something on my app's setup; but I'm not able to make hotjar work correctly.

I imported the main module and the router module in my AppModule ;

I also added the hotjar script to my index.html file, I'm not clear if this is something I should do, there's no mention of it in the package documentation, I'm just guessing it is needed as well as the package. Now if I try to use the hjService it won't record anything; I'm using an Angular Material Stepper in one of my pages, and I'm trying to set a hotjar trigger on each step to record the activity on a that particular step, like this:

But I'm not getting any recording.

Wanted to be clear on what I should do to use this package correctly. Do I need to import the NgxHotjarRouterModule? Do I need to add the hotjar script to the head of my index file?

package.json

{
  "name": "opti-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "watch": "gulp watch",
    "dev": "gulp development",
    "prod": "gulp production",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.13",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/google-maps": "^9.0.0-rc.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@ckeditor/ckeditor5-angular": "^1.1.2",
    "@gvreddy04/ckeditor5-build-classic-all-features": "^16.11.0",
    "@mdi/font": "^3.9.97",
    "@ngu/carousel": "^1.5.5",
    "@swimlane/ngx-charts": "^13.0.2",
    "@swimlane/ngx-datatable": "^15.0.2",
    "@types/googlemaps": "^3.39.2",
    "@types/html2canvas": "0.0.35",
    "@types/jspdf": "^1.3.2",
    "angular-fusioncharts": "^3.0.3",
    "bootstrap": "^4.3.1",
    "file-saver": "^2.0.2",
    "fusioncharts": "^3.14.1",
    "google-libphonenumber": "^3.2.6",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.0.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.1",
    "html2pdf.js": "^0.9.1",
    "intl-tel-input": "^14.1.0",
    "jquery": "^3.5.1",
    "jspdf": "^1.5.3",
    "material-design-icons": "^3.0.1",
    "ng-recaptcha": "^5.0.0",
    "ng2-pdf-viewer": "^6.1.2",
    "ng2-table": "^1.3.2",
    "ngx-bootstrap": "^5.2.0",
    "ngx-chips": "^2.1.0",
    "ngx-color-picker": "^8.2.0",
    "ngx-gauge": "^1.0.0-beta.11",
    "ngx-highlightjs": "^4.0.0",
    "ngx-hotjar": "^8.0.2",
    "ngx-intl-tel-input": "^2.3.1",
    "ngx-mat-select-search": "^2.0.0",
    "popper.js": "^1.16.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.8",
    "@angular/cli": "^8.3.18",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "^3.4.6",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.0",
    "dotenv": "^8.2.0",
    "gulp-file": "^0.4.0",
    "gulp-rename": "^1.4.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "^3.4.5"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "opti-frontend": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/opti-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/intl-tel-input/build/css/intlTelInput.css",
              "./node_modules/material-design-icons/iconfont/material-icons.css",
              "./node_modules/@mdi/font/css/materialdesignicons.css",
              "./node_modules/highlight.js/styles/github.css",
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/scss"
              ]
            },
            "scripts": [
              "./node_modules/jspdf/dist/jspdf.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "8mb",
                  "maximumError": "10mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "opti-frontend:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "opti-frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "opti-frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "opti-frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "opti-frontend:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "opti-frontend"
}

[maxandriani]

I'll check this as soon as possible, but in the middlewhile:

Do I need to import the NgxHotjarRouterModule? A. Only if you want to trigger route changes (page navigation).

Do I need to add the hotjar script to the head of my index file? A. No, NgxHotjarModule already create the header tag for you.

About the pageviews, Hotjar may take a while to show the page views in the report screen. Something about 24h. Did you checked on browser developer tools if you app is calling hotjar services? Like making requests to hojtar while you interact w/ your app...

[IvanSGurdian]

@maxandriani

1. I need hotjar to register every page change, so I guess I need it imported, thank you!

2. It didn't seem to be working when I didn't have the header tag (?), so I added it and then I started getting recordings.

3. I have three triggers setup on my hotjar, which I'm calling (as shown in the screenshot above) whenever I change steps on my stepper; I do notice now that sometimes I get hotjar service calls saying "is-empty" or a number, but sometimes I don't get any request, like these:

[rlmestre]

I'm having a similar issue where I don't get recordings unless I add their script to index.html. Hotjar traffic looks the same with or without it, but they only land in my Recordings if I use theirs. I imported NgxHotjarRouterModule for simplicity, and of course the required NgxHotjarModule. Should I open a separate issue?