From 57faa1c60b0e65cb77a8218a0a79cdd9a1074015 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Fri, 18 Aug 2023 12:41:19 +0100
Subject: [PATCH] add posthog events

---
 Accounts/src/Pages/Login.tsx    |   8 ++-
 Accounts/src/Pages/Register.tsx |  10 ++-
 Home/views/demo.ejs             |  88 +++++++++++++++++-------
 Home/views/head.ejs             | 114 ++++++++++++++++++++------------
 4 files changed, 153 insertions(+), 67 deletions(-)

diff --git a/Accounts/src/Pages/Login.tsx b/Accounts/src/Pages/Login.tsx
index 9f66c02f8d..418faa7d6b 100644
--- a/Accounts/src/Pages/Login.tsx
+++ b/Accounts/src/Pages/Login.tsx
@@ -13,6 +13,7 @@ import UserUtil from 'CommonUI/src/Utils/User';
 import Navigation from 'CommonUI/src/Utils/Navigation';
 import { DASHBOARD_URL } from 'CommonUI/src/Config';
 import Alert, { AlertType } from 'CommonUI/src/Components/Alerts/Alert';
+import UiAnalytics from 'CommonUI/src/Utils/Analytics';
 
 const LoginPage: () => JSX.Element = () => {
     const apiUrl: URL = LOGIN_API_URL;
@@ -33,7 +34,7 @@ const LoginPage: () => JSX.Element = () => {
                 <img
                     className="mx-auto h-12 w-auto"
                     src={OneUptimeLogo}
-                    alt="Your Company"
+                    alt="OneUptime"
                 />
                 <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
                     Sign in to your account
@@ -93,6 +94,11 @@ const LoginPage: () => JSX.Element = () => {
                             value: User,
                             miscData: JSONObject | undefined
                         ) => {
+                            if (value && value.email) {
+                                UiAnalytics.userAuth(value.email);
+                                UiAnalytics.capture('accounts/login');
+                            }
+
                             LoginUtil.login({
                                 user: value,
                                 token: miscData ? miscData['token'] : undefined,
diff --git a/Accounts/src/Pages/Register.tsx b/Accounts/src/Pages/Register.tsx
index 836cd8eadd..07c6e77413 100644
--- a/Accounts/src/Pages/Register.tsx
+++ b/Accounts/src/Pages/Register.tsx
@@ -14,6 +14,7 @@ import URL from 'Common/Types/API/URL';
 import { SIGNUP_API_URL } from '../Utils/ApiPaths';
 import Fields from 'CommonUI/src/Components/Forms/Types/Fields';
 import Dictionary from 'Common/Types/Dictionary';
+import UiAnalytics from 'CommonUI/src/Utils/Analytics';
 
 const RegisterPage: () => JSX.Element = () => {
     const apiUrl: URL = SIGNUP_API_URL;
@@ -102,7 +103,7 @@ const RegisterPage: () => JSX.Element = () => {
                 <img
                     className="mx-auto h-12 w-auto"
                     src={OneUptimeLogo}
-                    alt="Your Company"
+                    alt="OneUptime"
                 />
                 <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
                     Create your OneUptime account
@@ -141,6 +142,8 @@ const RegisterPage: () => JSX.Element = () => {
                                 item.utmTerm = utmParams['utmTerm'] || '';
                                 item.utmContent = utmParams['utmContent'] || '';
                                 item.utmUrl = utmParams['utmUrl'] || '';
+
+                                UiAnalytics.capture('utm_event', utmParams);
                             }
 
                             return Promise.resolve(item);
@@ -151,6 +154,11 @@ const RegisterPage: () => JSX.Element = () => {
                             value: User,
                             miscData: JSONObject | undefined
                         ) => {
+                            if (value && value.email) {
+                                UiAnalytics.userAuth(value.email);
+                                UiAnalytics.capture('accounts/register');
+                            }
+
                             LoginUtil.login({
                                 user: value,
                                 token: miscData ? miscData['token'] : undefined,
diff --git a/Home/views/demo.ejs b/Home/views/demo.ejs
index d0b486b19f..82d145032d 100644
--- a/Home/views/demo.ejs
+++ b/Home/views/demo.ejs
@@ -4,38 +4,78 @@
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
 <head>
-    <title>OneUptime | One Complete Observability platform. </title>
-    <meta name="description"
-        content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
-        <%- include('head') -%>
+  <title>OneUptime | One Complete Observability platform. </title>
+  <meta name="description"
+    content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
+  <%- include('head') -%>
 
 </head>
 
 <body>
   <%- include('nav') -%>
     <div class="bg-white">
-        <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
-          <div class="sm:align-center sm:flex sm:flex-col">
-            <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">Request Demo</h1>
-            <p class="mt-5 text-xl text-gray-500 sm:text-center">Our team is happy to give you a personalized demo. Pick any time slot that works for you.</p>
-           
-          </div>
-         
-
-
-          <!-- Calendly inline widget begin -->
-<div class="calendly-inline-widget" data-url="https://calendly.com/simon-larsen/demo" style="min-width:320px;height:700px;"></div>
-<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
-<!-- Calendly inline widget end -->
-
+      <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
+        <div class="sm:align-center sm:flex sm:flex-col">
+          <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">Request Demo</h1>
+          <p class="mt-5 text-xl text-gray-500 sm:text-center">Our team is happy to give you a personalized demo. Pick
+            any time slot that works for you.</p>
 
         </div>
-      </div>
 
-      <%- include('logo-roll') -%>
-     
+
+        <div style="margin-top: 50px;">
+          <!-- Cal inline embed code begins -->
+          <div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
+          <script type="text/javascript">
+            (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
+            Cal("init", { origin: "https://cal.com" });
+
+            Cal("inline", {
+              elementOrSelector: "#my-cal-inline",
+              calLink: "oneuptimehq/demo",
+              layout: "month_view"
+            });
+
+            Cal("ui", { "styles": { "branding": { "brandColor": "#6366f1" } }, "hideEventTypeDetails": false, "layout": "month_view" });
+
+            Cal("on", {
+              action: "bookingSuccessful",
+              callback: (e) => {
+                // `data` is properties for the event.
+                // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
+                // `namespace` tells you the Cal namespace for which the event is fired/
+                const { data, type, namespace } = e.detail;
+
+                if (posthog) {
+                  posthog.capture('home/demo-booked', {
+                    'page': {
+                      'path': window.location.pathname,
+                      'referrer': document.referrer,
+                      'search': window.location.search,
+                      'url': window.location.href,
+                      'title': document.title,
+                    },
+                    'data': data,
+                    'type': type,
+                    'namespace': namespace
+                  });
+                }
+              }
+            })
+
+          </script>
+          <!-- Cal inline embed code ends -->
+        </div>
+
+
+      </div>
+    </div>
+
+    <%- include('logo-roll') -%>
+
       <%- include('features-table') -%>
-      <%- include('cta') -%>
-  <%- include('footer') -%>
+        <%- include('cta') -%>
+          <%- include('footer') -%>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Home/views/head.ejs b/Home/views/head.ejs
index 7326dce969..59c31de355 100644
--- a/Home/views/head.ejs
+++ b/Home/views/head.ejs
@@ -1,47 +1,51 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <style>
-      * {
-      font-family: Inter;
-      }
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+<style>
+    * {
+        font-family: Inter;
+    }
 
 
-      input[type="datetime-local"]::-webkit-calendar-picker-indicator {
-         background: transparent;
-          bottom: 0;
-          color: transparent;
-          cursor: pointer;
-          height: auto;
-          left: 0;
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: auto;
-      }
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+        background: transparent;
+        bottom: 0;
+        color: transparent;
+        cursor: pointer;
+        height: auto;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
 
-      input[type="date"]::-webkit-calendar-picker-indicator {
-         background: transparent;
-          bottom: 0;
-          color: transparent;
-          cursor: pointer;
-          height: auto;
-          left: 0;
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: auto;
-      }
-      </style>
-    <script src="https://cdn.tailwindcss.com"></script>
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        background: transparent;
+        bottom: 0;
+        color: transparent;
+        cursor: pointer;
+        height: auto;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+</style>
+<script src="https://cdn.tailwindcss.com"></script>
 
-    <!-- Google Tag Manager -->
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-PKQD5WH');</script>
-    <!-- End Google Tag Manager -->
+<!-- Google Tag Manager -->
+<script>(function (w, d, s, l, i) {
+        w[l] = w[l] || []; w[l].push({
+            'gtm.start':
+                new Date().getTime(), event: 'gtm.js'
+        }); var f = d.getElementsByTagName(s)[0],
+            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
+<!-- End Google Tag Manager -->
 
 
 <style>
@@ -51,8 +55,25 @@
 </style>
 
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-       //check if utm_source is present in the URL and save it to localstorage. 
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    posthog.init('phc_lrbfSHsDc1YOhfbabPI8ncLCKz8eqeGdmu0O6IRKaz1',{api_host:'https://eu.posthog.com', autocapture: false})
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        //check if utm_source is present in the URL and save it to localstorage. 
+
+        if(posthog){
+            posthog.capture('home/page_view', {
+                'page': {
+                    'path': window.location.pathname,
+                    'referrer': document.referrer,
+                    'search': window.location.search,
+                    'url': window.location.href,
+                    'title': document.title,
+                }
+            });
+        }
 
         var urlParams = new URLSearchParams(window.location.search);
         var utm_source = urlParams.get('utm_source');
@@ -62,13 +83,24 @@
         var utm_content = urlParams.get('utm_content');
         var utm_url = window.location.href;
 
-        if(utm_source != null){
+        if (utm_source != null) {
             localStorage.setItem('utmSource', utm_source);
             localStorage.setItem('utmMedium', utm_medium);
             localStorage.setItem('utmCampaign', utm_campaign);
             localStorage.setItem('utmTerm', utm_term);
             localStorage.setItem('utmContent', utm_content);
             localStorage.setItem('utmUrl', utm_url);
+
+            if (posthog) {
+                posthog.capture('home/utm_event', {
+                    utm_source: utm_source,
+                    utm_medium: utm_medium,
+                    utm_campaign: utm_campaign,
+                    utm_term: utm_term,
+                    utm_content: utm_content,
+                    utm_url: utm_url
+                })
+            }
         }
     });
 </script>