feat(PPDSC-2322): add tealiumTrack to instrumentation

site/components/component-api/component-api.tsx

@@ -109,7 +109,13 @@ export const ComponentAPI: React.FC<ComponentAPIProps> = ({components}) => (
             {tabs.length > 1 && (
               <Tabs size="medium">
                 {tabs.map(({label, tabSummary, content}) => (
-                  <Tab label={label} overrides={tabOverrides} key={label}>
+                  <Tab
+                    label={label}
+                    overrides={tabOverrides}
+                    key={label}
+                    eventContext={{component: title, tabName: label}}
+                    eventOriginator="component api"
+                  >
                     {tabSummary && <ContentText>{tabSummary}</ContentText>}
                     {content}
                   </Tab>

site/pages/_app.tsx

@@ -122,6 +122,7 @@ export default class MyApp extends App<Props, State> {
     const handlers = [
       instrumentationHandlers.createConsoleHandler(),
       instrumentationHandlers.createTealiumHandler(),
+      instrumentationHandlers.createTealiumTrackHandler(),
     ];
 
     return (

site/pages/_document.tsx

@@ -246,13 +246,11 @@ export default class MyDocument extends Document {
               }
             `}
           />
-          {isSiteEnvProduction && (
-            <Tealium
-              accountId="newsinternational"
-              profileId="thetimes.newskit"
-              env={isSiteEnvProduction ? 'prod' : 'dev'}
-            />
-          )}
+          <Tealium
+            accountId="newsinternational"
+            profileId="thetimes.newskit"
+            env="dev"
+          />
           <Main />
           <NextScript />
         </body>

site/pages/components/tooltip.tsx

@@ -386,6 +386,7 @@ const TooltipComponent = (layoutProps: LayoutProps) => (
     componentAPI={{
       components: [
         {
+          title: 'Tooltip',
           propsSummary:
             'The Tooltip has a range of props that can be used to define an appropriate experience for different use cases.',
           overridesSummary:

site/pages/getting-started/code/instrumentation.tsx

@@ -203,6 +203,7 @@ const InstrumentationSetup = (layoutProps: LayoutProps) => (
 const handlers = [
   instrumentationHandlers.createConsoleHandler(),
   instrumentationHandlers.createTealiumHandler(),
+  instrumentationHandlers.createTealiumTrackHandler(),
 ];
 
 const contextObject = {

site/public/static/examples/instrumentation/instrumentation-provider.tsx

@@ -8,6 +8,7 @@ import {
 const handlers = [
   instrumentationHandlers.createConsoleHandler(),
   instrumentationHandlers.createTealiumHandler(),
+  instrumentationHandlers.createTealiumTrackHandler(),
 ];
 
 const contextObject = {

site/templates/template-sections/__tests__/__snapshots__/component-api-section.test.tsx.snap

@@ -386,7 +386,12 @@ exports[`ComponentAPISection renders section as expected 1`] = `
   \\"overrides\\": {
     \\"typographyPreset\\": \\"utilityButton020\\",
     \\"stylePreset\\": \\"componentPageTabs\\"
-  }
+  },
+  \\"eventContext\\": {
+    \\"component\\": \\"Component\\",
+    \\"tabName\\": \\"Props\\"
+  },
+  \\"eventOriginator\\": \\"component api\\"
 }"
                 data-testid="Tab"
               >
@@ -425,7 +430,12 @@ exports[`ComponentAPISection renders section as expected 1`] = `
   \\"overrides\\": {
     \\"typographyPreset\\": \\"utilityButton020\\",
     \\"stylePreset\\": \\"componentPageTabs\\"
-  }
+  },
+  \\"eventContext\\": {
+    \\"component\\": \\"Component\\",
+    \\"tabName\\": \\"Overrides\\"
+  },
+  \\"eventOriginator\\": \\"component api\\"
 }"
                 data-testid="Tab"
               >

src/instrumentation/handlers/__tests__/tealium-track-no-window.test.ts

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment node
+ */
+import {EventTrigger} from '../../types';
+import {sendEventTrackingToTealium} from '../tealium-track';
+
+const mockEvent = {
+  originator: 'link',
+  trigger: EventTrigger.Click,
+  context: {some: 'object', prop: 'context'},
+};
+
+describe('instrumentation event handler - tealiumTrack on server side (without extendedWindow)', () => {
+  test('returns null', () => {
+    const sendEventResult = sendEventTrackingToTealium(mockEvent);
+    expect(sendEventResult).toEqual(null);
+  });
+});

src/instrumentation/handlers/__tests__/tealium-track.test.ts

@@ -0,0 +1,57 @@
+import {EventTrigger} from '../../types';
+import createTealiumTrackHandler, {ExtendedWindow} from '../tealium-track';
+
+const extendedWindow: ExtendedWindow = (window as Window) as ExtendedWindow;
+
+describe('instrumentation event handler - tealium track', () => {
+  const mockEvents = [
+    {
+      originator: 'link',
+      trigger: EventTrigger.Click,
+      context: {some: 'object 1', prop1: 'context'},
+    },
+    {
+      originator: 'link',
+      trigger: EventTrigger.Swipe,
+      context: {context: 'object 2', prop1: 'context'},
+    },
+    {
+      originator: 'link',
+      trigger: EventTrigger.Load,
+      context: {some: 'object 2', prop1: 'context'},
+    },
+  ];
+
+  const events = [
+    {
+      originator: 'link',
+      trigger: EventTrigger.Load,
+      context: {context: 'object 2', prop1: 'context'},
+    },
+    {
+      originator: 'link',
+      trigger: EventTrigger.Click,
+      context: {context: 'object 2', prop1: 'context'},
+    },
+  ];
+
+  beforeEach(() => {
+    (extendedWindow.tealiumTrack as any) = jest.fn();
+  });
+
+  test('triggers an event', () => {
+    const handler = createTealiumTrackHandler();
+    handler(events);
+
+    expect(extendedWindow.tealiumTrack).toBeCalledWith(events[0]);
+  });
+
+  test('triggers each event', () => {
+    const handler = createTealiumTrackHandler();
+    handler(mockEvents);
+
+    expect(extendedWindow.tealiumTrack).nthCalledWith(1, mockEvents[0]);
+    expect(extendedWindow.tealiumTrack).nthCalledWith(2, mockEvents[1]);
+    expect(extendedWindow.tealiumTrack).toBeCalledWith(mockEvents[2]);
+  });
+});

src/instrumentation/handlers/index.ts

@@ -1,7 +1,9 @@
 import createConsoleHandler from './console';
 import createTealiumHandler from './tealium';
+import createTealiumTrackHandler from './tealium-track';
 
 export const instrumentationHandlers = {
   createConsoleHandler,
   createTealiumHandler,
+  createTealiumTrackHandler,
 };

src/instrumentation/handlers/tealium-track.ts

@@ -0,0 +1,23 @@
+import {EventHandler, InstrumentationEvent} from '../types';
+
+export interface ExtendedWindow extends Window {
+  tealiumTrack(e: InstrumentationEvent): void;
+}
+
+const extendedWindow: ExtendedWindow | null =
+  typeof window !== 'undefined' ? ((window as Window) as ExtendedWindow) : null;
+
+export function sendEventTrackingToTealium(e: InstrumentationEvent) {
+  if (extendedWindow) {
+    return extendedWindow.tealiumTrack(e);
+  }
+  return null;
+}
+
+const createTealiumTrackHandler = (): EventHandler => events =>
+  events.map(event => {
+    sendEventTrackingToTealium(event);
+    return event;
+  });
+
+export default createTealiumTrackHandler;

src/tabs/types.ts

@@ -5,6 +5,7 @@ import {DividerOverrides} from '../divider';
 import {ScrollProps} from '../scroll';
 import {Override} from '../utils/overrides';
 import {LogicalProps} from '../utils/logical-properties';
+import {EventData} from '../instrumentation';
 
 export type TabAlign = 'start' | 'end' | 'center';
 export type TabSize = 'small' | 'medium' | 'large';
@@ -86,6 +87,6 @@ export interface TabButtonProps extends CommonTabProps {
   align?: TabAlign;
 }
 
-export interface TabProps extends CommonTabProps {
+export interface TabProps extends CommonTabProps, EventData {
   label: React.ReactNode;
 }