From 5ae4e683808a21878290e6b583d0316744cc8b38 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Thu, 16 Mar 2023 09:33:01 -0500
Subject: [PATCH] Merge pull request #12185 from overleaf/jpa-fix-segmentation

[web] old plans page: fix event segmentation for plans-page-click

GitOrigin-RevId: 9be23a9cf9d92b88d6fbe8c6e2b941cf3ac63344
---
 .../features/plans/group-plan-modal/index.js  |  2 +-
 .../js/pages/user/subscription/plans.js       | 61 ++++++++++---------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/services/web/frontend/js/features/plans/group-plan-modal/index.js b/services/web/frontend/js/features/plans/group-plan-modal/index.js
index 5cb85de394..980c164cd2 100644
--- a/services/web/frontend/js/features/plans/group-plan-modal/index.js
+++ b/services/web/frontend/js/features/plans/group-plan-modal/index.js
@@ -113,7 +113,7 @@ document.querySelectorAll('[data-ol-open-group-plan-modal]').forEach(el => {
     eventTracking.sendMB('plans-page-click', {
       button: 'group',
       location,
-      period: 'annual',
+      'billing-period': 'annual',
     })
     showGroupPlanModal()
   })
diff --git a/services/web/frontend/js/pages/user/subscription/plans.js b/services/web/frontend/js/pages/user/subscription/plans.js
index 50f96b1363..d7919c282a 100644
--- a/services/web/frontend/js/pages/user/subscription/plans.js
+++ b/services/web/frontend/js/pages/user/subscription/plans.js
@@ -31,10 +31,10 @@ function selectView(view) {
 }
 
 function setUpViewSwitching(liEl) {
-  const view = liEl.getAttribute('data-ol-view-tab')
-
   liEl.querySelector('button').addEventListener('click', function (e) {
     e.preventDefault()
+
+    const view = liEl.getAttribute('data-ol-view-tab')
     eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
     eventTracking.sendMB('plans-page-toggle', {
       button: view,
@@ -45,10 +45,10 @@ function setUpViewSwitching(liEl) {
 }
 
 function setUpCurrencySwitching(linkEl) {
-  const currencyCode = linkEl.getAttribute('data-ol-currencyCode-switch')
-
   linkEl.addEventListener('click', function (e) {
     e.preventDefault()
+
+    const currencyCode = linkEl.getAttribute('data-ol-currencyCode-switch')
     document.querySelectorAll('[data-ol-currencyCode]').forEach(el => {
       el.hidden = el.getAttribute('data-ol-currencyCode') !== currencyCode
     })
@@ -59,33 +59,34 @@ function setUpCurrencySwitching(linkEl) {
 }
 
 function setUpSubscriptionTracking(linkEl) {
-  const plansPageLayoutV3Variant =
-    getMeta('ol-splitTestVariants')?.['plans-page-layout-v3'] ?? 'default'
-
-  const plan =
-    linkEl.getAttribute('data-ol-tracking-plan') ||
-    linkEl.getAttribute('data-ol-start-new-subscription')
-
-  const location = linkEl.getAttribute('data-ol-location')
-  const period = linkEl.getAttribute('data-ol-item-view') || currentView
-
-  const DEFAULT_EVENT_TRACKING_KEY = 'plans-page-click'
-
-  const eventTrackingKey =
-    linkEl.getAttribute('data-ol-event-tracking-key') ||
-    DEFAULT_EVENT_TRACKING_KEY
-
-  const eventTrackingSegmentation = {
-    button: plan,
-    location,
-    period,
-  }
-
-  if (eventTrackingKey === DEFAULT_EVENT_TRACKING_KEY) {
-    eventTrackingSegmentation['plans-page-layout-v3'] = plansPageLayoutV3Variant
-  }
-
   linkEl.addEventListener('click', function () {
+    const plansPageLayoutV3Variant =
+      getMeta('ol-splitTestVariants')?.['plans-page-layout-v3'] ?? 'default'
+
+    const plan =
+      linkEl.getAttribute('data-ol-tracking-plan') ||
+      linkEl.getAttribute('data-ol-start-new-subscription')
+
+    const location = linkEl.getAttribute('data-ol-location')
+    const period = linkEl.getAttribute('data-ol-item-view') || currentView
+
+    const DEFAULT_EVENT_TRACKING_KEY = 'plans-page-click'
+
+    const eventTrackingKey =
+      linkEl.getAttribute('data-ol-event-tracking-key') ||
+      DEFAULT_EVENT_TRACKING_KEY
+
+    const eventTrackingSegmentation = {
+      button: plan,
+      location,
+      'billing-period': period,
+    }
+
+    if (eventTrackingKey === DEFAULT_EVENT_TRACKING_KEY) {
+      eventTrackingSegmentation['plans-page-layout-v3'] =
+        plansPageLayoutV3Variant
+    }
+
     const customLabel = linkEl.getAttribute('data-ol-tracking-label')
     const computedLabel = currentView === 'annual' ? `${plan}_annual` : plan
     const label = customLabel || computedLabel