mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

add posthog events

Browse Source
This commit is contained in:
Simon Larsen 2023-08-18 12:41:19 +01:00
parent 50b9743a4b
commit 57faa1c60b
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
4 changed files with 153 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Accounts/src/Pages/Login.tsx
View File

@ -13,6 +13,7 @@ import UserUtil from 'CommonUI/src/Utils/User';
import Navigation from 'CommonUI/src/Utils/Navigation'; import Navigation from 'CommonUI/src/Utils/Navigation';
import { DASHBOARD_URL } from 'CommonUI/src/Config'; import { DASHBOARD_URL } from 'CommonUI/src/Config';
import Alert, { AlertType } from 'CommonUI/src/Components/Alerts/Alert'; import Alert, { AlertType } from 'CommonUI/src/Components/Alerts/Alert';
import UiAnalytics from 'CommonUI/src/Utils/Analytics';
const LoginPage: () => JSX.Element = () => { const LoginPage: () => JSX.Element = () => {
const apiUrl: URL = LOGIN_API_URL; const apiUrl: URL = LOGIN_API_URL;
@ -33,7 +34,7 @@ const LoginPage: () => JSX.Element = () => {
<img <img
className="mx-auto h-12 w-auto" className="mx-auto h-12 w-auto"
src={OneUptimeLogo} src={OneUptimeLogo}
alt="Your Company" alt="OneUptime"
/> />
<h2 className="mt-6 text-center text-2xl tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-2xl tracking-tight text-gray-900">
Sign in to your account Sign in to your account
@ -93,6 +94,11 @@ const LoginPage: () => JSX.Element = () => {
value: User, value: User,
miscData: JSONObject | undefined miscData: JSONObject | undefined
) => { ) => {
if (value && value.email) {
UiAnalytics.userAuth(value.email);
UiAnalytics.capture('accounts/login');
}
LoginUtil.login({ LoginUtil.login({
user: value, user: value,
token: miscData ? miscData['token'] : undefined, token: miscData ? miscData['token'] : undefined,

10
Accounts/src/Pages/Register.tsx
View File

@ -14,6 +14,7 @@ import URL from 'Common/Types/API/URL';
import { SIGNUP_API_URL } from '../Utils/ApiPaths'; import { SIGNUP_API_URL } from '../Utils/ApiPaths';
import Fields from 'CommonUI/src/Components/Forms/Types/Fields'; import Fields from 'CommonUI/src/Components/Forms/Types/Fields';
import Dictionary from 'Common/Types/Dictionary'; import Dictionary from 'Common/Types/Dictionary';
import UiAnalytics from 'CommonUI/src/Utils/Analytics';
const RegisterPage: () => JSX.Element = () => { const RegisterPage: () => JSX.Element = () => {
const apiUrl: URL = SIGNUP_API_URL; const apiUrl: URL = SIGNUP_API_URL;
@ -102,7 +103,7 @@ const RegisterPage: () => JSX.Element = () => {
<img <img
className="mx-auto h-12 w-auto" className="mx-auto h-12 w-auto"
src={OneUptimeLogo} src={OneUptimeLogo}
alt="Your Company" alt="OneUptime"
/> />
<h2 className="mt-6 text-center text-2xl tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-2xl tracking-tight text-gray-900">
Create your OneUptime account Create your OneUptime account
@ -141,6 +142,8 @@ const RegisterPage: () => JSX.Element = () => {
item.utmTerm = utmParams['utmTerm'] || ''; item.utmTerm = utmParams['utmTerm'] || '';
item.utmContent = utmParams['utmContent'] || ''; item.utmContent = utmParams['utmContent'] || '';
item.utmUrl = utmParams['utmUrl'] || ''; item.utmUrl = utmParams['utmUrl'] || '';
UiAnalytics.capture('utm_event', utmParams);
} }
return Promise.resolve(item); return Promise.resolve(item);
@ -151,6 +154,11 @@ const RegisterPage: () => JSX.Element = () => {
value: User, value: User,
miscData: JSONObject | undefined miscData: JSONObject | undefined
) => { ) => {
if (value && value.email) {
UiAnalytics.userAuth(value.email);
UiAnalytics.capture('accounts/register');
}
LoginUtil.login({ LoginUtil.login({
user: value, user: value,
token: miscData ? miscData['token'] : undefined, token: miscData ? miscData['token'] : undefined,

88
Home/views/demo.ejs
View File

@ -4,38 +4,78 @@
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head> <head>
<title>OneUptime | One Complete Observability platform. </title> <title>OneUptime | One Complete Observability platform. </title>
<meta name="description" <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."> 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') -%> <%- include('head') -%>
</head> </head>
<body> <body>
<%- include('nav') -%> <%- include('nav') -%>
<div class="bg-white"> <div class="bg-white">
<div class="mx-auto max-w-7xl py-24 px-6 lg:px-8"> <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
<div class="sm:align-center sm:flex sm:flex-col"> <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> <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> <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> </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('features-table') -%>
<%- include('cta') -%> <%- include('cta') -%>
<%- include('footer') -%> <%- include('footer') -%>
</body> </body>
</html>
</html>

114
Home/views/head.ejs
View File

@ -1,47 +1,51 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
<style> rel="stylesheet">
* { <style>
font-family: Inter; * {
} font-family: Inter;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator { input[type="datetime-local"]::-webkit-calendar-picker-indicator {
background: transparent; background: transparent;
bottom: 0; bottom: 0;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
height: auto; height: auto;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: auto; width: auto;
} }
input[type="date"]::-webkit-calendar-picker-indicator { input[type="date"]::-webkit-calendar-picker-indicator {
background: transparent; background: transparent;
bottom: 0; bottom: 0;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
height: auto; height: auto;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: auto; width: auto;
} }
</style> </style>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': <script>(function (w, d, s, l, i) {
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], w[l] = w[l] || []; w[l].push({
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'gtm.start':
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); new Date().getTime(), event: 'gtm.js'
})(window,document,'script','dataLayer','GTM-PKQD5WH');</script> }); var f = d.getElementsByTagName(s)[0],
<!-- End Google Tag Manager --> 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> <style>
@ -51,8 +55,25 @@
</style> </style>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { !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||[]);
//check if utm_source is present in the URL and save it to localstorage. 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 urlParams = new URLSearchParams(window.location.search);
var utm_source = urlParams.get('utm_source'); var utm_source = urlParams.get('utm_source');
@ -62,13 +83,24 @@
var utm_content = urlParams.get('utm_content'); var utm_content = urlParams.get('utm_content');
var utm_url = window.location.href; var utm_url = window.location.href;
if(utm_source != null){ if (utm_source != null) {
localStorage.setItem('utmSource', utm_source); localStorage.setItem('utmSource', utm_source);
localStorage.setItem('utmMedium', utm_medium); localStorage.setItem('utmMedium', utm_medium);
localStorage.setItem('utmCampaign', utm_campaign); localStorage.setItem('utmCampaign', utm_campaign);
localStorage.setItem('utmTerm', utm_term); localStorage.setItem('utmTerm', utm_term);
localStorage.setItem('utmContent', utm_content); localStorage.setItem('utmContent', utm_content);
localStorage.setItem('utmUrl', utm_url); 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> </script>