fix: events track experiment variation (#69)

* fix: events track experiment variation * fix: remove unused dev code --------- Co-authored-by: Maxwell Frank <mfrank@2u.com>
edx · Sep 29, 2023 · 3a2ea82 · 3a2ea82
1 parent fbade6b
commit 3a2ea82
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 8 deletions.
diff --git a/src/skills-builder/SkillsBuilder.jsx b/src/skills-builder/SkillsBuilder.jsx
@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { SkillsBuilderDefault } from './skills-builder-steps';
 import SkillsBuilderProgressive from './skills-builder-steps/SkillsBuilderProgressive';
 import ProductTool from './ProductTool';
@@ -8,6 +9,14 @@ const SkillsBuilder = () => {
   const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
   const { isProgressive, showProductTool } = visibilityFlagsState;
 
+  useEffect(() => {
+    sendTrackEvent('edx.skills_builder.viewed', {
+      app_name: 'skills_builder',
+      category: 'skills_builder',
+      variation: isProgressive ? 'glide_path' : 'improved_v1.0',
+    });
+  }, [isProgressive]);
+
   return (
     <>
       {isProgressive ? (

diff --git a/src/skills-builder/skills-builder-steps/SkillsBuilderDefault.jsx b/src/skills-builder/skills-builder-steps/SkillsBuilderDefault.jsx
@@ -9,7 +9,7 @@ import {
   STEP1, STEP2,
 } from './data/constants';
 import messages from './messages';
-
+import { VisibilityFlagsContext } from '../visibility-flags-context';
 import { SkillsBuilderContext } from '../skills-builder-context';
 import { SkillsBuilderHeader } from '../skills-builder-header';
 import { SelectPreferences } from './select-preferences';
@@ -20,6 +20,8 @@ const SkillsBuilderDefault = () => {
   const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
   const { state } = useContext(SkillsBuilderContext);
   const { currentGoal, currentJobTitle, careerInterests } = state;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
   const [currentStep, setCurrentStep] = useState(STEP1);
 
   const sendActionButtonEvent = (eventSuffix) => {
@@ -33,6 +35,7 @@ const SkillsBuilderDefault = () => {
           current_job_title: currentJobTitle,
           career_interests: careerInterests,
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };

diff --git a/src/skills-builder/skills-builder-steps/SkillsBuilderProgressive.jsx b/src/skills-builder/skills-builder-steps/SkillsBuilderProgressive.jsx
@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import messages from './messages';
-
+import { VisibilityFlagsContext } from '../visibility-flags-context';
 import { SkillsBuilderContext } from '../skills-builder-context';
 import { SkillsBuilderHeader } from '../skills-builder-header';
 import { SelectPreferences } from './select-preferences';
@@ -17,6 +17,8 @@ const SkillsBuilderProgressive = () => {
   const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
   const { state } = useContext(SkillsBuilderContext);
   const { currentGoal, currentJobTitle, careerInterests } = state;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
 
   const sendActionButtonEvent = (eventSuffix) => {
     sendTrackEvent(
@@ -29,6 +31,7 @@ const SkillsBuilderProgressive = () => {
           current_job_title: currentJobTitle,
           career_interests: careerInterests,
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };

diff --git a/src/skills-builder/skills-builder-steps/data/jobsByCategory.json b/src/skills-builder/skills-builder-steps/data/jobsByCategory.json
@@ -12,9 +12,6 @@
       {
          "jobTitle": "Business Systems Analyst"
       },
-      {
-         "jobTitle": "Coding Instructor"
-      },
       {
          "jobTitle": "Cybersecurity Analyst"
       },

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCard.jsx b/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCard.jsx
@@ -6,13 +6,16 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { Close } from '@edx/paragon/icons';
+import { VisibilityFlagsContext } from '../../visibility-flags-context';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import { removeCareerInterest } from '../../skills-builder-context/data/actions';
 import messages from './messages';
 
 const CareerInterestCard = ({ interest }) => {
   const { formatMessage } = useIntl();
   const { dispatch } = useContext(SkillsBuilderContext);
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
 
   const handleRemoveCareerInterest = () => {
     dispatch(removeCareerInterest(interest));
@@ -25,6 +28,7 @@ const CareerInterestCard = ({ interest }) => {
         learner_data: {
           career_interest: interest,
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCategorizinator.jsx b/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCategorizinator.jsx
@@ -37,6 +37,7 @@ const CareerInterestCategorizinator = () => {
           learner_data: {
             career_interest: value,
           },
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
         },
       );
     }
@@ -58,6 +59,18 @@ const CareerInterestCategorizinator = () => {
       handleCareerInterestSelect(value);
     };
 
+    const handleSelectClick = () => {
+      sendTrackEvent(
+        'edx.skills_builder.category.clicked',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          dropdownCategory: title,
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
+        },
+      );
+    };
+
     return (
       <Form.Control
         as="select"
@@ -66,6 +79,7 @@ const CareerInterestCategorizinator = () => {
         className="select-width"
         leadingElement={controlState && (<Icon src={Verified} />)}
         floatingLabel={controlState && title}
+        onClick={handleSelectClick}
       >
         <option disabled={controlState}>{title}</option>
         {currentCategory.map((job, idx) => (

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestSelect.jsx b/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestSelect.jsx
@@ -19,7 +19,7 @@ const CareerInterestSelect = () => {
   const { careerInterests } = state;
   const { searchClient } = algolia;
   const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
-  const { showCareerInterestCards, allowMultipleCareerInterests } = visibilityFlagsState;
+  const { showCareerInterestCards, allowMultipleCareerInterests, isProgressive } = visibilityFlagsState;
 
   const handleCareerInterestSelect = (value) => {
     if (!allowMultipleCareerInterests && careerInterests.length > 0) {
@@ -37,6 +37,7 @@ const CareerInterestSelect = () => {
           learner_data: {
             career_interest: value,
           },
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
         },
       );
     }

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/GoalSelect.jsx b/src/skills-builder/skills-builder-steps/select-preferences/GoalSelect.jsx
@@ -5,13 +5,16 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { setGoal } from '../../skills-builder-context/data/actions';
+import { VisibilityFlagsContext } from '../../visibility-flags-context';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import messages from './messages';
 
 const GoalDropdown = () => {
   const { formatMessage } = useIntl();
   const { state, dispatch } = useContext(SkillsBuilderContext);
   const { currentGoal } = state;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
 
   const handleGoalSelect = (e) => {
     const { value } = e.target;
@@ -25,6 +28,7 @@ const GoalDropdown = () => {
         learner_data: {
           current_goal: value,
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/JobTitleSelect.jsx b/src/skills-builder/skills-builder-steps/select-preferences/JobTitleSelect.jsx
@@ -7,6 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { InstantSearch } from 'react-instantsearch';
 import { setCurrentJobTitle } from '../../skills-builder-context/data/actions';
+import { VisibilityFlagsContext } from '../../visibility-flags-context';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import JobTitleInstantSearch from './JobTitleInstantSearch';
 import messages from './messages';
@@ -15,6 +16,8 @@ const JobTitleSelect = () => {
   const { formatMessage } = useIntl();
   const { dispatch, algolia } = useContext(SkillsBuilderContext);
   const { searchClient } = algolia;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
 
   const handleCurrentJobTitleSelect = (value) => {
     dispatch(setCurrentJobTitle(value));
@@ -26,6 +29,7 @@ const JobTitleSelect = () => {
         learner_data: {
           current_job_title: value,
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };

diff --git a/src/skills-builder/skills-builder-steps/select-preferences/test/SelectPreferences.test.jsx b/src/skills-builder/skills-builder-steps/select-preferences/test/SelectPreferences.test.jsx
@@ -59,6 +59,7 @@ describe('select-preferences', () => {
           learner_data: {
             current_goal: messages.learningGoalAdvanceCareer.defaultMessage,
           },
+          variation: 'improved_v1.0',
         },
       );
       expect(sendTrackEvent).toHaveBeenCalledWith(
@@ -69,6 +70,7 @@ describe('select-preferences', () => {
           learner_data: {
             current_job_title: 'Prospector',
           },
+          variation: 'improved_v1.0',
         },
       );
     });
@@ -117,6 +119,7 @@ describe('select-preferences', () => {
           learner_data: {
             career_interest: 'Mirror Breaker',
           },
+          variation: 'improved_v1.0',
         },
       );
       expect(dispatchMock).toHaveBeenCalledWith(
@@ -159,6 +162,7 @@ describe('select-preferences', () => {
           learner_data: {
             career_interest: 'Prospector',
           },
+          variation: 'improved_v1.0',
         },
       );
     });

diff --git a/src/skills-builder/skills-builder-steps/view-results/RecommendationStack.jsx b/src/skills-builder/skills-builder-steps/view-results/RecommendationStack.jsx
@@ -5,11 +5,14 @@ import ProductCardGrid from './ProductCardGrid';
 import ProductTypeBanner from './ProductTypeBanner';
 import { addToExpandedList, removeFromExpandedList } from '../../skills-builder-context/data/actions';
 import { SkillsBuilderContext } from '../../skills-builder-context';
+import { VisibilityFlagsContext } from '../../visibility-flags-context';
 import { extractProductKeys } from '../../utils/extractProductKeys';
 
 const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
   const { state, dispatch } = useContext(SkillsBuilderContext);
   const { expandedList } = state;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
   const { id: jobId, name: jobName, recommendations } = selectedRecommendations;
 
   const handleCourseCardClick = (productLabel, productTypeName, index) => {
@@ -30,6 +33,7 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
             job_name: jobName,
             product_keys: extractProductKeys(recommendations, expandedList),
           },
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
         },
       );
       return;
@@ -49,6 +53,7 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
           job_name: jobName,
           product_keys: extractProductKeys(recommendations, expandedList),
         },
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       },
     );
   };
@@ -68,6 +73,7 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
       page: 'skills_builder',
       product_line: type,
       number_recommendations: numberResults,
+      variation: isProgressive ? 'glide_path' : 'improved_v1.0',
     });
     // fire separate event for the recommendations that were shown when expanded
     sendTrackEvent('edx.skills_builder.recommendation.expanded.shown', {
@@ -80,6 +86,7 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
         job_name: jobName,
         product_keys: extractProductKeys(recommendations, [...expandedList, type]),
       },
+      variation: isProgressive ? 'glide_path' : 'improved_v1.0',
     });
   };
 

diff --git a/src/skills-builder/skills-builder-steps/view-results/RelatedSkillsInteractiveBoxSet.jsx b/src/skills-builder/skills-builder-steps/view-results/RelatedSkillsInteractiveBoxSet.jsx
@@ -6,6 +6,7 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { addCareerInterest } from '../../skills-builder-context/data/actions';
+import { VisibilityFlagsContext } from '../../visibility-flags-context';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import messages from './messages';
 
@@ -23,6 +24,8 @@ const RelatedSkillsInteractiveBoxSet = ({
   const { formatMessage } = useIntl();
   const { state, dispatch } = useContext(SkillsBuilderContext);
   const { careerInterests } = state;
+  const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
+  const { isProgressive } = visibilityFlagsState;
 
   const renderTopFiveSkills = (skills) => {
     const topFiveSkills = skills.sort((a, b) => b.significance - a.significance).slice(0, 5);
@@ -47,6 +50,7 @@ const RelatedSkillsInteractiveBoxSet = ({
           learner_data: {
             career_interest: value,
           },
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
         },
       );
     }

diff --git a/src/skills-builder/skills-builder-steps/view-results/ViewResults.jsx b/src/skills-builder/skills-builder-steps/view-results/ViewResults.jsx
@@ -34,7 +34,7 @@ const ViewResults = () => {
 
   const productTypes = useRef(useProductTypes());
   const { state: visibilityFlagsState } = useContext(VisibilityFlagsContext);
-  const { allowMultipleCareerInterests } = visibilityFlagsState;
+  const { allowMultipleCareerInterests, isProgressive } = visibilityFlagsState;
 
   useEffect(() => {
     const getAllRecommendations = async () => {
@@ -57,6 +57,7 @@ const ViewResults = () => {
             product_keys: extractProductKeys(results[0]?.recommendations),
           },
           is_default: true,
+          variation: isProgressive ? 'glide_path' : 'improved_v1.0',
         });
       } else {
         logError(`No results for ${careerInterests[0]}`);
@@ -119,6 +120,7 @@ const ViewResults = () => {
           product_keys: extractProductKeys(recommendations),
         },
         is_default: false,
+        variation: isProgressive ? 'glide_path' : 'improved_v1.0',
       });
     }
   };

diff --git a/src/skills-builder/skills-builder-steps/view-results/test/ViewResults.test.jsx b/src/skills-builder/skills-builder-steps/view-results/test/ViewResults.test.jsx
@@ -82,6 +82,7 @@ describe('view-results', () => {
             product_keys: mockData.productKeys,
           },
           is_default: true,
+          variation: 'improved_v1.0',
         },
       );
       // called once when "Show Recommendations" button is clicked and then again for above event
@@ -103,6 +104,7 @@ describe('view-results', () => {
             product_keys: mockData.productKeys,
           },
           is_default: false,
+          variation: 'improved_v1.0',
         },
       );
     });
@@ -118,6 +120,7 @@ describe('view-results', () => {
             current_job_title: 'Goblin Lackey',
             career_interests: ['Prospector', 'Mirror Breaker', 'Bombardment'],
           },
+          variation: 'improved_v1.0',
         },
       );
     });
@@ -138,6 +141,7 @@ describe('view-results', () => {
             job_name: 'Prospector',
             product_keys: mockData.productKeys,
           },
+          variation: 'improved_v1.0',
         },
       );
     });
@@ -227,6 +231,7 @@ describe('view-results', () => {
         page: 'skills_builder',
         product_line: 'course',
         number_recommendations: 2,
+        variation: 'improved_v1.0',
       });
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.skills_builder.recommendation.expanded.shown', {
         app_name: 'skills_builder',
@@ -238,6 +243,7 @@ describe('view-results', () => {
           job_name: 'Prospector',
           product_keys: mockData.productKeys,
         },
+        variation: 'improved_v1.0',
       });
     });
 

diff --git a/src/skills-builder/test/SkillsBuilder.test.jsx b/src/skills-builder/test/SkillsBuilder.test.jsx
@@ -13,6 +13,10 @@ jest.mock('../visibility-flags-context/data/hooks', () => ({
   useVisibilityFlags: jest.fn(),
 }));
 
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
 describe('skills-builder', () => {
   beforeAll(() => {
     useVisibilityFlags.mockImplementation(() => (DEFAULT_VISIBILITY_FLAGS));
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,9 +12,6 @@ @@
           {
              "jobTitle": "Business Systems Analyst"
           },
-          {
-             "jobTitle": "Coding Instructor"
-          },
           {
              "jobTitle": "Cybersecurity Analyst"
           },
@@ Expand Down @@