Use data-ad-slot attribute to identify ad slots on both web and apps (#14126)

Co-authored-by: Jonathon Herbert <[email protected]>

Author: cemms1

dotcom-rendering/src/components/AdSlot.apps.tsx

@@ -46,7 +46,7 @@ const adSlotStyles = css`
  * the native layer, for it to "paint" an advert over the top of it.
  */
 export const AdSlot = forwardRef<HTMLDivElement>((_, ref) => (
-	<aside css={styles}>
+	<aside data-ad-slot={true} css={styles}>
 		<div css={adLabelsStyles}>
 			<p>Advertisement</p>
 		</div>

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -417,7 +417,11 @@ const AdSlotWrapper = ({
 	className?: string;
 }) => {
 	return (
-		<aside className={`ad-slot-container ${className}`} css={additionalCss}>
+		<aside
+			data-ad-slot={true}
+			className={`ad-slot-container ${className}`}
+			css={additionalCss}
+		>
 			{children}
 		</aside>
 	);
@@ -729,22 +733,24 @@ export const AdSlot = ({
 		}
 		case 'survey': {
 			return (
-				<div
-					id="dfp-ad--survey"
-					className={[
-						'js-ad-slot',
-						'ad-slot',
-						'ad-slot--survey',
-					].join(' ')}
-					css={[outOfPageStyles, hideBelowDesktop]}
-					data-link-name="ad slot survey"
-					data-name="survey"
-					data-label="false"
-					data-refresh="false"
-					data-out-of-page="true"
-					data-testid="slot"
-					aria-hidden="true"
-				/>
+				<AdSlotWrapper>
+					<div
+						id="dfp-ad--survey"
+						className={[
+							'js-ad-slot',
+							'ad-slot',
+							'ad-slot--survey',
+						].join(' ')}
+						css={[outOfPageStyles, hideBelowDesktop]}
+						data-link-name="ad slot survey"
+						data-name="survey"
+						data-label="false"
+						data-refresh="false"
+						data-out-of-page="true"
+						data-testid="slot"
+						aria-hidden="true"
+					/>
+				</AdSlotWrapper>
 			);
 		}
 		case 'liveblog-inline': {