GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 08:08:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add clarity ms (#3620)

Browse Source
This commit is contained in:
Yunus M 2023-09-26 13:06:53 +05:30 committed by GitHub
parent 28d346eafb
commit e24918044e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 198 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/AppRoutes/index.tsx
View File

@ -93,6 +93,8 @@ function App(): JSX.Element {
email: user?.email, email: user?.email,
name: user?.name, name: user?.name,
}); });
window.clarity('identify', user.email, user.name);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoggedInState, user]); }, [isLoggedInState, user]);

359
frontend/src/index.html.ejs
View File

@ -1,170 +1,189 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta
http-equiv="Cache-Control" http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate, max-age: 0" content="no-cache, no-store, must-revalidate, max-age: 0"
/> />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<title data-react-helmet="true"> <title data-react-helmet="true">
Open source Observability platform | SigNoz Open source Observability platform | SigNoz
</title> </title>
<meta <meta
data-react-helmet="true" data-react-helmet="true"
property="og:title" property="og:title"
content="Open source Observability platform | SigNoz" content="Open source Observability platform | SigNoz"
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
name="description" name="description"
content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly." content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
property="og:description" property="og:description"
content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly." content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
property="og:image" property="og:image"
content="https://signoz.io/img/signoz-hero-image.webp" content="https://signoz.io/img/signoz-hero-image.webp"
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
name="twitter:image" name="twitter:image"
content="https://signoz.io/img/signoz-hero-image.webp" content="https://signoz.io/img/signoz-hero-image.webp"
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
name="twitter:image:alt" name="twitter:image:alt"
content="Image for Open source Observability platform | SigNoz" content="Image for Open source Observability platform | SigNoz"
/> />
<meta <meta
data-react-helmet="true" data-react-helmet="true"
name="twitter:card" name="twitter:card"
content="summary_large_image" content="summary_large_image"
/> />
<meta data-react-helmet="true" name="docusaurus_locale" content="en" /> <meta data-react-helmet="true" name="docusaurus_locale" content="en" />
<meta data-react-helmet="true" name="docusaurus_tag" content="default" /> <meta data-react-helmet="true" name="docusaurus_tag" content="default" />
<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" /> <link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
<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 <link
href="https://fonts.googleapis.com/css?family=Fira+Code" href="https://fonts.googleapis.com/css?family=Fira+Code"
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script> <script>
//Set your APP_ID //Set your APP_ID
const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>'; const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
(function () { (function () {
var w = window; var w = window;
var ic = w.Intercom; var ic = w.Intercom;
if (typeof ic === 'function') { if (typeof ic === 'function') {
ic('reattach_activator'); ic('reattach_activator');
ic('update', w.intercomSettings); ic('update', w.intercomSettings);
} else { } else {
var d = document; var d = document;
var i = function () { var i = function () {
i.c(arguments); i.c(arguments);
}; };
i.q = []; i.q = [];
i.c = function (args) { i.c = function (args) {
i.q.push(args); i.q.push(args);
}; };
w.Intercom = i; w.Intercom = i;
var l = function () { var l = function () {
var s = d.createElement('script'); var s = d.createElement('script');
s.type = 'text/javascript'; s.type = 'text/javascript';
s.async = true; s.async = true;
s.src = 'https://widget.intercom.io/widget/' + APP_ID; s.src = 'https://widget.intercom.io/widget/' + APP_ID;
var x = d.getElementsByTagName('script')[0]; var x = d.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x); x.parentNode.insertBefore(s, x);
}; };
if (document.readyState === 'complete') { if (document.readyState === 'complete') {
l(); l();
} else if (w.attachEvent) { } else if (w.attachEvent) {
w.attachEvent('onload', l); w.attachEvent('onload', l);
} else { } else {
w.addEventListener('load', l, false); w.addEventListener('load', l, false);
} }
} }
})(); })();
</script> </script>
<script> <script type="text/javascript">
//Set your SEGMENT_ID //Set your SEGMENT_ID
const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>'; const CLARITY_PROJECT_ID =
'<%= htmlWebpackPlugin.options.CLARITY_PROJECT_ID %>';
!(function () {
var analytics = (window.analytics = window.analytics || []); (function (c, l, a, r, i, t, y) {
if (!analytics.initialize) c[a] =
if (analytics.invoked) c[a] ||
window.console && function () {
console.error && (c[a].q = c[a].q || []).push(arguments);
console.error('Segment snippet included twice.'); };
else { t = l.createElement(r);
analytics.invoked = !0; t.async = 1;
analytics.methods = [ t.src = 'https://www.clarity.ms/tag/' + i;
'trackSubmit', y = l.getElementsByTagName(r)[0];
'trackClick', y.parentNode.insertBefore(t, y);
'trackLink', })(window, document, 'clarity', 'script', CLARITY_PROJECT_ID);
'trackForm', </script>
'pageview',
'identify', <script>
'reset', //Set your SEGMENT_ID
'group', const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';
'track',
'ready', !(function () {
'alias', var analytics = (window.analytics = window.analytics || []);
'debug', if (!analytics.initialize)
'page', if (analytics.invoked)
'once', window.console &&
'off', console.error &&
'on', console.error('Segment snippet included twice.');
'addSourceMiddleware', else {
'addIntegrationMiddleware', analytics.invoked = !0;
'setAnonymousId', analytics.methods = [
'addDestinationMiddleware', 'trackSubmit',
]; 'trackClick',
analytics.factory = function (e) { 'trackLink',
return function () { 'trackForm',
if (window.analytics.initialized) 'pageview',
return window.analytics[e].apply(window.analytics, arguments); 'identify',
var i = Array.prototype.slice.call(arguments); 'reset',
i.unshift(e); 'group',
analytics.push(i); 'track',
return analytics; 'ready',
}; 'alias',
}; 'debug',
for (var i = 0; i < analytics.methods.length; i++) { 'page',
var key = analytics.methods[i]; 'once',
analytics[key] = analytics.factory(key); 'off',
} 'on',
analytics.load = function (key, i) { 'addSourceMiddleware',
var t = document.createElement('script'); 'addIntegrationMiddleware',
t.type = 'text/javascript'; 'setAnonymousId',
t.async = !0; 'addDestinationMiddleware',
t.src = ];
'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js'; analytics.factory = function (e) {
var n = document.getElementsByTagName('script')[0]; return function () {
n.parentNode.insertBefore(t, n); if (window.analytics.initialized)
analytics._loadOptions = i; return window.analytics[e].apply(window.analytics, arguments);
}; var i = Array.prototype.slice.call(arguments);
analytics._writeKey = SEGMENT_ID; i.unshift(e);
analytics.SNIPPET_VERSION = '4.16.1'; analytics.push(i);
analytics.load(SEGMENT_ID); return analytics;
analytics.page(); };
} };
})(); for (var i = 0; i < analytics.methods.length; i++) {
</script> var key = analytics.methods[i];
</body> analytics[key] = analytics.factory(key);
</html> }
analytics.load = function (key, i) {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = !0;
t.src =
'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
var n = document.getElementsByTagName('script')[0];
n.parentNode.insertBefore(t, n);
analytics._loadOptions = i;
};
analytics._writeKey = SEGMENT_ID;
analytics.SNIPPET_VERSION = '4.16.1';
analytics.load(SEGMENT_ID);
analytics.page();
}
})();
</script>
</body>
</html>

