Skip to content

Remove loop click through test #16500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abeddow91 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Remove loop click through test #16500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
507905e
Remove loop click through test from test set up and from codebase
abeddow91 Jul 30, 2026
03b7457
Merge branch 'main' into ab/remove-loop-click-through-test
abeddow91 Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions ab-testing/config/abTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,19 +107,6 @@ const ABTests: ABTest[] = [
groups: ["control", "variant"],
shouldForceMetricsCollection: true,
},
{
name: "fronts-and-curation-loop-click-through",
description:
"Test impact of click to article via loop videos on fronts",
owners: ["fronts.and.curation@guardian.co.uk"],
status: "ON",
expirationDate: "2026-09-19",
type: "server",
audienceSize: 5 / 100,
audienceSpace: "A",
groups: ["control", "variant"],
shouldForceMetricsCollection: false,
},
{
name: "fronts-and-curation-click-to-play",
description: "Test click to play longform videos vs autoplay",
Expand Down
38 changes: 0 additions & 38 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
import { appendLinkNameMedia } from '../../lib/getDataLinkName';
import { getZIndex } from '../../lib/getZIndex';
import { getOphanComponents } from '../../lib/labs';
import { useAB } from '../../lib/useAB';
import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
import { palette } from '../../palette';
import type { Branding } from '../../types/branding';
Expand Down Expand Up @@ -411,20 +410,6 @@ export const Card = ({
articleMedia,
contentSpacing,
}: Props) => {
const ab = useAB();
const isInLoopClickTestControl = Boolean(
ab?.isUserInTestGroup(
'fronts-and-curation-loop-click-through',
'control',
),
);
const isInLoopClickTestVariant = Boolean(
ab?.isUserInTestGroup(
'fronts-and-curation-loop-click-through',
'variant',
),
);

const hasSublinks = supportingContent && supportingContent.length > 0;
const sublinkPosition = decideSublinkPosition(
supportingContent,
Expand Down Expand Up @@ -801,15 +786,6 @@ export const Card = ({
);
};

const isLoopAndInLoopClickTestControl = Boolean(
media?.type === 'loop-video' && isInLoopClickTestControl,
);
const isLoopAndInLoopClickTestVariant = Boolean(
media?.type === 'loop-video' && isInLoopClickTestVariant,
);
const isLoopAndInLoopClickTest =
isLoopAndInLoopClickTestControl || isLoopAndInLoopClickTestVariant;

return (
<CardWrapper
format={format}
Expand All @@ -821,15 +797,12 @@ export const Card = ({
? palette('--onward-content-top-border')
: undefined
}
isLoopAndInLoopClickTestVariant={isLoopAndInLoopClickTestVariant}
>
<CardLink
linkTo={linkTo}
headlineText={headlineText}
dataLinkName={resolvedDataLinkName}
isExternalLink={isExternalLink}
isLoopAndInLoopClickTest={isLoopAndInLoopClickTest}
shouldRaiseZIndexForAbTest={false} // The z-index is raised in a new CardLink in the SelfHostedVideo island.
/>
{headlinePosition === 'outer' && (
<div
Expand Down Expand Up @@ -894,9 +867,6 @@ export const Card = ({
mediaPositionOnMobile={mediaPositionOnMobile}
padMedia={isMediaCardOrNewsletter && !isOnwardsContent}
isSmallCard={isSmallCard}
isLoopAndInLoopClickTestVariant={
isLoopAndInLoopClickTestVariant
}
>
{media.type === 'slideshow' && (
<Island
Expand Down Expand Up @@ -961,14 +931,6 @@ export const Card = ({
minAspectRatio={3 / 4}
containerAspectRatioDesktop={5 / 4}
preventAutoplay={false}
cardLink={{
headlineText,
dataLinkName: resolvedDataLinkName,
isExternalLink,
}}
isInLoopClickTestVariant={
isLoopAndInLoopClickTestVariant
}
/>
</Island>
)}
Expand Down
39 changes: 4 additions & 35 deletions dotcom-rendering/src/components/Card/components/CardLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,40 +19,26 @@ const zIndexStyles = css`
z-index: ${getZIndex('card-link')};
`;

const abTestZIndexStyles = css`
z-index: ${getZIndex('video-card-link')};
`;

type Props = {
linkTo: string;
headlineText: string;
dataLinkName?: string;
isExternalLink: boolean;
isLoopAndInLoopClickTest: boolean;
/**
* Refers to the AB test with name: fronts-and-curation-loop-click-through
*/
shouldRaiseZIndexForAbTest: boolean;
};

const InternalLink = ({
linkTo,
headlineText,
dataLinkName,
shouldRaiseZIndexForAbTest,
}: {
linkTo: string;
headlineText: string;
dataLinkName?: string;
shouldRaiseZIndexForAbTest: boolean;
}) => {
return (
<a
href={linkTo}
css={[
fauxLinkStyles,
shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
]}
css={[fauxLinkStyles, zIndexStyles]}
data-link-name={dataLinkName}
aria-label={headlineText}
/>
Expand All @@ -63,20 +49,15 @@ const ExternalLink = ({
linkTo,
headlineText,
dataLinkName,
shouldRaiseZIndexForAbTest,
}: {
linkTo: string;
headlineText: string;
dataLinkName?: string;
shouldRaiseZIndexForAbTest: boolean;
}) => {
return (
<a
href={linkTo}
css={[
fauxLinkStyles,
shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
]}
css={[fauxLinkStyles, zIndexStyles]}
data-link-name={dataLinkName}
aria-label={headlineText + ' (opens in new tab)'}
target="_blank"
Expand All @@ -90,33 +71,21 @@ export const CardLink = ({
headlineText,
dataLinkName = 'article', //this makes sense if the link is to an article, but should this say something like "external" if it's an external link? are there any other uses/alternatives?
isExternalLink,
isLoopAndInLoopClickTest,
shouldRaiseZIndexForAbTest,
}: Props) => {
/**
* If we are in the loop click through test, we add a unique string to the data link name
* tracking so clicks to article can be diffrentiated from other clicks on the card
*/
const clickThroughLinkName = isLoopAndInLoopClickTest
? `${dataLinkName} | card-link-clickthrough`
: dataLinkName;

return (
<>
{isExternalLink && (
<ExternalLink
linkTo={linkTo}
headlineText={headlineText}
dataLinkName={clickThroughLinkName}
shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
dataLinkName={dataLinkName}
/>
)}
{!isExternalLink && (
<InternalLink
linkTo={linkTo}
headlineText={headlineText}
dataLinkName={clickThroughLinkName}
shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
dataLinkName={dataLinkName}
/>
)}
</>
Expand Down
15 changes: 6 additions & 9 deletions dotcom-rendering/src/components/Card/components/CardWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ type Props = {
showTopBarMobile: boolean;
containerPalette?: DCRContainerPalette;
topBarColour?: string;
isLoopAndInLoopClickTestVariant?: boolean;
};

const baseCardStyles = css`
Expand Down Expand Up @@ -42,14 +41,15 @@ const baseCardStyles = css`
text-decoration: none;
`;

const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css`
const hoverStyles = css`
:hover .media-overlay {
width: 100%;
height: 100%;
background-color: ${palette('--card-background-hover')};
}

/* Only underline the headline element we want to target (not kickers/sublink headlines) */

:hover .card-headline .show-underline {
text-decoration: underline;
}
Expand All @@ -58,19 +58,17 @@ const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css`
* We want to prevent the general hover styles applying when
* a click won't result in navigating to the main article
*/

:has(
ul.sublinks:hover,
.video-container:not(
${isLoopAndInLoopClickTestVariant
? `.cinemagraph, .loop`
: `.cinemagraph`}
):hover,
.video-container:not(.cinemagraph):hover,
.slideshow-carousel-footer:hover,
.branding-logo:hover
) {
.card-headline .show-underline {
text-decoration: none;
}

.media-overlay {
background-color: transparent;
}
Expand Down Expand Up @@ -105,15 +103,14 @@ export const CardWrapper = ({
showTopBarMobile,
containerPalette,
topBarColour = palette('--card-border-top'),
isLoopAndInLoopClickTestVariant,
}: Props) => {
return (
<FormatBoundary format={format}>
<ContainerOverrides containerPalette={containerPalette}>
<div
css={[
baseCardStyles,
hoverStyles(isLoopAndInLoopClickTestVariant === true),
hoverStyles,
showTopBarDesktop && desktopTopBarStyles(topBarColour),
showTopBarMobile && mobileTopBarStyles(topBarColour),
]}
Expand Down
6 changes: 1 addition & 5 deletions dotcom-rendering/src/components/Card/components/MediaWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ type Props = {
mediaPositionOnMobile: MediaPositionType;
isSmallCard: boolean;
padMedia?: boolean;
isLoopAndInLoopClickTestVariant?: boolean;
};

const mediaOverlayContainerStyles = css`
Expand Down Expand Up @@ -177,7 +176,6 @@ export const MediaWrapper = ({
mediaPositionOnMobile,
isSmallCard,
padMedia,
isLoopAndInLoopClickTestVariant,
}: Props) => {
const isHorizontalOnMobile =
mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right';
Expand Down Expand Up @@ -239,9 +237,7 @@ export const MediaWrapper = ({
<>
{children}
{/* This overlay is styled when the CardLink is hovered */}
{(mediaType === 'picture' ||
mediaType === 'cinemagraph' ||
isLoopAndInLoopClickTestVariant == true) && (
{(mediaType === 'picture' || mediaType === 'cinemagraph') && (
<div
css={[
mediaOverlayContainerStyles,
Expand Down
Loading
Loading