Add GA tracking

2 years ago · c359aefdac
parent 9dbb2d05c9
commit c359aefdac
3 changed files with 76 additions and 1 deletions
--- a/src/components/Analytics/Analytics.astro
+++ b/src/components/Analytics/Analytics.astro
@ -0,0 +1,16 @@
 ---
 ---
 <script src='./analytics.js'></script>
 <script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'
 ></script>
 <script>
  // @ts-nocheck
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'UA-139582634-1');
 </script>
--- a/src/components/Analytics/analytics.ts
+++ b/src/components/Analytics/analytics.ts
@ -0,0 +1,53 @@
 export {};
 declare global {
  interface Window {
    gtag: any;
    fireEvent: (props: EventType) => void;
    firePageView: (url: string) => void;
  }
 }
 /**
 * Tracks the page view on google analytics
 * @see https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 * @param url URL to track
 * @returns void
 */
 window.firePageView = (url: string) => {
  if (!window.gtag) {
    console.warn('Missing GTAG - Analytics disabled');
    return;
  }
  window.gtag('config', 'UA-139582634-1', {
    page_path: url,
  });
 };
 type EventType = {
  action: string;
  category: string;
  label?: string;
  value?: string;
 };
 /**
 * Tracks the event on google analytics
 * @see https://developers.google.com/analytics/devguides/collection/gtagjs/events
 * @param props Event properties
 * @returns void
 */
 window.fireEvent = (props: EventType) => {
  const { action, category, label, value } = props;
  if (!window.gtag) {
    console.warn('Missing GTAG - Analytics disabled');
    return;
  }
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  });
 };
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -7,6 +7,7 @@ import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 import Sponsor from '../components/Sponsor/Sponsor.astro';
 import YouTubeBanner from '../components/YouTubeBanner.astro';
 import { siteConfig } from '../lib/config';
 import Analytics from '../components/Analytics/Analytics.astro';
 export interface Props {
  title: string;
@ -34,7 +35,10 @@ const {
    <meta name='description' content={description} />
    <meta name='author' content='Kamran Ahmed' />
    <meta name='keywords' content={keywords.join(', ')} />
-    {noIndex && <meta name='robots' content='noindex' />}
+    <!-- TODO: Add when launching -->
    <!-- {noIndex && <meta name='robots' content='noindex' />} -->
    <!-- TODO: Remove when launching -->
    <meta name='robots' content='noindex' />
    <meta
      name='viewport'
      content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
@ -93,6 +97,8 @@ const {
    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
    <slot name='after-header' />
    <Analytics />
  </head>
  <body>
    <YouTubeBanner />