From 3a2ea82f2aea677fe8d0ad4aade229bf39a1ed8e Mon Sep 17 00:00:00 2001 From: Maxwell Frank <92897870+MaxFrank13@users.noreply.github.com> Date: Fri, 29 Sep 2023 09:09:06 -0400 Subject: [PATCH] fix: events track experiment variation (#69) * fix: events track experiment variation * fix: remove unused dev code --------- Co-authored-by: Maxwell Frank --- src/skills-builder/SkillsBuilder.jsx | 11 ++++++++++- .../skills-builder-steps/SkillsBuilderDefault.jsx | 5 ++++- .../SkillsBuilderProgressive.jsx | 5 ++++- .../skills-builder-steps/data/jobsByCategory.json | 3 --- .../select-preferences/CareerInterestCard.jsx | 4 ++++ .../CareerInterestCategorizinator.jsx | 14 ++++++++++++++ .../select-preferences/CareerInterestSelect.jsx | 3 ++- .../select-preferences/GoalSelect.jsx | 4 ++++ .../select-preferences/JobTitleSelect.jsx | 4 ++++ .../test/SelectPreferences.test.jsx | 4 ++++ .../view-results/RecommendationStack.jsx | 7 +++++++ .../RelatedSkillsInteractiveBoxSet.jsx | 4 ++++ .../view-results/ViewResults.jsx | 4 +++- .../view-results/test/ViewResults.test.jsx | 6 ++++++ src/skills-builder/test/SkillsBuilder.test.jsx | 4 ++++ 15 files changed, 74 insertions(+), 8 deletions(-) diff --git a/src/skills-builder/SkillsBuilder.jsx b/src/skills-builder/SkillsBuilder.jsx index 8bfc30f3..f608c943 100644 --- 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 index d6b33dd1..e05133b9 100644 --- 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 index 20989f83..bb4c1b43 100644 --- 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 index 3e3af8df..c2a9e2da 100644 --- 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 index 089cc900..2b6949da 100644 --- a/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCard.jsx +++ b/src/skills-builder/skills-builder-steps/select-preferences/CareerInterestCard.jsx @@ -6,6 +6,7 @@ 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'; @@ -13,6 +14,8 @@ 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 index 8beffdf1..2fba4199 100644 --- 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 ( { className="select-width" leadingElement={controlState && ()} floatingLabel={controlState && title} + onClick={handleSelectClick} > {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 index d4b96356..9172b084 100644 --- 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 index 27dd429b..8648c480 100644 --- a/src/skills-builder/skills-builder-steps/select-preferences/GoalSelect.jsx +++ b/src/skills-builder/skills-builder-steps/select-preferences/GoalSelect.jsx @@ -5,6 +5,7 @@ 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'; @@ -12,6 +13,8 @@ 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 index 42133957..81c36122 100644 --- 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 index e921df54..c4d658da 100644 --- 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 index 01b6bfbc..4e9f75ab 100644 --- 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 index 2e2860b2..8821b34a 100644 --- 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 index b387bd47..d18e8d51 100644 --- 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 index b19bf78c..370a8951 100644 --- 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 index 183f2ad1..be3ec105 100644 --- 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));