mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
add posthog events
This commit is contained in:
Simon Larsen
parent
50b9743a4b
commit
57faa1c60b
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user