Merge pull request #263 from GoogleChromeLabs/analytics-privacy

Adding readme, privacy section, reducing resolution of analytics data.

README.md

@@ -1,5 +1,32 @@
 # Squoosh!
 
-Squoosh will be an image compression web app that allows you to dive into the
-advanced options provided by various image compressors.
+Squoosh is an image compression web app that allows you to dive into the advanced options provided
+by various image compressors.
 
+# Privacy
+
+Google analytics is used to record the following:
+
+* [Basic visit data](https://support.google.com/analytics/answer/6004245?hl=en&ref_topic=2919631).
+* Before and after image size once an image is downloaded. These values are rounded to the nearest
+  kilobyte.
+
+Impage compression is handled locally, no additional data is sent to the server.
+
+# Building locally
+
+Clone the repo, and:
+
+```sh
+npm install
+npm run build
+```
+
+You'll get an error on first build because of [a stupid bug we haven't fixed
+yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
+
+You can run the development server with:
+
+```sh
+npm start
+```

src/components/intro/index.tsx

@@ -129,6 +129,11 @@ export default class Intro extends Component<Props, State> {
         <ul class={style.relatedLinks}>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
+          <li>
+            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
+              Privacy
+            </a>
+          </li>
         </ul>
       </div>
     );

src/components/results/index.tsx

@@ -60,11 +60,16 @@ export default class Results extends Component<Props, State> {
 
   @bind
   onDownload() {
+    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
+    // avoid cases where exact image sizes leak something interesting about the user.
+    const before = Math.round(this.props.source!.file.size / 1024);
+    const after = Math.round(this.props.imageFile!.size / 1024);
+    const change = Math.round(after / before * 1000);
+
     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),
+      metric1: before,
+      metric2: after,
+      metric3: change,
     });
   }