Add analytics script (fixes #174)

src/components/results/index.tsx

@@ -58,6 +58,16 @@ export default class Results extends Component<Props, State> {
     this.props.onCopyToOtherClick();
   }
 
+  @bind
+  onDownload() {
+    ga('send', 'event', 'compression', 'download', {
+      // GA can’t do floats. So we round to ints.
+      metric1: Math.floor(this.props.source!.file.size),
+      metric2: Math.floor(this.props.imageFile!.size),
+      metric3: Math.floor(this.props.imageFile!.size / this.props.source!.file.size * 1000),
+    });
+  }
+
   render(
     { source, imageFile, downloadUrl, children, copyDirection, buttonPosition }: Props,
     { showLoadingState }: State,
@@ -93,6 +103,7 @@ export default class Results extends Component<Props, State> {
               href={downloadUrl}
               download={imageFile.name}
               title="Download"
+              onClick={this.onDownload}
             >
               <DownloadIcon class={style.downloadIcon} />
             </a>

src/index.ts

@@ -12,3 +12,12 @@ if (!('customElements' in self)) {
 } else {
   init();
 }
+
+window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+ga('create', 'UA-128752250-1', 'auto');
+ga('set', 'transport', 'beacon');
+ga('send', 'pageview');
+  // Load the GA script
+const s = document.createElement('script');
+s.src = 'https://www.google-analytics.com/analytics.js';
+document.head!.appendChild(s);

src/missing-types.d.ts

@@ -34,3 +34,12 @@ declare module 'url-loader!*' {
 }
 
 declare var VERSION: string;
+
+declare var ga: {
+  (...args: any[]): void;
+  q: any[];
+};
+
+interface Window {
+  ga: typeof ga;
+}