Add to cart event for Google Tag Manager

This commit adds a "add to cart" event for the
Google Tag Manager data layer when a user clicks
the "buy additional minutes" from the usage tab.

See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/79038

app/assets/javascripts/google_tag_manager/index.js

@@ -231,3 +231,32 @@ export const trackTransaction = (transactionDetails) => {
 
   pushEnhancedEcommerceEvent('EECtransactionSuccess', eventData);
 };
+
+export const trackAddToCartUsageTab = () => {
+  if (!isSupported()) {
+    return;
+  }
+
+  const getStartedButton = document.querySelector('.js-buy-additional-minutes');
+  getStartedButton.addEventListener('click', () => {
+    window.dataLayer.push({
+      event: 'EECproductAddToCart',
+      ecommerce: {
+        currencyCode: 'USD',
+        add: {
+          products: [
+            {
+              name: 'CI/CD Minutes',
+              id: '0003',
+              price: '10',
+              brand: 'GitLab',
+              category: 'DevOps',
+              variant: 'add-on',
+              quantity: 1,
+            },
+          ],
+        },
+      },
+    });
+  });
+};

ee/app/assets/javascripts/pages/groups/usage_quotas/index.js

@@ -3,6 +3,7 @@ import SeatUsageApp from 'ee/usage_quotas/seats';
 import initNamespaceStorage from 'ee/usage_quotas/storage/init_namespace_storage';
 import initCiMinutesUsageApp from 'ee/usage_quotas/ci_minutes_usage';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import { trackAddToCartUsageTab } from '~/google_tag_manager';
 
 const initLinkedTabs = () => {
   if (!document.querySelector('.js-storage-tabs')) {
@@ -55,3 +56,4 @@ const fixPipelinesPagination = () => {
 fixPipelinesPagination();
 initVueApps();
 initLinkedTabs();
+trackAddToCartUsageTab();

ee/app/assets/javascripts/pages/profiles/usage_quotas/index.js

 import ciMinutesUsage from 'ee/ci_minutes_usage';
 import initNamespaceStorage from 'ee/usage_quotas/storage/init_namespace_storage';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import { trackAddToCartUsageTab } from '~/google_tag_manager';
 
 if (document.querySelector('#js-storage-counter-app')) {
   initNamespaceStorage();
@@ -14,3 +15,4 @@ if (document.querySelector('#js-storage-counter-app')) {
 }
 
 ciMinutesUsage();
+trackAddToCartUsageTab();

ee/app/assets/javascripts/pages/subscriptions/buy_minutes/index.js

 import mountSubscriptionsApplication from 'ee/subscriptions/buy_minutes';
+import { trackAddToCartUsageTab } from '~/google_tag_manager';
 
 mountSubscriptionsApplication(document.getElementById('js-buy-minutes'));
+trackAddToCartUsageTab();

ee/app/controllers/profiles/usage_quotas_controller.rb

@@ -5,6 +5,10 @@ class Profiles::UsageQuotasController < Profiles::ApplicationController
 
   feature_category :purchase
 
+  before_action only: [:index] do
+    push_frontend_feature_flag(:gitlab_gtm_datalayer, type: :ops)
+  end
+
   def index
     @hide_search_settings = true
     @namespace = current_user.namespace

ee/app/views/namespaces/pipelines_quota/_list.haml

@@ -7,11 +7,11 @@
 .pipeline-quota.container-fluid
   .row
     .col-sm-6.offset-sm-6
-      - if ::Gitlab.com?
+      - if ::Gitlab.dev_env_or_com?
         = link_to s_('UsageQuota|Buy additional minutes'),
         buy_additional_minutes_path(namespace),
         target: buy_addon_target_attr(namespace),
-        class: 'gl-button btn btn-confirm float-right',
+        class: 'gl-button btn btn-confirm float-right js-buy-additional-minutes',
         data: { track_action: 'click_buy_ci_minutes', track_label: namespace.actual_plan_name, track_property: 'pipeline_quota_page' }
 
   .row

spec/frontend/google_tag_manager/index_spec.js

@@ -11,6 +11,7 @@ import {
   trackSaasTrialGetStarted,
   trackCheckout,
   trackTransaction,
+  trackAddToCartUsageTab,
 } from '~/google_tag_manager';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { logError } from '~/lib/logger';
@@ -173,6 +174,32 @@ describe('~/google_tag_manager/index', () => {
         },
       ],
     }),
+    createTestCase(trackAddToCartUsageTab, {
+      links: [
+        {
+          cls: 'js-buy-additional-minutes',
+          expectation: {
+            event: 'EECproductAddToCart',
+            ecommerce: {
+              currencyCode: 'USD',
+              add: {
+                products: [
+                  {
+                    name: 'CI/CD Minutes',
+                    id: '0003',
+                    price: '10',
+                    brand: 'GitLab',
+                    category: 'DevOps',
+                    variant: 'add-on',
+                    quantity: 1,
+                  },
+                ],
+              },
+            },
+          },
+        },
+      ],
+    }),
   ])('%p', (subject, { links = [], forms = [], expectedEvents }) => {
     beforeEach(() => {
       setHTMLFixture(createHTML({ links, forms }));