diff --git a/src/components/CodeBlock/index.tsx b/src/components/CodeBlock/index.tsx index 5604ddec9a3..f6d036b966f 100644 --- a/src/components/CodeBlock/index.tsx +++ b/src/components/CodeBlock/index.tsx @@ -2,15 +2,16 @@ import { CodeBlockStyle, CodeHighlightStyle, CopyButtonStyle, - LineCountStyle, -} from "./styles"; -import React from "react"; -import copy from "copy-to-clipboard"; + LineCountStyle +} from './styles'; +import React from 'react'; +import copy from 'copy-to-clipboard'; +import { trackCopyClicks } from '../../utils/track'; -const COPY = "copy"; -const COPIED = "copied"; -const FAILED = "failed to copy"; -const CONSOLE = "console"; +const COPY = 'copy'; +const COPIED = 'copied'; +const FAILED = 'failed to copy'; +const CONSOLE = 'console'; type CopyMessageType = typeof COPY | typeof COPIED | typeof FAILED; @@ -29,7 +30,7 @@ class CodeBlock extends React.Component { constructor(props) { super(props); - this.state = {copyMessage: COPY}; + this.state = { copyMessage: COPY }; } lineNumbers = () => { @@ -56,12 +57,13 @@ class CodeBlock extends React.Component { copyToClipboard = () => { if (this.element && this.element.textContent) { copy(this.element.textContent); - this.setState({copyMessage: COPIED}); + trackCopyClicks(this.element.textContent); + this.setState({ copyMessage: COPIED }); } else { - this.setState({copyMessage: FAILED}); + this.setState({ copyMessage: FAILED }); } setTimeout(() => { - this.setState({copyMessage: COPY}); + this.setState({ copyMessage: COPY }); }, 1500); }; @@ -78,7 +80,7 @@ class CodeBlock extends React.Component { render() { if (this.props.children === undefined) return
; const oneLine = - this.props.lineCount === "1" || this.props.language === CONSOLE; + this.props.lineCount === '1' || this.props.language === CONSOLE; return ( diff --git a/src/utils/track.ts b/src/utils/track.ts index 9b4e463a427..2b461cd8548 100644 --- a/src/utils/track.ts +++ b/src/utils/track.ts @@ -159,6 +159,20 @@ export const trackFeedbackSubmission = (feedback: boolean) => { } } + AWSMA.ready(() => { + document.dispatchEvent(new CustomEvent(AWSMA.TRIGGER_EVENT, {detail: opt})); + }); +} + +export const trackCopyClicks = (data) => { + const opt = { + event: { + type: 'click', + name: 'CopyCode' + }, + data: data + } + AWSMA.ready(() => { document.dispatchEvent(new CustomEvent(AWSMA.TRIGGER_EVENT, {detail: opt})); });