feat: Try out amplitude engagement SDK (#5164)

Flagsmith · Mar 4, 2025 · e348826 · e348826
1 parent f760e4b
commit e348826
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.3",
+    "@amplitude/engagement-browser": "^0.0.5",
     "@amplitude/plugin-session-replay-browser": "^1.6.24",
     "@babel/core": "7.20.7",
     "@babel/plugin-proposal-class-properties": "^7.12.1",

diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react'
 import { matchPath } from 'react-router'
 import { Link, withRouter } from 'react-router-dom'
 import * as amplitude from '@amplitude/analytics-browser'
+import { plugin as engagementPlugin } from '@amplitude/engagement-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 import NavLink from 'react-router-dom/NavLink'
 import TwoFactorPrompt from './SimpleTwoFactor/prompt'
@@ -37,6 +38,7 @@ import HomeAside from './pages/HomeAside'
 import ScrollToTop from './ScrollToTop'
 import AnnouncementPerPage from './AnnouncementPerPage'
 import Announcement from './Announcement'
+import { plugin } from '@amplitude/plugin-session-replay-browser'
 
 const App = class extends Component {
   static propTypes = {
@@ -98,6 +100,7 @@ const App = class extends Component {
         defaultTracking: true,
         serverZone: 'EU',
       })
+      amplitude.add(engagementPlugin())
       const sessionReplayTracking = sessionReplayPlugin({
         sampleRate: 0.5,
         serverZone: 'EU',

diff --git a/frontend/web/project/api.js b/frontend/web/project/api.js
@@ -96,6 +96,21 @@ global.API = {
       amplitude.setUserId(id)
       const identify = new amplitude.Identify().set('email', id)
       amplitude.identify(identify)
+      if (typeof window.engagement !== 'undefined') {
+        window.engagement.boot({
+          integrations: [
+            {
+              track: (event) => {
+                amplitude.track(event.event_type, event.event_properties)
+              },
+            },
+          ],
+          user: {
+            user_id: id,
+            user_properties: {},
+          },
+        })
+      }
     }
     API.flagsmithIdentify()
   },