diff --git a/package-lock.json b/package-lock.json index a14df64d5..07fce523a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "min-side-arbeidsgiver", "version": "0.1.0", "dependencies": { + "@amplitude/analytics-browser": "2.11.8", "@faker-js/faker": "8.4.1", "@grafana/faro-web-sdk": "1.3.6", "@navikt/aksel-icons": "^5.17.2", @@ -17,7 +18,6 @@ "@navikt/ds-icons": "3.4.3", "@navikt/ds-react": "^6.15.0", "@navikt/nav-dekoratoren-moduler": "2.1.6", - "amplitude-js": "^8.21.9", "fuzzysort": "^1.1.4", "immutable": "^4.3.6", "msw": "2.3.1", @@ -35,7 +35,6 @@ "@graphql-codegen/typescript-react-apollo": "^4.3.0", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", - "@types/amplitude-js": "^8.16.5", "@types/jest-axe": "^3.5.9", "@types/node": "^20.14.9", "@types/react": "18.3.3", @@ -76,6 +75,31 @@ "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==", "dev": true }, + "node_modules/@amplitude/analytics-browser": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@amplitude/analytics-browser/-/analytics-browser-2.11.8.tgz", + "integrity": "sha512-lFv8deROLwBfSlg92+r1NitWJ6BN45IKwpPLoixA0fZytScXEJqc0Gl5O+BY4qScbFECYt9PFKblhB+jC+IvPg==", + "dependencies": { + "@amplitude/analytics-client-common": "^2.3.4", + "@amplitude/analytics-core": "^2.5.3", + "@amplitude/analytics-remote-config": "^0.4.0", + "@amplitude/analytics-types": "^2.8.3", + "@amplitude/plugin-autocapture-browser": "^1.0.2", + "@amplitude/plugin-page-view-tracking-browser": "^2.3.4", + "tslib": "^2.4.1" + } + }, + "node_modules/@amplitude/analytics-client-common": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@amplitude/analytics-client-common/-/analytics-client-common-2.3.4.tgz", + "integrity": "sha512-3oqdvca5W4BPblTaxf60YRtlh2uC+N3rA99wowDAhTBJoMJJaauOBoXu5BbiQO1u8Zw/c8ymyr8E20+glyptUg==", + "dependencies": { + "@amplitude/analytics-connector": "^1.4.8", + "@amplitude/analytics-core": "^2.5.3", + "@amplitude/analytics-types": "^2.8.3", + "tslib": "^2.4.1" + } + }, "node_modules/@amplitude/analytics-connector": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/@amplitude/analytics-connector/-/analytics-connector-1.6.1.tgz", @@ -84,6 +108,31 @@ "@amplitude/experiment-core": "^0.10.0" } }, + "node_modules/@amplitude/analytics-core": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/@amplitude/analytics-core/-/analytics-core-2.5.3.tgz", + "integrity": "sha512-dvx3PS0adnHRS22VbuP9YtWg//bQGF2c61Pj5IYXVsemtRRHqiS7XJ860brk3WeQgOkqf3Gyc023DoYcsWGoNQ==", + "dependencies": { + "@amplitude/analytics-types": "^2.8.3", + "tslib": "^2.4.1" + } + }, + "node_modules/@amplitude/analytics-remote-config": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@amplitude/analytics-remote-config/-/analytics-remote-config-0.4.1.tgz", + "integrity": "sha512-BYl6kQ9qjztrCACsugpxO+foLaQIC0aSEzoXEAb/gwOzInmqkyyI+Ub+aWTBih4xgB/lhWlOcidWHAmNiTJTNw==", + "dependencies": { + "@amplitude/analytics-client-common": ">=1 <3", + "@amplitude/analytics-core": ">=1 <3", + "@amplitude/analytics-types": ">=1 <3", + "tslib": "^2.4.1" + } + }, + "node_modules/@amplitude/analytics-types": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/@amplitude/analytics-types/-/analytics-types-2.8.3.tgz", + "integrity": "sha512-HNmKVd0ACoi3xTi86xi+is7WgqKT78JA4fYLcM25/ckFkZ1zVCqD1AubaADEh26m34nJ3qDLK5Pob4QptQNPAg==" + }, "node_modules/@amplitude/experiment-core": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/@amplitude/experiment-core/-/experiment-core-0.10.0.tgz", @@ -92,42 +141,25 @@ "js-base64": "^3.7.5" } }, - "node_modules/@amplitude/types": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/@amplitude/types/-/types-1.10.2.tgz", - "integrity": "sha512-I8qenRI7uU6wKNb9LiZrAosSHVoNHziXouKY81CrqxH9xhVTEIJFXeuCV0hbtBr0Al/8ejnGjQRx+S2SvU/pPg==", - "engines": { - "node": ">=10" - } - }, - "node_modules/@amplitude/ua-parser-js": { - "version": "0.7.33", - "resolved": "https://registry.npmjs.org/@amplitude/ua-parser-js/-/ua-parser-js-0.7.33.tgz", - "integrity": "sha512-wKEtVR4vXuPT9cVEIJkYWnlF++Gx3BdLatPBM+SZ1ztVIvnhdGBZR/mn9x/PzyrMcRlZmyi6L56I2J3doVBnjA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/ua-parser-js" - }, - { - "type": "paypal", - "url": "https://paypal.me/faisalman" - } - ], - "engines": { - "node": "*" + "node_modules/@amplitude/plugin-autocapture-browser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@amplitude/plugin-autocapture-browser/-/plugin-autocapture-browser-1.0.3.tgz", + "integrity": "sha512-XUQWUAw9VqtJPlmOyWjnhsEspyVakd9LuSjVNtLjhwlWv+f/yZM1AAQVUdq/Os1+b5OptSgJQ2pPfRJJHZDXTw==", + "dependencies": { + "@amplitude/analytics-client-common": ">=1 <3", + "@amplitude/analytics-types": "^2.8.2", + "rxjs": "^7.8.1", + "tslib": "^2.4.1" } }, - "node_modules/@amplitude/utils": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/@amplitude/utils/-/utils-1.10.2.tgz", - "integrity": "sha512-tVsHXu61jITEtRjB7NugQ5cVDd4QDzne8T3ifmZye7TiJeUfVRvqe44gDtf55A+7VqhDhyEIIXTA1iVcDGqlEw==", + "node_modules/@amplitude/plugin-page-view-tracking-browser": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-2.3.4.tgz", + "integrity": "sha512-l7RS5gssG0BPYlgirV0NQ94EPzTOdDkp0z2jqU45D3DQAJXkoloUyw5lw/cbUXYwNulHZTG/BExcERfdvVWkLA==", "dependencies": { - "@amplitude/types": "^1.10.2", - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" + "@amplitude/analytics-client-common": "^2.3.4", + "@amplitude/analytics-types": "^2.8.3", + "tslib": "^2.4.1" } }, "node_modules/@ampproject/remapping": { @@ -6025,12 +6057,6 @@ "optional": true, "peer": true }, - "node_modules/@types/amplitude-js": { - "version": "8.16.5", - "resolved": "https://registry.npmjs.org/@types/amplitude-js/-/amplitude-js-8.16.5.tgz", - "integrity": "sha512-W73JfDpwDH4VijOGo+nVuQOqUCiqyEGGVdajU4ziWTLn27cn+QtFuFuBdlhCraIIrO52fDRO4NSOGkawtn77Jw==", - "dev": true - }, "node_modules/@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", @@ -6758,19 +6784,6 @@ "url": "https://github.com/sponsors/epoberezkin" } }, - "node_modules/amplitude-js": { - "version": "8.21.9", - "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-8.21.9.tgz", - "integrity": "sha512-d0jJH00wbXu7sxKtVwkdSXtVffjqdUrxuACKlnzP7jU5qt9wriXXMgHifdH5Oq+buKmyF8wKL9S02gAykysURA==", - "dependencies": { - "@amplitude/analytics-connector": "^1.4.6", - "@amplitude/ua-parser-js": "0.7.33", - "@amplitude/utils": "^1.10.2", - "@babel/runtime": "^7.21.0", - "blueimp-md5": "^2.19.0", - "query-string": "8.1.0" - } - }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -7258,11 +7271,6 @@ "readable-stream": "^3.4.0" } }, - "node_modules/blueimp-md5": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz", - "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==" - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -8083,14 +8091,6 @@ "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", "peer": true }, - "node_modules/decode-uri-component": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz", - "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==", - "engines": { - "node": ">=14.16" - } - }, "node_modules/dedent": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz", @@ -9236,17 +9236,6 @@ "node": ">=8" } }, - "node_modules/filter-obj": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz", - "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==", - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -13693,22 +13682,6 @@ "node": ">=6.0.0" } }, - "node_modules/query-string": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz", - "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==", - "dependencies": { - "decode-uri-component": "^0.4.1", - "filter-obj": "^5.1.0", - "split-on-first": "^3.0.0" - }, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -14250,7 +14223,6 @@ "version": "7.8.1", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", - "dev": true, "dependencies": { "tslib": "^2.1.0" } @@ -14572,17 +14544,6 @@ "integrity": "sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ==", "dev": true }, - "node_modules/split-on-first": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz", - "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/sponge-case": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/sponge-case/-/sponge-case-1.0.1.tgz", diff --git a/package.json b/package.json index 86403151d..e6e2a076b 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "homepage": "/min-side-arbeidsgiver", "type": "module", "dependencies": { + "@amplitude/analytics-browser": "2.11.8", "@faker-js/faker": "8.4.1", "@grafana/faro-web-sdk": "1.3.6", "@navikt/aksel-icons": "^5.17.2", @@ -13,7 +14,6 @@ "@navikt/ds-icons": "3.4.3", "@navikt/ds-react": "^6.15.0", "@navikt/nav-dekoratoren-moduler": "2.1.6", - "amplitude-js": "^8.21.9", "fuzzysort": "^1.1.4", "immutable": "^4.3.6", "msw": "2.3.1", @@ -31,7 +31,6 @@ "@graphql-codegen/typescript-react-apollo": "^4.3.0", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", - "@types/amplitude-js": "^8.16.5", "@types/jest-axe": "^3.5.9", "@types/node": "^20.14.9", "@types/react": "18.3.3", diff --git a/src/Pages/OrganisasjonerOgTilgangerProvider.tsx b/src/Pages/OrganisasjonerOgTilgangerProvider.tsx index dbfb4c677..a9259733d 100644 --- a/src/Pages/OrganisasjonerOgTilgangerProvider.tsx +++ b/src/Pages/OrganisasjonerOgTilgangerProvider.tsx @@ -11,6 +11,7 @@ import { Map, Set } from 'immutable'; import { useUserInfo } from '../hooks/useUserInfo'; import { ManglerTilganger } from './ManglerTilganger/ManglerTilganger'; import { SpinnerMedBanner } from './Banner'; +import { Identify } from '@amplitude/analytics-browser'; type orgnr = string; @@ -90,10 +91,11 @@ const useBeregnOrganisasjoner = (): Record | undefined setSystemAlert('UserInfoDigiSyfo', userInfo?.digisyfoError ?? false); if (userInfo !== undefined) { - amplitude.setUserProperties({ - syfotilgang: userInfo.digisyfoOrganisasjoner.length > 0, - buildTimestamp, - }); + amplitude.identify( + new Identify() + .set('syfotilgang', userInfo.digisyfoOrganisasjoner.length > 0) + .set('buildTimestamp', buildTimestamp) + ); } }, [userInfo]); diff --git a/src/utils/amplitude.ts b/src/utils/amplitude.ts index bf2fb9cab..a2a5af598 100644 --- a/src/utils/amplitude.ts +++ b/src/utils/amplitude.ts @@ -1,5 +1,10 @@ -import amplitude from 'amplitude-js'; +import * as amplitude from '@amplitude/analytics-browser'; +import { Types } from '@amplitude/analytics-browser'; import { gittMiljo } from './environment'; +import { Identify } from '@amplitude/analytics-types/lib/esm/event'; +import { EventOptions } from '@amplitude/analytics-types/lib/esm/base-event'; +import { AmplitudeReturn } from '@amplitude/analytics-types/lib/esm/amplitude-promise'; +import { Result } from '@amplitude/analytics-types/lib/esm/result'; const getApiKey = () => { return window.location.hostname === 'arbeidsgiver.nav.no' @@ -7,30 +12,52 @@ const getApiKey = () => { : '6ed1f00aabc6ced4fd6fcb7fcdc01b30'; }; -const createAmpltiudeInstance = () => { - const instance = amplitude.getInstance(); - - instance.init(getApiKey(), '', { - apiEndpoint: 'amplitude.nav.no/collect', - saveEvents: false, - includeUtm: true, - batchEvents: false, - includeReferrer: true - }); - - return instance; -} +type AmplitudeInstance = Pick; +const createAmpltiudeInstance = (): AmplitudeInstance => { + amplitude + .init(getApiKey(), undefined, { + serverUrl: 'https://amplitude.nav.no/collect', + useBatch: false, + }) + .promise.catch((error) => { + console.error('#MSA error initializing amplitude', error); + }); + return amplitude; +}; +const mockedAmplitude = (): AmplitudeInstance => ({ + logEvent: (eventInput: Types.BaseEvent | string, eventProperties?: Record) => { + console.group('Mocked amplitude-event'); + console.table({ eventInput, ...eventProperties }); + console.groupEnd(); + return { + promise: new Promise((resolve) => + resolve({ + event: { event_type: 'MockEvent' }, + code: 200, + message: 'Success: mocked amplitude-tracking', + }) + ), + }; + }, + identify(identify: Identify, eventOptions?: EventOptions): AmplitudeReturn { + console.group('Mocked amplitude-identify'); + console.table(identify); + console.groupEnd(); + return { + promise: new Promise((resolve) => + resolve({ + event: { event_type: 'MockIdentify' }, + code: 200, + message: 'Success: mocked amplitude-identify', + }) + ), + }; + }, +}); export default gittMiljo({ prod: () => createAmpltiudeInstance(), dev: () => createAmpltiudeInstance(), - other: () => ({ - logEvent: (event: string, data?: any) => { - console.log(`${event}: ${JSON.stringify(data)}`, {event, data}) - }, - setUserProperties:(userProps:object) => { - console.log(`set userprops: ${JSON.stringify(userProps)}`) - } - } as amplitude.AmplitudeClient ) + other: () => mockedAmplitude(), })();