chore: Dynamically add/remove albacross (#2825)

docs/docs/deployment/hosting/locally-frontend.md

@@ -90,6 +90,7 @@ Current variables used between 'frontend/environment.js' and 'frontend/common/pr
 - `AMPLITUDE_API_KEY`: The Amplitude key to use for behaviour tracking.
 - `MIXPANEL_API_KEY`: Mixpanel analytics key to use for behaviour tracking.
 - `SENTRY_API_KEY`: Sentry key for error reporting.
+- `ALBACROSS_CLIENT_ID`: Albacross client ID key for behaviour tracking.
 - `STATIC_ASSET_CDN_URL`: Used for replacing local static paths with a cdn, .e.g https://cdn.flagsmith.com. Defaults to
   `/`, i.e. no CDN.
 - `BASE_URL`: Used for specifying a base url path that's ignored during routing if serving from a subdirectory.

frontend/api/index.js

@@ -110,6 +110,7 @@ app.get('/config/project-overrides', (req, res) => {
       name: 'hideInviteLinks',
       value: envToBool('DISABLE_INVITE_LINKS', false),
     },
+    { name: 'albacross', value: process.env.ALBACROSS_CLIENT_ID },
   ]
   let output = values.map(getVariable).join('')
   let dynatrace = ''

frontend/web/components/pages/HomePage.js

@@ -12,6 +12,8 @@ import Icon from 'components/Icon'
 import ErrorMessage from 'components/ErrorMessage'
 import Button from 'components/base/forms/Button'
 
+let controller = new AbortController()
+
 const HomePage = class extends React.Component {
   static contextTypes = {
     router: propTypes.object.isRequired,
@@ -27,6 +29,42 @@ const HomePage = class extends React.Component {
     }
   }
 
+  addAlbacross() {
+    EventTarget.prototype.oldAddEventListener =
+      EventTarget.prototype.addEventListener
+    window._nQc = Project.albacross
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.async = true
+    script.src = 'https://serve.albacross.com/track.js'
+    script.id = 'albacross'
+
+    EventTarget.prototype.addEventListener = function (
+      type,
+      listener,
+      options = false,
+    ) {
+      const parsedOptions =
+        typeof options == 'boolean' ? { capture: options } : options
+
+      EventTarget.prototype.oldAddEventListener.call(this, type, listener, {
+        signal: controller.signal,
+        ...parsedOptions,
+      })
+    }
+
+    document.body.appendChild(script)
+  }
+
+  removeAlbacross() {
+    controller.abort()
+    controller = new AbortController()
+    EventTarget.prototype.addEventListener =
+      EventTarget.prototype.oldAddEventListener
+    document.body.removeChild(document.getElementById('albacross'))
+    delete window._nQc
+  }
+
   componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const emailField =
@@ -35,10 +73,31 @@ const HomePage = class extends React.Component {
       if (emailField) {
         emailField.focus()
       }
+      if (
+        Project.albacross &&
+        this.props.location.pathname.indexOf('signup') !== -1
+      ) {
+        this.addAlbacross()
+      } else if (document.getElementById('albacross')) {
+        this.removeAlbacross()
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (document.getElementById('albacross')) {
+      this.removeAlbacross()
     }
   }
 
   componentDidMount() {
+    if (
+      Project.albacross &&
+      this.props.location.pathname.indexOf('signup') !== -1
+    ) {
+      this.addAlbacross()
+    }
+
     document.body.classList.remove('dark')
     if (document.location.href.includes('oauth')) {
       const parts = location.href.split('oauth/')
@@ -618,14 +677,15 @@ const HomePage = class extends React.Component {
                             </Card>
                             <Row className='justify-content-center'>
                               Have an account?{' '}
-                              <Link
-                                id='existing-member-btn'
-                                to={`/login${redirect}`}
+                              <Button
+                                theme='text'
+                                className='ml-1 fw-bold'
+                                onClick={() => {
+                                  window.location.href = `/login${redirect}`
+                                }}
                               >
-                                <Button theme='text' className='ml-1 fw-bold'>
-                                  Log in
-                                </Button>
-                              </Link>
+                                Log in
+                              </Button>
                             </Row>
                           </React.Fragment>
                         )}