Skip to content

fix(Codebytes): tracking tweaks for monolith #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
borisonr merged 6 commits into from
Feb 3, 2022
Merged

fix(Codebytes): tracking tweaks for monolith #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0b58775
trackign tweaks for monolith
borisonr Feb 2, 2022
716a28a
fix tests
borisonr Feb 3, 2022
1ab8e74
optional trackingdata
borisonr Feb 3, 2022
a89f562
optional param for track method
borisonr Feb 3, 2022
e8b7dc2
missed another
borisonr Feb 3, 2022
03a0b04
allow import in monolith
borisonr Feb 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/codebytes/src/__tests__/codebyte-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/codebytes/src/__tests__/editor-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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);
});
});
});
9 changes: 5 additions & 4 deletions packages/codebytes/src/codeByteEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
onEdit,
onLanguageChange,
onCopy,
trackingData,
}) => {
const getInitialText = () => {
if (initialText !== undefined) return initialText;
Expand Down Expand Up @@ -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 ? (
Expand All @@ -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
Expand All @@ -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');
Copy link
Copy Markdown

@zippyzow zippyzow Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice catch

}}
/>
)}
Expand Down
7 changes: 5 additions & 2 deletions packages/codebytes/src/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -43,6 +44,7 @@ type EditorProps = {
onChange: (text: string) => void;
snippetsBaseUrl?: string;
onCopy?: CodebytesChangeHandler;
trackingData?: Omit<UserClickData, 'target'>;
};

export const Editor: React.FC<EditorProps> = ({
Expand All @@ -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');
Expand All @@ -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);
}
};

Expand All @@ -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);
Expand Down
13 changes: 12 additions & 1 deletion packages/codebytes/src/helpers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { UserClickData } from '@codecademy/tracking';

import { trackUserClick } from '../libs/eventTracking';

export type CodebyteOptions = {
Expand Down Expand Up @@ -27,7 +29,16 @@ export const getOptions = (): CodebyteOptions => {
};
};

export const trackClick = (target: string) => {
export const trackClick = (
target: string,
trackingData?: Omit<UserClickData, 'target'>
) => {
if (trackingData) {
Copy link
Copy Markdown

@zippyzow zippyzow Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we make comment about tech debt ticket here/mention homepage?

Copy link
Copy Markdown
Contributor Author

@borisonr borisonr Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% good call. just wanted to see if you and @BandanaKM were okay with this stopgap approach

Copy link
Copy Markdown
Contributor

@BandanaKM BandanaKM Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, think this works as a quick way to pass in the correct tracking data from monolith to avoid getting the weird values for clientName in all of our userClick events in the monolith.

we can definitely refactor this as a fast follow. ideally we can get rid of this file in the future and just have getOptions and all the relevant dependencies in the next.js version, since they were primarily intended for the query params

if we do end up passing in an object later with the tracking functions, we can definitely do that

return trackUserClick({
...trackingData,
target,
});
}
const options = getOptions();
const page_name = options.renderMode
? `${options.clientName}_${options.renderMode}`
Expand Down
2 changes: 1 addition & 1 deletion packages/codebytes/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export * from './codeByteEditor';
export { LanguageOption, LanguageOptions } from './consts';
export * from './consts';
Copy link
Copy Markdown
Contributor Author

@borisonr borisonr Feb 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was blocking us from being able to import in the monolith for some reason, so we're just gonna do this to unblock

3 changes: 3 additions & 0 deletions packages/codebytes/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { UserClickData } from '@codecademy/tracking';

import { LanguageOption } from './consts';

export interface CodebytesChangeHandler {
Expand All @@ -12,4 +14,5 @@ export interface CodeByteEditorProps {
snippetsBaseUrl?: string;
onEdit?: CodebytesChangeHandler;
onLanguageChange?: CodebytesChangeHandler;
trackingData?: Omit<UserClickData, 'target'>;
}
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15695,7 +15695,7 @@ react-remove-scroll@^2.4.1:
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"

react-resize-observer@1.1.1:
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==
Expand Down