Transcript-tracking: Initial commit

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
+import isOperaProxy from '#app/lib/utilities/isOperaProxy';
+import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
+import { ATIAnalyticsProps } from '../types';
+
+// some other metric?
+const getNoJsATIPageViewUrl = (atiPageViewUrl: string) =>
+  atiPageViewUrl.includes('x8=[simorgh]')
+    ? atiPageViewUrl.replace('x8=[simorgh]', 'x8=[simorgh-nojs]')
+    : `${atiPageViewUrl}&x8=[BLAH]`;
+
+const renderNoScriptTrackingPixel = (atiPageViewUrl: string) => {
+  return (
+    <noscript>
+      <img
+        height="1px"
+        width="1px"
+        alt=""
+        // This should probably have been a styled component. But the author is
+        // lazy and didn't want to write a fuzzy matcher for the unit AND e2e
+        // tests (you can't predict the class names chosen by emotion)
+        style={{ position: 'absolute' }}
+        src={getNoJsATIPageViewUrl(atiPageViewUrl)}
+      />
+    </noscript>
+  );
+};
+
+const MyAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
+  const atiPageViewUrlString =
+    getEnvConfig().SIMORGH_ATI_BASE_URL + pageviewParams;
+
+  console.log('atiPageViewUrlString', atiPageViewUrlString);
+
+  const [atiPageViewUrl] = useState(atiPageViewUrlString);
+
+  console.log('atiPageViewUrl', atiPageViewUrl);
+
+  useEffect(() => {
+    if (!isOperaProxy()) sendBeacon(atiPageViewUrl);
+  }, [atiPageViewUrl]);
+
+  return <>{renderNoScriptTrackingPixel(atiPageViewUrl)}</>;
+};
+
+export default MyAnalytics;

src/app/components/ATIAnalytics/myAnalytics.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { RequestContext } from '#contexts/RequestContext';
+import { ServiceContext } from '../../contexts/ServiceContext';
+import MyAnalytics from './canonical/sendBeaconTranscript';
+import { ATIProps } from './types';
+import buildATIUrl from './params';
+
+const ATIAnalyticsTranscript = ({ data, atiData }: ATIProps) => {
+  const requestContext = useContext(RequestContext);
+  const serviceContext = useContext(ServiceContext);
+
+  const pageviewParams = buildATIUrl({
+    requestContext,
+    serviceContext,
+    data,
+    atiData,
+  }) as string;
+
+  return <MyAnalytics pageviewParams={pageviewParams} />;
+};
+
+export default ATIAnalyticsTranscript;

src/app/components/Transcript/index.styles.tsx

@@ -3,6 +3,11 @@ import pixelsToRem from '#app/utilities/pixelsToRem';
 import { focusIndicatorThickness } from '../ThemeProvider/focusIndicator';
 
 export default {
+  isThisTerrible: () =>
+    css({
+      display: 'none',
+    }),
+
   details: ({ spacings, palette, isDarkUi }: Theme) =>
     css({
       backgroundColor: isDarkUi ? palette.GREY_7 : palette.WHITE,
@@ -19,6 +24,9 @@ export default {
       '&[open] summary svg': {
         transform: 'rotate(90deg)',
       },
+      '&[open] #isThisTerrible': {
+        display: 'initial',
+      },
     }),
 
   summary: ({ spacings, palette }: Theme) =>

src/app/components/Transcript/index.tsx

@@ -7,6 +7,7 @@ import TranscriptTimestamp from './TranscriptTimestamp';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { RightArrow as ArrowSvg } from '../icons';
 import { TranscriptBlock, TranscriptItem } from './types';
+import ATIAnalyticsTranscript from '../ATIAnalytics/myAnalytics';
 
 // TO DO - move this to BFF
 const removeHoursMilliseconds = (timestamp: string) => timestamp.slice(3, -4);
@@ -37,6 +38,21 @@ const Transcript = ({
 
   const formattedTitle = title ? `, ${title}` : '';
 
+  const myATIData = {
+    categoryName: null,
+    contentId: 'urn:bbc:optimo:asset:ce42wzqr2mko',
+    contentType: 'article',
+    language: 'es',
+    ldpThingIds: null,
+    ldpThingLabels: null,
+    nationsProducer: null,
+    pageIdentifier: 'mundo.articles.ce42wzqr2mko.page',
+    pageTitle:
+      'Este artículo de prueba ha sido creado para que podamos ejecutar pruebas',
+    timePublished: '2019-10-04T10:58:46.977Z',
+    timeUpdated: '2019-10-04T10:58:46.977Z',
+  };
+
   return (
     <details css={styles.details}>
       <summary css={styles.summary}>
@@ -49,6 +65,10 @@ const Transcript = ({
           {title && <VisuallyHiddenText>{formattedTitle}</VisuallyHiddenText>}
         </span>
       </summary>
+      {/* dont think this works */}
+      <span css={styles.isThisTerrible} id="isThisTerrible">
+        <ATIAnalyticsTranscript />
+      </span>
       <ul css={styles.ul} role="list">
         {/*  eslint-disable-next-line @typescript-eslint/no-unused-vars */}
         {transcriptItems.map((item, _index) => (

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -236,6 +236,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     showRelatedTopics && topics.length > 0 && !isTransliterated,
   );
 
+  console.log('atiData', atiData);
+
   return (
     <div css={styles.pageWrapper}>
       {shouldEnableExperimentTopStories && (