Updates to analytics for PWAs (#772)

* Updates to analytics experiments

* adjust hover color on install button

* adjust event action names

* adjust utm_source for share_target launches

Co-authored-by: Jake Archibald <jaffathecake@gmail.com>

src/components/intro/index.tsx

@@ -41,7 +41,7 @@ const demos = [
   },
 ];
 
-const installButtonSource = 'introInstallButton';
+const installButtonSource = 'introInstallButton-Purple';
 
 interface Props {
   onFile: (file: File | Fileish) => void;
@@ -113,7 +113,12 @@ export default class Intro extends Component<Props, State> {
     this.setState({ beforeInstallEvent: event });
 
     // Log the event.
-    ga('send', 'event', 'pwa-install', 'available');
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-shown',
+      nonInteraction: true,
+    };
+    ga('send', 'event', gaEventInfo);
   }
 
   @bind
@@ -130,7 +135,14 @@ export default class Intro extends Component<Props, State> {
 
     // Wait for the user to accept or dismiss the install prompt
     const { outcome } = await beforeInstallEvent.userChoice;
-    ga('send', 'event', 'pwa-install', installButtonSource, outcome);
+    // Send the analytics data
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-clicked',
+      eventLabel: installButtonSource,
+      eventValue: outcome === 'accepted' ? 1 : 0,
+    };
+    ga('send', 'event', gaEventInfo);
 
     // If the prompt was dismissed, we aren't going to install via the button.
     if (outcome === 'dismissed') {

src/components/intro/style.scss

@@ -175,11 +175,12 @@
 
   &:hover,
   &:focus {
-    background: #f5f5f5;
+    background: #504488;
   }
 
-  background: #fff;
+  background: #5D509E;
   border: 1px solid #e8e8e8;
+  color: #fff;
   padding: 14px;
   font-size: 1.3rem;
 

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Squoosh",
   "short_name": "Squoosh",
-  "start_url": "/",
+  "start_url": "/?utm_medium=PWA&utm_source=launcher",
   "display": "standalone",
   "orientation": "any",
   "background_color": "#fff",
@@ -20,7 +20,7 @@
     }
   ],
   "share_target": {
-    "action": "/?share-target",
+    "action": "/?utm_medium=PWA&utm_source=share-target&share-target",
     "method": "POST",
     "enctype": "multipart/form-data",
     "params": {