1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { join } from "path";
7
import basePath from "lib/base-path";
8
import useCustomize from "lib/use-customize";
9

10
import type { JSX } from "react";
11

12
function GoogleAnalytics() {
13
  const { googleAnalytics } = useCustomize();
14

15
  const GA4_TRACKING_ID = googleAnalytics;
16
  if (!GA4_TRACKING_ID) return [];
17
  const ga = `\
18
window.dataLayer = window.dataLayer || [];
19
function gtag(){dataLayer.push(arguments);}
20
gtag('js', new Date());
21
gtag('config', '${GA4_TRACKING_ID}');\
22
`;
23
  return [
24
    <script
25
      key={"google-analytics-0"}
26
      async={true}
27
      defer={true}
28
      src={`https://www.googletagmanager.com/gtag/js?id=${GA4_TRACKING_ID}`}
29
    />,
30
    <script
31
      key={"google-analytics-1"}
32
      dangerouslySetInnerHTML={{ __html: ga }}
33
    />,
34
  ];
35
}
36

37
function CoCalcAnalytics() {
38
  return [
39
    <script
40
      key="cocalc-analytics"
41
      async={true}
42
      defer={true}
43
      src={join(basePath, "analytics.js")}
44
    />,
45
  ];
46
}
47

48
// Why so careful not to nest things?  See
49
//    https://nextjs.org/docs/api-reference/next/head
50
// NOTE:  Analytics can't be in Head because of script tags! https://github.com/vercel/next.js/pull/26253
51
export default function Analytics(): JSX.Element {
52
  return <>{GoogleAnalytics().concat(CoCalcAnalytics())}</>;
53
}
54

55