WSTEAM1-1514: Lite Site Piano Analytics - Spike

src/app/components/ATIAnalytics/canonical/index.tsx

@@ -3,6 +3,7 @@ import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import { RequestContext } from '#app/contexts/RequestContext';
 import isOperaProxy from '#app/lib/utilities/isOperaProxy';
 import { Helmet } from 'react-helmet';
+import { liteTrackingScript } from '#app/hooks/useClickTrackerHandler';
 import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
 import { ATIAnalyticsProps } from '../types';
 import sendBeaconOperaMiniScript from './sendBeaconOperaMiniScript';
@@ -42,9 +43,11 @@ const addOperaMiniExtremeScript = (atiPageViewUrlString: string) => {
 
 const addLiteScript = (atiPageViewUrlString: string) => {
   const script = sendBeaconLite(atiPageViewUrlString);
+  const clickTrackerScript = liteTrackingScript();
 
   return (
     <Helmet>
+      <script type="text/javascript">{clickTrackerScript}</script>
       <script type="text/javascript">{script}</script>
     </Helmet>
   );

src/app/components/ATIAnalytics/canonical/sendBeaconLite.ts

@@ -1,8 +1,12 @@
 const sendBeaconLite = (atiPageViewUrlString: string) => `
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "${atiPageViewUrlString}", true);
-    xhr.withCredentials = true;
-    xhr.send();
+    function sendBeaconLite (atiPageViewUrlString) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", atiPageViewUrlString, true);
+        xhr.withCredentials = true;
+        xhr.send();
+    }
+
+    sendBeaconLite("${atiPageViewUrlString}");
 `;
 
 export default sendBeaconLite;

src/app/components/LiteSiteCta/index.tsx

@@ -1,6 +1,9 @@
 /** @jsx jsx */
 import { useContext } from 'react';
 import { jsx } from '@emotion/react';
+import useClickTrackerHandler, {
+  constructLiteSiteURL,
+} from '#app/hooks/useClickTrackerHandler';
 import Paragraph from '../Paragraph';
 import Text from '../Text';
 import { LeftChevron, RightChevron } from '../icons';
@@ -17,6 +20,7 @@ type CtaLinkProps = {
   showChevron?: boolean;
   ignoreLiteExtension?: boolean;
   className?: string;
+  eventTrackingData: { componentName: string };
 };
 
 const CtaLink = ({
@@ -27,18 +31,24 @@ const CtaLink = ({
   showChevron = false,
   ignoreLiteExtension = false,
   className,
+  eventTrackingData,
 }: CtaLinkProps) => {
   const chevron = isRtl ? (
     <LeftChevron css={styles.chevron} />
   ) : (
     <RightChevron css={styles.chevron} />
   );
 
+  const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
+  const liteUrl = constructLiteSiteURL(eventTrackingData);
+
   return (
     <a
       href={href}
       className={className}
       css={styles.link}
+      onClick={clickTrackerHandler}
+      {...(liteUrl && { 'add-lite-tracker-params': liteUrl })}
       {...(ignoreLiteExtension && { 'data-ignore-lite': true })}
     >
       <Text size="brevier" fontVariant={fontVariant} css={styles.linkText}>
@@ -62,6 +72,8 @@ const LiteSiteCta = () => {
     dataSaving,
   } = liteSite;
   const id = 'LiteSiteCta';
+  const eventTrackingDataSiteSwitch = { componentName: 'switch-to-canonical' };
+  const eventTrackingLiteSiteInfo = { componentName: 'lite-site-info' };
 
   return (
     <section
@@ -86,6 +98,7 @@ const LiteSiteCta = () => {
             css={styles.topLinkSpacing}
             ignoreLiteExtension
             showChevron
+            eventTrackingData={eventTrackingDataSiteSwitch}
           />
         </Paragraph>
         <Paragraph data-e2e="information-page">
@@ -94,6 +107,7 @@ const LiteSiteCta = () => {
             href={informationPageLink}
             text={informationPage}
             css={styles.bottomLinkSpacing}
+            eventTrackingData={eventTrackingLiteSiteInfo}
           />
         </Paragraph>
       </div>

src/app/components/MostRead/Canonical/Item/index.tsx

@@ -1,7 +1,9 @@
 /** @jsx jsx */
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 import { jsx } from '@emotion/react';
-import useClickTrackerHandler from '#hooks/useClickTrackerHandler';
+import useClickTrackerHandler, {
+  constructLiteSiteURL,
+} from '#hooks/useClickTrackerHandler';
 import styles from './index.styles';
 import {
   mostReadListGridProps,
@@ -15,6 +17,7 @@
 } from '../../types';
 import { Direction } from '../../../../models/types/global';
 import Grid from '../../../../legacy/components/Grid';
+import { RequestContext } from '#app/contexts/RequestContext';
 
 export const getParentColumns = (columnLayout: ColumnLayout) => {
   return columnLayout !== 'oneColumn'
@@ -47,13 +50,15 @@
   eventTrackingData,
 }: PropsWithChildren<MostReadLinkProps>) => {
   const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
+  const liteUrl = constructLiteSiteURL(eventTrackingData);
 
   return (
     <div css={getItemCss({ dir, size })} dir={dir}>
       <a
         css={[styles.link, size === 'default' && styles.defaultLink]}
         href={href}
         onClick={clickTrackerHandler}
+        {...(liteUrl && {'add-lite-tracker-params': liteUrl})}
       >
         {title}
       </a>

src/app/components/MostRead/index.tsx

@@ -114,7 +114,7 @@ const MostRead = ({
   className = '',
   sendOptimizelyEvents = false,
 }: MostReadProps) => {
-  const { isAmp, pageType, variant } = useContext(RequestContext);
+  const { isLite, isAmp, pageType, variant } = useContext(RequestContext);
   const { optimizely } = useContext(OptimizelyContext);
   const {
     service,
@@ -145,6 +145,9 @@ const MostRead = ({
       optimizely,
       optimizelyMetricNameOverride: 'most_read',
     }),
+    ...(isLite && {
+      liteSiteUrl: 'liteSiteUrl',
+    })
   };
 
   return isAmp ? (