feat: implement show by chance and random delay

Author: sgratzl

config.toml

@@ -112,6 +112,8 @@ relativeURLs = false
     apiUrl = "https://cmu-delphi.github.io/delphi-epidata"
     twitter = "CmuDelphi"
     feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748="
-    feedbackRequest = "We'd love to hear from you"
-    feedbackDelay = 30 # wait for initial 30sec to show the notification
+    feedbackLikelihoodMobile = 0.2
+    feedbackLikelihoodDesktop = 1
+    feedbackDelayMin = 10 # in sec
+    feedbackDelayMax = 100 # in sec
     feedbackDuration = 60 # show it for 60sec

themes/delphi/assets/js/feedback-button.js

@@ -46,7 +46,18 @@ import UIkit from "uikit/dist/js/uikit.js";
   const container = document.querySelector(".feedback-popup-container");
 
   if (container && !wasRecentlySubmitted()) {
-    const delay = Number.parseInt(container.dataset.delay, 10) * 1000;
+    const delayMin = Number.parseInt(container.dataset.delayMin, 10) * 1000;
+    const delayMax = Number.parseInt(container.dataset.delayMax, 10) * 1000;
+    const delay = delayMin + Math.random() * (delayMax - delayMin);
+
+    const feedbackLikelihoodDesktop = Number.parseFloat(container.dataset.likeDesktop);
+    const feedbackLikelihoodMobile = Number.parseFloat(container.dataset.likeMobile);
+    const isMobile = window.matchMedia("only screen and (max-width: 700px)").matches;
+
+    const showByChance =
+      (isMobile && Math.random() <= feedbackLikelihoodMobile) ||
+      (!isMobile && Math.random() <= feedbackLikelihoodDesktop);
+
     const duration = Number.parseInt(container.dataset.duration, 10) * 1000;
     const formLink = container.dataset.href;
 
@@ -70,6 +81,8 @@ import UIkit from "uikit/dist/js/uikit.js";
       });
     };
     // initial delay
-    setTimeout(showFeedbackNotification, delay);
+    if (showByChance) {
+      setTimeout(showFeedbackNotification, delay);
+    }
   }
 })();

themes/delphi/layouts/partials/footer.html

@@ -55,7 +55,10 @@ <h5 class="uk-text-bold">Contact</h5>
     class="feedback-popup-container"
     style="display: none"
     data-href="{{ .Site.Params.feedbackForm }}"
-    data-delay="{{ .Site.Params.feedbackDelay }}"
+    data-like-mobile="{{ .Site.Params.feedbackLikelihoodMobile }}"
+    data-like-desktop="{{ .Site.Params.feedbackLikelihoodDesktop }}"
+    data-delay-min="{{ .Site.Params.feedbackDelayMin }}"
+    data-delay-max="{{ .Site.Params.feedbackDelayMax }}"
     data-duration="{{ .Site.Params.feedbackDuration }}"
   >
     {{ partial "font-awesome.html" "solid/question-circle" }}