Add additional tracking for billings page

app/views/layouts/_snowplow.html.haml

 - return unless Gitlab::Tracking.enabled?
 
-- namespace = @group || @project&.namespace
+- namespace = @group || @project&.namespace || @namespace
 
 = javascript_tag do
   :plain

ee/app/assets/javascripts/subscriptions/new/store/actions.js

@@ -2,6 +2,8 @@ import Api from 'ee/api';
 import { PAYMENT_FORM_ID } from 'ee/subscriptions/constants';
 import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
 import activateNextStepMutation from 'ee/vue_shared/purchase_flow/graphql/mutations/activate_next_step.mutation.graphql';
+import Tracking from '~/tracking';
+import { addExperimentContext } from '~/tracking/utils';
 import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
@@ -9,6 +11,16 @@ import { trackCheckout, trackTransaction } from '~/google_tag_manager';
 import defaultClient from '../graphql';
 import * as types from './mutation_types';
 
+const trackConfirmOrder = (message) =>
+  Tracking.event(
+    'default',
+    'click_button',
+    addExperimentContext({
+      label: 'confirm_purchase',
+      property: message,
+    }),
+  );
+
 export const updateSelectedPlan = ({ commit, getters }, selectedPlan) => {
   commit(types.UPDATE_SELECTED_PLAN, selectedPlan);
   trackCheckout(selectedPlan, getters.confirmOrderParams?.subscription?.quantity);
@@ -202,15 +214,20 @@ export const confirmOrder = ({ getters, dispatch, commit }) => {
         };
 
         trackTransaction(transactionDetails);
+        trackConfirmOrder(s__('Checkout|Success: subscription'));
 
         dispatch('confirmOrderSuccess', {
           location: data.location,
         });
       } else {
+        trackConfirmOrder(data.errors);
         dispatch('confirmOrderError', JSON.stringify(data.errors));
       }
     })
