Merge branch 'feature/add-gtm-events-to-simplified-groups-projects-form' into 'master'

Add combined groups/project GTM tracking

See merge request gitlab-org/gitlab!81035

app/assets/javascripts/google_tag_manager/index.js

@@ -260,3 +260,14 @@ export const trackAddToCartUsageTab = () => {
     });
   });
 };
+
+export const trackCombinedGroupProjectForm = () => {
+  if (!isSupported()) {
+    return;
+  }
+
+  const form = document.querySelector('.js-groups-projects-form');
+  form.addEventListener('submit', () => {
+    pushEvent('combinedGroupProjectFormSubmit');
+  });
+};

ee/app/assets/javascripts/pages/registrations/groups_projects/new/index.js

@@ -2,6 +2,8 @@
 
 import mountComponents from 'ee/registrations/groups_projects/new';
 import Group from '~/group';
+import { trackCombinedGroupProjectForm } from '~/google_tag_manager';
 
 new Group();
 mountComponents();
+trackCombinedGroupProjectForm();

ee/app/controllers/registrations/groups_projects_controller.rb

@@ -10,6 +10,9 @@ module Registrations
     skip_before_action :require_verification, only: :new
     before_action :set_requires_verification, only: :new, if: -> { helpers.require_verification_experiment.candidate? }
     before_action :require_verification, only: [:create, :import], if: -> { current_user.requires_credit_card_verification }
+    before_action only: [:new] do
+      push_frontend_feature_flag(:gitlab_gtm_datalayer, type: :ops)
+    end
 
     layout 'minimal'
 

ee/app/views/registrations/groups_projects/new.html.haml

@@ -27,7 +27,7 @@
 
         .tab-content.gitlab-tab-content.gl-bg-white.js-group-project-tab-contents
           #blank-project-pane.tab-pane.js-toggle-container.active{ role: 'tabpanel' }
-            = form_tag users_sign_up_groups_projects_path(form_params), class: 'gl-show-field-errors gl-w-full gl-p-4' do
+            = form_tag users_sign_up_groups_projects_path(form_params), class: 'gl-show-field-errors gl-w-full gl-p-4 js-groups-projects-form' do
               = form_errors(@group, type: "Group")
               = form_errors(@project, type: "Project")
               = render 'layouts/flash'

ee/spec/views/registrations/groups_projects/new.html.haml_spec.rb

@@ -42,4 +42,16 @@ RSpec.describe 'registrations/groups_projects/new' do
       is_expected.not_to match(/www.googletagmanager.com/)
     end
   end
+
+  describe 'expected DOM elements' do
+    before do
+      render
+    end
+
+    subject { rendered }
+
+    it 'contains js-groups-projects-form class' do
+      is_expected.to have_css('.js-groups-projects-form')
+    end
+  end
 end

spec/frontend/google_tag_manager/index_spec.js

 import { merge } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import {
+  trackCombinedGroupProjectForm,
   trackFreeTrialAccountSubmissions,
   trackNewRegistrations,
   trackSaasTrialSubmit,
@@ -200,6 +201,14 @@ describe('~/google_tag_manager/index', () => {
         },
       ],
     }),
+    createTestCase(trackCombinedGroupProjectForm, {
+      forms: [
+        {
+          cls: 'js-groups-projects-form',
+          expectation: { event: 'combinedGroupProjectFormSubmit' },
+        },
+      ],
+    }),
   ])('%p', (subject, { links = [], forms = [], expectedEvents }) => {
     beforeEach(() => {
       setHTMLFixture(createHTML({ links, forms }));