From a392395876e2532196e2471f02cc75a2b8766675 Mon Sep 17 00:00:00 2001 From: Mubbshar Anwar <78487564+mubbsharanwar@users.noreply.github.com> Date: Thu, 27 Jul 2023 17:04:08 +0500 Subject: [PATCH] feat: Add segments events (#1001) Add segments events to track popular and trending recommendations stats. VAN-1569 Co-authored-by: Syed Sajjad Hussain Shah <52817156+syedsajjadkazmii@users.noreply.github.com> --- .../ProgressiveProfiling.jsx | 4 +- .../tests/ProgressiveProfiling.test.jsx | 4 +- .../ProductCard/BaseCard/index.jsx | 4 -- src/recommendations/ProductCard/index.jsx | 13 ++---- src/recommendations/RecommendationsPage.jsx | 20 +++++++-- src/recommendations/data/constants.js | 3 ++ src/recommendations/track.js | 45 +++++++++++-------- 7 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/progressive-profiling/ProgressiveProfiling.jsx b/src/progressive-profiling/ProgressiveProfiling.jsx index c40f1ed1..95f4147e 100644 --- a/src/progressive-profiling/ProgressiveProfiling.jsx +++ b/src/progressive-profiling/ProgressiveProfiling.jsx @@ -124,11 +124,11 @@ const ProgressiveProfiling = (props) => { trackRecommendationsGroup(variation, authenticatedUser.userId); setShowRecommendationsPage(showRecommendations); if (!showRecommendations) { - trackRecommendationsViewed([], true, authenticatedUser.userId); + trackRecommendationsViewed([], '', true, authenticatedUser.userId); } } } - }, [authenticatedUser, enablePopularAndTrendingRecommendations, registrationResult, queryParams]); + }, [authenticatedUser, enablePopularAndTrendingRecommendations, registrationResult, queryParams?.next]); if ( !(location.state?.registrationResult || registrationEmbedded) diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx index c2cc689c..bee4775d 100644 --- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx +++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx @@ -231,8 +231,8 @@ describe('ProgressiveProfilingTests', () => { it('should fire segments recommendations viewed and variation group events', async () => { const viewedEventProperties = { page: 'authn_recommendations', - course_key_array: [], - amplitude_recommendations: false, + products: [], + recommendation_type: '', is_control: true, user_id: 3, }; diff --git a/src/recommendations/ProductCard/BaseCard/index.jsx b/src/recommendations/ProductCard/BaseCard/index.jsx index 3d20fe89..6c541b08 100644 --- a/src/recommendations/ProductCard/BaseCard/index.jsx +++ b/src/recommendations/ProductCard/BaseCard/index.jsx @@ -6,7 +6,6 @@ import PropTypes from 'prop-types'; import { truncateText } from '../../data/utils'; const BaseCard = ({ - url, customHeaderImage, schoolLogo, title, @@ -20,7 +19,6 @@ const BaseCard = ({ }) => (
{ - trackRecommendationCardClickOptimizely(userId?.toString()); - trackRecommendationsClicked( - product.courseKey, - false, + trackRecommendationClick( + product, position + 1, + false, userId, - product.marketingUrl, - product.recommendationType || 'algolia', ); }; return ( { @@ -22,6 +24,10 @@ const RecommendationsPage = ({ location }) => { const POPULAR_PRODUCTS = JSON.parse(getConfig().POPULAR_PRODUCTS); const TRENDING_PRODUCTS = JSON.parse(getConfig().TRENDING_PRODUCTS); + useEffect(() => { + trackRecommendationsViewed(POPULAR_PRODUCTS, POPULAR, false, userId); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + const handleRedirection = () => { window.history.replaceState(location.state, null, ''); if (registrationResponse) { @@ -45,6 +51,11 @@ const RecommendationsPage = ({ location }) => { handleRedirection(); } + const handleOnSelect = (tabKey) => { + const recommendations = tabKey === POPULAR ? POPULAR_PRODUCTS : TRENDING_PRODUCTS; + trackRecommendationsViewed(recommendations, tabKey, false, userId); + }; + return ( <> @@ -66,16 +77,17 @@ const RecommendationsPage = ({ location }) => { - + - + (e) => return setTimeout(() => { global.location.href = href; }, LINK_TIMEOUT); }; -export const trackRecommendationsClicked = (courseKey, isControl, position, userId, href, recommendationType) => { - createLinkTracker( - sendTrackEvent(eventNames.recommendedCourseClicked, { - page: 'authn_recommendations', - position, - recommendation_type: recommendationType, - course_key: courseKey, - is_control: isControl, - user_id: userId, - }), - href, - true, - ); +const generateProductKey = (product) => { + const productKey = product.cardType === 'program' ? `${product.title} [${product.uuid}]` : product.activeRunKey; + return productKey; }; -export const trackRecommendationsViewed = (recommendedCourseKeys, isControl, userId) => { +export const trackRecommendationClick = (product, position, isControl, userId) => { + sendTrackEvent(eventNames.recommendedProductClicked, { + page: 'authn_recommendations', + position, + recommendation_type: product.recommendationType, + product_key: generateProductKey(product), + product_line: product.cardType, + product_source: product.productSource.name, + is_control: isControl, + user_id: userId, + }); + return setTimeout(() => { global.open(product.url, '_blank'); }, LINK_TIMEOUT); +}; + +export const trackRecommendationsViewed = (recommendedProducts, type, isControl, userId) => { + const viewedProductsList = recommendedProducts.map((product) => ({ + product_key: generateProductKey(product), + product_line: product.cardType, + product_source: product.productSource.name, + })); sendTrackEvent( eventNames.recommendationsViewed, { page: 'authn_recommendations', - course_key_array: recommendedCourseKeys, - amplitude_recommendations: false, + recommendation_type: type, + products: viewedProductsList, is_control: isControl, user_id: userId, }, @@ -55,7 +64,7 @@ export const trackRecommendationsGroup = (variation, userId) => { }; export default { - trackRecommendationsClicked, + trackRecommendationClick, trackRecommendationsGroup, trackRecommendationsViewed, };