Merge pull request #5204 from aws-amplify/copyTracking

Code Copy Tracking

Author: jacoblogan

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<CodeBlockProps, CodeBlockState> {
 
   constructor(props) {
     super(props);
-    this.state = {copyMessage: COPY};
+    this.state = { copyMessage: COPY };
   }
 
   lineNumbers = () => {
@@ -56,12 +57,13 @@ class CodeBlock extends React.Component<CodeBlockProps, CodeBlockState> {
   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<CodeBlockProps, CodeBlockState> {
   render() {
     if (this.props.children === undefined) return <div></div>;
     const oneLine =
-      this.props.lineCount === "1" || this.props.language === CONSOLE;
+      this.props.lineCount === '1' || this.props.language === CONSOLE;
 
     return (
       <CodeBlockStyle oneLine={oneLine}>

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}));
   });