fix(Codebytes): tracking tweaks for monolith (#31)

* trackign tweaks for monolith

* fix tests

* optional trackingdata

* optional param for track method

* missed another

* allow import in monolith

Author: borisonr

packages/codebytes/src/__tests__/codebyte-test.tsx

@@ -144,14 +144,14 @@ describe('CodeBytes', () => {
       const { view } = renderWrapper({});
       const logo = view.getByLabelText('visit codecademy.com');
       userEvent.click(logo);
-      expect(trackClick).toHaveBeenCalledWith('logo');
+      expect(trackClick).toHaveBeenCalledWith('logo', undefined);
     });
 
     it('triggers trackClick on language selection', () => {
       const { view } = renderWrapper();
       const selectedLanguage = view.getByRole('combobox') as Element;
       userEvent.selectOptions(selectedLanguage, ['javascript']);
-      expect(trackClick).toHaveBeenCalledWith('lang_select');
+      expect(trackClick).toHaveBeenCalledWith('lang_select', undefined);
     });
 
     it('triggers trackClick for the first edit in view mode', () => {
@@ -164,7 +164,7 @@ describe('CodeBytes', () => {
       const editor = view.getByTestId(mockEditorTestId);
       userEvent.type(editor, 'd');
 
-      expect(trackClick).toHaveBeenCalledWith('edit');
+      expect(trackClick).toHaveBeenCalledWith('edit', undefined);
     });
 
     it('triggers trackUserImpression for view mode', () => {

packages/codebytes/src/__tests__/editor-test.tsx

@@ -94,7 +94,7 @@ describe('Editor', () => {
         userEvent.click(runButton);
       });
 
-      expect(trackClick).toHaveBeenCalledWith('run');
+      expect(trackClick).toHaveBeenCalledWith('run', undefined);
     });
 
     it('tracks clicks on the copy codebyte button', () => {
@@ -107,7 +107,7 @@ describe('Editor', () => {
       const copyButton = view.getByTestId('copy-codebyte-btn');
       userEvent.click(copyButton);
 
-      expect(trackClick).toHaveBeenCalledWith('copy');
+      expect(trackClick).toHaveBeenCalledWith('copy', undefined);
     });
   });
 });

packages/codebytes/src/codeByteEditor.tsx

@@ -43,6 +43,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   onEdit,
   onLanguageChange,
   onCopy,
+  trackingData,
 }) => {
   const getInitialText = () => {
     if (initialText !== undefined) return initialText;
@@ -78,7 +79,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
-          onClick={() => trackClick('logo')}
+          onClick={() => trackClick('logo', trackingData)}
         />
       </Box>
       {language ? (
@@ -92,11 +93,12 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             const { renderMode } = getOptions();
             if (!renderMode && hasBeenEdited === false) {
               setHasBeenEdited(true);
-              trackClick('edit');
+              trackClick('edit', trackingData);
             }
           }}
           snippetsBaseUrl={snippetsBaseUrl}
           onCopy={onCopy}
+          trackingData={trackingData}
         />
       ) : (
         <LanguageSelection
@@ -105,9 +107,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
               text || (newLanguage ? helloWorld[newLanguage] : '');
             setLanguage(newLanguage);
             setText(newText);
-            trackClick('lang_select');
+            trackClick('lang_select', trackingData);
             onLanguageChange?.(newText, newLanguage);
-            trackClick('lang_select');
           }}
         />
       )}

packages/codebytes/src/editor.tsx

@@ -6,6 +6,7 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
+import { UserClickData } from '@codecademy/tracking';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -43,6 +44,7 @@ type EditorProps = {
   onChange: (text: string) => void;
   snippetsBaseUrl?: string;
   onCopy?: CodebytesChangeHandler;
+  trackingData?: Omit<UserClickData, 'target'>;
 };
 
 export const Editor: React.FC<EditorProps> = ({
@@ -52,6 +54,7 @@ export const Editor: React.FC<EditorProps> = ({
   onChange,
   onCopy,
   snippetsBaseUrl,
+  trackingData,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -64,7 +67,7 @@ export const Editor: React.FC<EditorProps> = ({
         .catch(() => console.error('Failed to copy'));
       setIsCodeByteCopied(true);
       onCopy?.(text, language);
-      trackClick('copy');
+      trackClick('copy', trackingData);
     }
   };
 
@@ -83,7 +86,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
-    trackClick('run');
+    trackClick('run', trackingData);
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);

packages/codebytes/src/helpers/index.ts

@@ -1,3 +1,5 @@
+import { UserClickData } from '@codecademy/tracking';
+
 import { trackUserClick } from '../libs/eventTracking';
 
 export type CodebyteOptions = {
@@ -27,7 +29,16 @@ export const getOptions = (): CodebyteOptions => {
   };
 };
 
-export const trackClick = (target: string) => {
+export const trackClick = (
+  target: string,
+  trackingData?: Omit<UserClickData, 'target'>
+) => {
+  if (trackingData) {
+    return trackUserClick({
+      ...trackingData,
+      target,
+    });
+  }
   const options = getOptions();
   const page_name = options.renderMode
     ? `${options.clientName}_${options.renderMode}`

packages/codebytes/src/index.ts

@@ -1,2 +1,2 @@
 export * from './codeByteEditor';
-export { LanguageOption, LanguageOptions } from './consts';
+export * from './consts';

packages/codebytes/src/types.ts

@@ -1,3 +1,5 @@
+import { UserClickData } from '@codecademy/tracking';
+
 import { LanguageOption } from './consts';
 
 export interface CodebytesChangeHandler {
@@ -12,4 +14,5 @@ export interface CodeByteEditorProps {
   snippetsBaseUrl?: string;
   onEdit?: CodebytesChangeHandler;
   onLanguageChange?: CodebytesChangeHandler;
+  trackingData?: Omit<UserClickData, 'target'>;
 }

yarn.lock

@@ -15695,7 +15695,7 @@ react-remove-scroll@^2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-[email protected]:
+react-resize-observer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/react-resize-observer/-/react-resize-observer-1.1.1.tgz#641dfa2e0f4bd2549a8ab4bbbaf43b68f3dcaf76"
   integrity sha512-3R+90Hou90Mr3wJYc+unsySC8Pn91V4nmjO32NKvUvjphRUbq9HisyLg7bDyGBE7xlMrrM6Fax7iNQaFdc/FYA==