Skip to content

Add click tracking for the product carousel cards. #15164

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
oliverabrahams wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add click tracking for the product carousel cards. #15164

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 17 additions & 13 deletions dotcom-rendering/src/components/ScrollableProduct.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,19 +324,23 @@ export const ScrollableProduct = ({ products, format }: Props) => {
data-heatphan-type="carousel"
onFocus={scrollToCardOnFocus}
>
{products.map((product: ProductBlockElement) => (
<li
key={
product.productCtas[0]?.url ?? product.elementId
}
css={[subgridStyles, leftBorderStyles]}
>
<ProductCarouselCard
product={product}
format={format}
/>
</li>
))}
{products.map(
(product: ProductBlockElement, index: number) => (
<li
key={
product.productCtas[0]?.url ??
product.elementId
}
css={[subgridStyles, leftBorderStyles]}
data-component={`at-a-glance-carousel-card-${index}`}
Copy link
Contributor

@emma-imber emma-imber Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want the data-component to be at-a-glance-carousel-card-0 for the first card as it is here? Or would it be more readable for non developers looking at the data for it to be at-a-glance-carousel-card-1?

Copy link
Contributor Author

@oliverabrahams oliverabrahams Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh yea would be good to align with the stacked cards, are you doing index + 1 there?

Copy link
Contributor

@emma-imber emma-imber Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep stacked cards is doing index + 1

>
<ProductCarouselCard
product={product}
format={format}
/>
</li>
),
)}
</ol>
<CarouselNavigationButtons
previousButtonEnabled={previousButtonEnabled}
Expand Down
Loading