Merge branch 'feature/add-gtm-and-datalayer-event-to-trials-select' into 'master'

Update GTM to capture trial form saasTrialGroup event

See merge request gitlab-org/gitlab!77896

app/assets/javascripts/google_tag_manager/index.js

@@ -82,7 +82,7 @@ export const trackSaasTrialGroup = () => {
     return;
   }
 
-  const form = document.getElementById('new_group');
+  const form = document.querySelector('.js-saas-trial-group');
   form.addEventListener('submit', () => {
     pushEvent('saasTrialGroup');
   });

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

 import 'ee/trials/namespace_select';
+import { trackSaasTrialGroup } from '~/google_tag_manager';
+
+trackSaasTrialGroup();

ee/app/controllers/trials_controller.rb

@@ -26,6 +26,7 @@ class TrialsController < ApplicationController
   def select
     experiment(:trial_registration_with_reassurance, actor: current_user)
       .track(:render, label: 'trials:select', user: current_user)
+    push_frontend_feature_flag(:gitlab_gtm_datalayer, type: :ops)
   end
 
   def create_lead

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

@@ -13,7 +13,7 @@
         #progress-bar
       %h2.center= _('Create your group')
       %p= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.')
-      = form_for @group, url: users_sign_up_groups_path(form_params), html: { class: 'gl-show-field-errors card gl-w-full gl-p-4' } do |f|
+      = form_for @group, url: users_sign_up_groups_path(form_params), html: { class: 'gl-show-field-errors card gl-w-full gl-p-4 js-saas-trial-group' } do |f|
         = form_errors(@group)
         = render 'layouts/flash'
         .row

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

@@ -13,7 +13,7 @@
 
     = render 'errors'
 
-    = form_tag apply_trials_path(glm_params), method: :post do
+    = form_tag apply_trials_path(glm_params), method: :post, class: 'js-saas-trial-group' do
       - if show_trial_namespace_select?
         .form-group.gl-select2-html5-required-fix
           = label_tag :namespace_id, _('This subscription is for'), for: :namespace_id, class: 'col-form-label'

ee/spec/features/google_analytics_datalayer_spec.rb

@@ -87,6 +87,24 @@ RSpec.describe 'GitLab.com Google Analytics DataLayer', :js do
     end
   end
 
+  context 'on trial group select page' do
+    it 'tracks create group events' do
+      sign_in user
+      visit select_trials_path
+
+      evaluate_script('document.querySelector(".js-saas-trial-group").addEventListener("submit", e => e.preventDefault())')
+
+      fill_in 'new_group_name', with: group.name
+      find('#trial_entity_company').click
+      click_button 'Start your free trial'
+
+      data_layer = execute_script('return window.dataLayer')
+      last_event_in_data_layer = data_layer[-1]
+
+      expect(last_event_in_data_layer["event"]).to eq("saasTrialGroup")
+    end
+  end
+
   context 'on new registration groups page' do
     it 'tracks saasTrialGroup events in the dataLayer' do
       sign_in user

spec/frontend/google_tag_manager/index_spec.js

@@ -142,7 +142,7 @@ describe('~/google_tag_manager/index', () => {
       links: [{ cls: 'js-skip-trial', expectation: { event: 'saasTrialSkip' } }],
     }),
     createTestCase(trackSaasTrialGroup, {
-      forms: [{ id: 'new_group', expectation: { event: 'saasTrialGroup' } }],
+      forms: [{ cls: 'js-saas-trial-group', expectation: { event: 'saasTrialGroup' } }],
     }),
     createTestCase(trackSaasTrialProject, {
       forms: [{ id: 'new_project', expectation: { event: 'saasTrialProject' } }],