From 74f49021d5177f6329bed563a8d79f9bc518f1e3 Mon Sep 17 00:00:00 2001 From: HarveyPeachey Date: Mon, 4 Nov 2024 09:38:17 +0000 Subject: [PATCH 01/13] adds basic code for minimal election banner experiment --- src/app/hooks/useOptimizelyVariation/index.jsx | 2 +- .../RecommendationsPromoList/index.jsx | 4 ++-- src/app/pages/ArticlePage/ArticlePage.tsx | 15 +++++++++++++-- .../pages/ArticlePage/ElectionBanner/index.tsx | 7 ++++++- src/app/pages/ArticlePage/index.tsx | 5 ++++- .../utilities/mvtHeader/enabledExperimentsList.js | 4 ++-- 6 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/app/hooks/useOptimizelyVariation/index.jsx b/src/app/hooks/useOptimizelyVariation/index.jsx index 6fc745815c4..7d522c301dc 100644 --- a/src/app/hooks/useOptimizelyVariation/index.jsx +++ b/src/app/hooks/useOptimizelyVariation/index.jsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useDecision } from '@optimizely/react-sdk'; -const isClientSide = true; +const isClientSide = false; // ALTHOUGH THIS FUNCTION BREAKS REACT RULES BY USING CONDITIONAL HOOKS, // WE CAN SAFELY DO SO SINCE isClientSide IS A CONSTANT AND THEREFORE GUARANTEES THAT diff --git a/src/app/legacy/containers/CpsRecommendations/RecommendationsPromoList/index.jsx b/src/app/legacy/containers/CpsRecommendations/RecommendationsPromoList/index.jsx index b51507d8cd8..fac41d6c047 100644 --- a/src/app/legacy/containers/CpsRecommendations/RecommendationsPromoList/index.jsx +++ b/src/app/legacy/containers/CpsRecommendations/RecommendationsPromoList/index.jsx @@ -25,7 +25,7 @@ const RecommendationsPromoListItem = forwardRef( // 004_brasil_recommendations_experiment ({ item, index, service, optimizely }, forwardedRef) => { const eventTrackingData = - service === 'portuguese' + service === 'portuguese' || service === 'mundo' ? getEventTrackingDataWithOptimizely({ item, index, @@ -69,7 +69,7 @@ const RecommendationsPromoList = ({ promoItems }) => { const { service } = useContext(ServiceContext); const { optimizely } = useContext(OptimizelyContext); const eventTrackingData = - service === 'portuguese' + service === 'portuguese' || service === 'mundo' ? getEventTrackingDataWithOptimizely({ optimizely }) : getEventTrackingData(); diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index e12a4004099..19cee08de71 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -1,8 +1,9 @@ /** @jsx jsx */ - -import { useContext } from 'react'; +/** @jsxFrag React.Fragment */ +import React, { useContext } from 'react'; import { jsx, useTheme } from '@emotion/react'; import useToggle from '#hooks/useToggle'; +import useOptimizelyMvtVariation from '#hooks/useOptimizelyMvtVariation'; import { singleTextBlock } from '#app/models/blocks'; import ArticleMetadata from '#containers/ArticleMetadata'; import { RequestContext } from '#contexts/RequestContext'; @@ -39,6 +40,8 @@ import CpsRecommendations from '#containers/CpsRecommendations'; import InlinePodcastPromo from '#containers/PodcastPromo/Inline'; import { Article, OptimoBylineBlock } from '#app/models/types/optimo'; import ScrollablePromo from '#components/ScrollablePromo'; +import OptimizelyArticleCompleteTracking from '#app/legacy/containers/OptimizelyArticleCompleteTracking'; +import OptimizelyPageViewTracking from '#app/legacy/containers/OptimizelyPageViewTracking'; import ElectionBanner from './ElectionBanner'; import ImageWithCaption from '../../components/ImageWithCaption'; @@ -87,6 +90,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { palette: { GREY_2, WHITE }, } = useTheme(); + const experimentEnabled = useOptimizelyMvtVariation('visible_engagement_2'); + const allowAdvertising = pageData?.metadata?.allowAdvertising ?? false; const adcampaign = pageData?.metadata?.adCampaignKeyword; const isTransliterated = @@ -305,6 +310,12 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { mobileDivider={showTopics} /> )} + {experimentEnabled && ( + <> + + + + )} ); }; diff --git a/src/app/pages/ArticlePage/ElectionBanner/index.tsx b/src/app/pages/ArticlePage/ElectionBanner/index.tsx index 9ec1ace750a..37f89b46297 100644 --- a/src/app/pages/ArticlePage/ElectionBanner/index.tsx +++ b/src/app/pages/ArticlePage/ElectionBanner/index.tsx @@ -7,6 +7,7 @@ import AmpIframe from '#app/components/AmpIframe'; import useToggle from '#app/hooks/useToggle'; import { Tag } from '#app/components/Metadata/types'; import { ServiceContext } from '#app/contexts/ServiceContext'; +import useOptimizelyMvtVariation from '#app/hooks/useOptimizelyMvtVariation'; import styles from './index.styles'; import BANNER_CONFIG from './config'; @@ -16,13 +17,15 @@ export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) { const { enabled: electionBannerEnabled }: { enabled: boolean | null } = useToggle('articleElectionBanner'); + const variation = useOptimizelyMvtVariation('visible_engagement_2'); + if (isLite) return null; const { iframeSrc, iframeSrcAmp, thingIds } = BANNER_CONFIG; const validAboutTag = aboutTags?.find(tag => thingIds.includes(tag.thingId)); - const showBanner = validAboutTag && electionBannerEnabled; + const showBanner = true; if (!showBanner) return null; @@ -43,6 +46,8 @@ export default function ElectionBanner({ aboutTags }: { aboutTags: Tag[] }) { ); } + if (variation === 'off') return null; + return (