-    .catch(() => dispatch('confirmOrderError'));
+    .catch((e) => {
+      trackConfirmOrder(e.message);
+      dispatch('confirmOrderError');
+    });
 };
 
 export const confirmOrderSuccess = (_, { location }) => {

ee/app/controllers/subscriptions_controller.rb

@@ -36,8 +36,10 @@ class SubscriptionsController < ApplicationController
 
   def new
     if current_user
+      @namespace = current_user.namespace
+
       experiment(:cart_abandonment_modal,
-        namespace: current_user.namespace,
+        namespace: @namespace,
         user: current_user,
         sticky_to: current_user
       ).run

ee/app/views/shared/_thanks_for_purchase_banner.html.haml

+- Gitlab::Tracking.event(body_data_page, 'render',
+                         label: 'purchase_confirmation_banner_displayed',
+                         user: current_user,
+                         namespace: @group)
+
 %section.gl-banner.gl-banner-introduction{ data: { uid: 'purchase_success_banner_dismissed' } }
   .gl-banner-illustration
     = image_tag('illustrations/illustration-congratulation-purchase.svg', alt: _('Successful purchase image'))

ee/app/views/subscriptions/new.html.haml

@@ -4,4 +4,9 @@
   = render "layouts/one_trust"
 = render "layouts/google_tag_manager_body"
 
+- Gitlab::Tracking.event(body_data_page, 'render',
+                         label: 'saas_checkout',
+                         user: current_user,
+                         namespace: @namespace)
+
 #js-new-subscription{ data: subscription_data(@eligible_groups) }

ee/spec/frontend/subscriptions/new/store/actions_spec.js

@@ -7,6 +7,7 @@ import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
 import activateNextStepMutation from 'ee/vue_shared/purchase_flow/graphql/mutations/activate_next_step.mutation.graphql';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import testAction from 'helpers/vuex_action_helper';
+import Tracking from '~/tracking';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as googleTagManager from '~/google_tag_manager';
@@ -537,57 +538,85 @@ describe('Subscriptions Actions', () => {
   });
 
   describe('confirmOrder', () => {
-    it('calls confirmOrderSuccess with a redirect location on success', async () => {
-      const response = { location: 'x' };
-      mock.onPost(confirmOrderPath).replyOnce(200, response);
+    describe('on success', () => {
+      const payload = { location: 'x' };
 
-      await testAction(
-        actions.confirmOrder,
-        null,
-        {},
-        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
-        [{ type: 'confirmOrderSuccess', payload: response }],
-      );
-    });
+      beforeEach(() => mock.onPost(confirmOrderPath).replyOnce(200, payload));
 
-    it('calls trackTransaction on success', async () => {
-      const spy = jest.spyOn(googleTagManager, 'trackTransaction');
-      const response = { location: 'x' };
-      mock.onPost(confirmOrderPath).replyOnce(200, response);
+      it('calls trackTransaction', async () => {
+        const spy = jest.spyOn(googleTagManager, 'trackTransaction');
 
-      await testAction(
-        actions.confirmOrder,
-        null,
-        {},
-        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
-        [{ type: 'confirmOrderSuccess', payload: response }],
-      );
+        await testAction(
+          actions.confirmOrder,
+          null,
+          {},
+          [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+          [{ type: 'confirmOrderSuccess', payload }],
+        );
+
+        expect(spy).toHaveBeenCalled();
+      });
+
+      it('calls tracking event', async () => {
+        const spy = jest.spyOn(Tracking, 'event');
 
-      expect(spy).toHaveBeenCalled();
+        await testAction(
+          actions.confirmOrder,
+          null,
+          {},
+          [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+          [{ type: 'confirmOrderSuccess', payload }],
+        );
+
+        expect(spy).toHaveBeenCalledWith('default', 'click_button', {
+          label: 'confirm_purchase',
+          property: 'Success: subscription',
+        });
+      });
     });
 
-    it('calls confirmOrderError with the errors on error', async () => {
-      mock.onPost(confirmOrderPath).replyOnce(200, { errors: 'errors' });
+    describe('on error', () => {
+      const errors = 'errors';
 
-      await testAction(
-        actions.confirmOrder,
-        null,
-        {},
-        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
-        [{ type: 'confirmOrderError', payload: '"errors"' }],
-      );
+      beforeEach(() => mock.onPost(confirmOrderPath).replyOnce(200, { errors }));
+
+      it('calls tracking event', async () => {
+        const spy = jest.spyOn(Tracking, 'event');
+
+        await testAction(
+          actions.confirmOrder,
+          null,
+          {},
+          [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+          [{ type: 'confirmOrderError', payload: '"errors"' }],
+        );
+
+        expect(spy).toHaveBeenCalledWith('default', 'click_button', {
+          label: 'confirm_purchase',
+          property: errors,
+        });
+      });
     });
 
-    it('calls confirmOrderError on failure', async () => {
-      mock.onPost(confirmOrderPath).replyOnce(500);
+    describe('on failure', () => {
+      beforeEach(() => mock.onPost(confirmOrderPath).replyOnce(500));
 
-      await testAction(
-        actions.confirmOrder,
-        null,
-        {},
-        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
-        [{ type: 'confirmOrderError' }],
-      );
+      it('calls tracking event', async () => {
+        const spy = jest.spyOn(Tracking, 'event');
+
+        await testAction(
+          actions.confirmOrder,
+          null,
+          {},
+          [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+          [{ type: 'confirmOrderError' }],
+        );
+
+        expect(spy).toHaveBeenCalledWith('default', 'click_button', {
+          label: 'confirm_purchase',
+          property: 'Request failed with status code 500',
+        });
+      });
     });
   });
 

ee/spec/views/subscriptions/groups/edit.html.haml_spec.rb

@@ -3,18 +3,33 @@
 require 'spec_helper'
 
 RSpec.describe 'subscriptions/groups/edit' do
+  let(:group) { Group.new }
+  let(:user) { User.new }
+
   before do
-    assign(:group, Group.new)
+    assign(:group, group)
 
     allow(view).to receive(:params).and_return(quantity: quantity)
     allow(view).to receive(:plan_title).and_return('Bronze')
     allow(view).to receive(:group_path).and_return('')
     allow(view).to receive(:subscriptions_groups_path).and_return('')
-    allow(view).to receive(:current_user).and_return(User.new)
+    allow(view).to receive(:current_user).and_return(user)
   end
 
   let(:quantity) { '1' }
 
+  it 'tracks purchase banner', :snowplow do
+    render
+
+    expect_snowplow_event(
+      category: 'subscriptions:groups',
+      action: 'render',
+      label: 'purchase_confirmation_banner_displayed',
+      namespace: group,
+      user: user
+    )
+  end
+
   context 'a single user' do
     it 'displays the correct notification for 1 user' do
       render

locale/gitlab.pot

@@ -7348,6 +7348,9 @@ msgstr ""
 msgid "Checkout|Subtotal"
 msgstr ""
 
+msgid "Checkout|Success: subscription"
+msgstr ""
+
 msgid "Checkout|Tax"
 msgstr ""