Add ga snippet
Browse files
docs/src/components/Analytics/Analytics.astro
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
---
|
| 2 |
+
---
|
| 3 |
+
|
| 4 |
+
<script src='./analytics.ts'></script>
|
| 5 |
+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LGE7XP5BHC"></script>
|
| 6 |
+
<script>
|
| 7 |
+
//@ts-nocheck
|
| 8 |
+
window.dataLayer = window.dataLayer || [];
|
| 9 |
+
function gtag(){dataLayer.push(arguments);}
|
| 10 |
+
gtag('js', new Date());
|
| 11 |
+
|
| 12 |
+
gtag('config', 'G-LGE7XP5BHC');
|
| 13 |
+
</script>
|
docs/src/components/Analytics/analytics.ts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
declare global {
|
| 2 |
+
interface Window {
|
| 3 |
+
gtag: any;
|
| 4 |
+
fireEvent: (props: {
|
| 5 |
+
action: string;
|
| 6 |
+
category: string;
|
| 7 |
+
label?: string;
|
| 8 |
+
value?: string;
|
| 9 |
+
}) => void;
|
| 10 |
+
}
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
/**
|
| 14 |
+
* Tracks the event on google analytics
|
| 15 |
+
* @see https://developers.google.com/analytics/devguides/collection/gtagjs/events
|
| 16 |
+
* @param props Event properties
|
| 17 |
+
* @returns void
|
| 18 |
+
*/
|
| 19 |
+
window.fireEvent = (props) => {
|
| 20 |
+
const { action, category, label, value } = props;
|
| 21 |
+
if (!window.gtag) {
|
| 22 |
+
console.warn('Missing GTAG - Analytics disabled');
|
| 23 |
+
return;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
if (import.meta.env.DEV) {
|
| 27 |
+
console.log('Analytics event fired', props);
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
window.gtag('event', action, {
|
| 31 |
+
event_category: category,
|
| 32 |
+
event_label: label,
|
| 33 |
+
value: value,
|
| 34 |
+
});
|
| 35 |
+
};
|
docs/src/layouts/BaseLayout.astro
CHANGED
|
@@ -1,4 +1,5 @@
|
|
| 1 |
---
|
|
|
|
| 2 |
export interface Props {
|
| 3 |
title: string;
|
| 4 |
}
|
|
@@ -97,5 +98,6 @@ const { title } = Astro.props;
|
|
| 97 |
</head>
|
| 98 |
<body>
|
| 99 |
<slot />
|
|
|
|
| 100 |
</body>
|
| 101 |
</html>
|
|
|
|
| 1 |
---
|
| 2 |
+
import Analytics from "../components/Analytics/Analytics.astro";
|
| 3 |
export interface Props {
|
| 4 |
title: string;
|
| 5 |
}
|
|
|
|
| 98 |
</head>
|
| 99 |
<body>
|
| 100 |
<slot />
|
| 101 |
+
<Analytics />
|
| 102 |
</body>
|
| 103 |
</html>
|