Merge pull request #16 from EyeSeeTea/feature/add-ga4

Add Google Analytics 4 and remove feedback
EyeSeeTea · Feb 12, 2024 · 57df58e · 57df58e
2 parents 32858f0 + 8bd82f6
commit 57df58e
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 81 deletions.
diff --git a/.env b/.env
@@ -1,7 +1,10 @@
-BROWSER=false
 PORT=8081
+BROWSER=false
 SKIP_PREFLIGHT_CHECK=true
+
 REACT_APP_DHIS2_BASE_URL=http://localhost:8080
+REACT_APP_GOOGLE_ANALYTICS_4='Your GA4 code'
+REACT_APP_DHIS2_AUTH=admin:district
 
 CYPRESS_DHIS2_AUTH='admin:district'
 CYPRESS_EXTERNAL_API="https://dev.eyeseetea.com/play"

diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # home-page-app-dev
 Home Page app is a DHIS2 app that allows to create dynamic landing pages in DHIS2
+
+### Google analytics
+
+In order to send home page views to Google Analytics, the GA4 code must be provided in the ```.env``` file under ```REACT_APP_GOOGLE_ANALYTICS_4='Your GA4 code'```.
diff --git a/public/feedback-tool/feedback-dhis2.min.js b/public/feedback-tool/feedback-dhis2.min.js
diff --git a/public/feedback-tool/feedback-github.min.js b/public/feedback-tool/feedback-github.min.js
diff --git a/public/feedback-tool/feedback.min.css b/public/feedback-tool/feedback.min.css
diff --git a/public/feedback-tool/feedback.min.js b/public/feedback-tool/feedback.min.js
diff --git a/public/feedback-tool/i18n/en.properties b/public/feedback-tool/i18n/en.properties
diff --git a/public/feedback-tool/i18n/es.properties b/public/feedback-tool/i18n/es.properties
diff --git a/public/feedback-tool/icons.png b/public/feedback-tool/icons.png
diff --git a/public/feedback-tool/spinner.gif b/public/feedback-tool/spinner.gif
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,14 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
     <head>
+        <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_4%"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag() { dataLayer.push(arguments); }
+          gtag('js', new Date());
+
+          gtag('config', '%REACT_APP_GOOGLE_ANALYTICS_4%');
+        </script>
         <meta charset="utf-8" />
         <link rel="shortcut icon" href="%PUBLIC_URL%/icon-sm.png" sizes="192x192" />
         <link rel="icon" href="%PUBLIC_URL%/icon-small.png" sizes="192x192" />
@@ -21,13 +29,6 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
         <title>Homepage App</title>
-
-        <script src="//code.jquery.com/jquery-latest.min.js"></script>
-        <script src="%PUBLIC_URL%/feedback-tool/feedback.min.js"></script>
-        <script src="%PUBLIC_URL%/feedback-tool/feedback-github.min.js"></script>
-        <script src="%PUBLIC_URL%/feedback-tool/feedback-dhis2.min.js"></script>
-
-        <link rel="stylesheet" href="%PUBLIC_URL%/feedback-tool/feedback.min.css" />
     </head>
     <body>
         <noscript> You need to enable JavaScript to run this app. </noscript>

diff --git a/src/data/repositories/InstanceDhisRepository.ts b/src/data/repositories/InstanceDhisRepository.ts
@@ -108,6 +108,9 @@ export class InstanceDhisRepository implements InstanceRepository {
 
     @cache()
     public async isAppInstalledByUrl(launchUrl: string): Promise<boolean> {
+        const isUrlRelative = launchUrl.startsWith("/");
+        if (!isUrlRelative) return false;
+
         try {
             await this.api.baseConnection.request({ method: "get", url: launchUrl }).getData();
         } catch (error: any) {

diff --git a/src/index.tsx b/src/index.tsx
@@ -11,8 +11,8 @@ import "./webapp/utils/wdyr";
 
 declare global {
     interface Window {
-        $: { feedbackDhis2(d2: object, appKey: string, feedbackOptions: object): void };
-        api: D2Api;
+        gtag: (...args: any[]) => void;
+        dataLayer: any[];
     }
 }
 

diff --git a/src/webapp/utils/analytics.ts b/src/webapp/utils/analytics.ts
@@ -0,0 +1,15 @@
+export function sendAnalytics(name: string, data?: object) {
+    if (!window.gtag) throw new Error("gtag() function has not been declared.");
+    window.gtag(
+        "event",
+        name,
+        data
+        // Relevant params to track. Only add if the client allows it
+        // data && {
+        //     ...data,
+        //     location_hash: window.location.hash,
+        //     location_pathname: window.location.pathname,
+        //     location_href: window.location.href,
+        // }
+    );
+}