Use snowplow for user error reporting in trial

Notifies about errors user's face through snowplow events

app/assets/javascripts/tracking.js

@@ -111,4 +111,6 @@ export function initUserTracking() {
   if (opts.linkClickTracking) window.snowplow('enableLinkClickTracking');
 
   Tracking.bindDocument();
+
+  document.dispatchEvent(new Event('SnowplowInitialized'));
 }

ee/app/assets/javascripts/pages/trials/apply/index.js

 import 'ee/pages/trials/namespace_select';
+import 'ee/trials/track_trial_user_errors';

ee/app/assets/javascripts/pages/trials/create_lead/index.js

 import 'ee/pages/trials/country_select';
+import 'ee/trials/track_trial_user_errors';

ee/app/assets/javascripts/trials/track_trial_user_errors.js

+import Tracking from '~/tracking';
+
+export default function trackTrialUserErrors() {
+  const flashText = document.querySelector('.trial-errors .flash-text');
+
+  if (flashText) {
+    const errorMessage = flashText.textContent.trim();
+
+    if (errorMessage) {
+      Tracking.event('trials:create', 'create_trial_error', {
+        label: 'flash-text',
+        property: 'message',
+        value: errorMessage,
+      });
+    }
+  }
+}
+document.addEventListener('SnowplowInitialized', trackTrialUserErrors);

ee/app/views/trials/_errors.html.haml

 - if show_trial_errors?(@namespace, @result)
-  .flash-container
+  .flash-container.trial-errors
     .flash-alert.text-center
       = _('We have found the following errors:')
       .flash-text

ee/changelogs/unreleased/119085-using-snowplow-for-red-error-banner-reporting.yml

+---
+title: Use snowplow for user error reporting in trial
+merge_request: 24430
+author:
+type: added

ee/spec/frontend/trials/track_trial_user_errors_spec.js

+import { mockTracking } from 'helpers/tracking_helper';
+import trackTrialUserErrors from 'ee/trials/track_trial_user_errors';
+
+describe('trackTrialUserErrors', () => {
+  let spy;
+
+  describe('when an error is present', () => {
+    const errorMessage = 'You cannot have multiple trials';
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <div class="flash-container trial-errors"
+        .<div class="flash-alert.text-center">
+            We have found the following errors:
+            <div class="flash-text">
+              ${errorMessage}
+           </div>
+         </div>
+      </div>
+    `;
+      spy = mockTracking('trials:create', document.body, jest.spyOn);
+    });
+
+    it('tracks the error message', () => {
+      trackTrialUserErrors();
+
+      expect(spy).toHaveBeenCalledWith('trials:create', 'create_trial_error', {
+        label: 'flash-text',
+        property: 'message',
+        value: errorMessage,
+      });
+    });
+
+    it('tracks the error message when snowplow is initialized', () => {
+      document.dispatchEvent(new Event('SnowplowInitialized'));
+
+      expect(spy).toHaveBeenCalledWith('trials:create', 'create_trial_error', {
+        label: 'flash-text',
+        property: 'message',
+        value: errorMessage,
+      });
+    });
+  });
+
+  describe('when no error is present', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div id="dummy-wrapper-element">
+        </div>
+    `;
+    });
+
+    it('does not track the any error message', () => {
+      trackTrialUserErrors();
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+});