3
frontend/src/typings/window.ts
View File

@ -1,8 +1,11 @@
import { compose, Store } from 'redux'; import { compose, Store } from 'redux';
type ClarityType<T> = (...args: string[]) => T;
declare global { declare global {
interface Window { interface Window {
store: Store; store: Store;
clarity: ClarityType<string>;
analytics: Record<string, any>; analytics: Record<string, any>;
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose; __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
} }

2
frontend/webpack.config.js
View File

@ -21,6 +21,7 @@ const plugins = [
template: 'src/index.html.ejs', template: 'src/index.html.ejs',
INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
SEGMENT_ID: process.env.SEGMENT_ID, SEGMENT_ID: process.env.SEGMENT_ID,
CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
}), }),
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
process: 'process/browser', process: 'process/browser',
@ -31,6 +32,7 @@ const plugins = [
FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT, FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
SEGMENT_ID: process.env.SEGMENT_ID, SEGMENT_ID: process.env.SEGMENT_ID,
CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
}), }),
}), }),
]; ];

2
frontend/webpack.config.prod.js
View File

@ -25,6 +25,7 @@ const plugins = [
template: 'src/index.html.ejs', template: 'src/index.html.ejs',
INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
SEGMENT_ID: process.env.SEGMENT_ID, SEGMENT_ID: process.env.SEGMENT_ID,
CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
}), }),
new CompressionPlugin({ new CompressionPlugin({
exclude: /.map$/, exclude: /.map$/,
@ -40,6 +41,7 @@ const plugins = [
FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT, FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
SEGMENT_ID: process.env.SEGMENT_ID, SEGMENT_ID: process.env.SEGMENT_ID,
CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
}), }),
}), }),
new MiniCssExtractPlugin(), new MiniCssExtractPlugin(),