capturando os eventos de download e compartilhamento

dadosjusbr · May 24, 2023 · bd4903c · bd4903c
1 parent 70d35f3
commit bd4903c
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "react": "^18.2.0",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.0",
+    "react-ga4": "^2.1.0",
     "react-share": "^4.4.0",
     "styled-components": "^5.3.3",
     "typescript": "^5.0.4"

diff --git a/src/components/AgencyWithNavigation.tsx b/src/components/AgencyWithNavigation.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import {
   Container,
   Box,
@@ -148,7 +148,10 @@ const AgencyPageWithNavigation: React.FC<AgencyPageWithNavigationProps> = ({
                       color="info"
                       endIcon={<CloudDownloadIcon />}
                       onClick={() => {
-                        ReactGA.pageview(url.downloadURL(fileLink));
+                        ReactGA.event('file_download', {
+                          category: 'download',
+                          action: `From: ${window.location.pathname}`,
+                        });
                       }}
                       href={url.downloadURL(fileLink)}
                       id="download-button"
@@ -197,7 +200,11 @@ const AgencyPageWithNavigation: React.FC<AgencyPageWithNavigationProps> = ({
                       color="info"
                       endIcon={<CloudDownloadIcon />}
                       onClick={() => {
-                        ReactGA.pageview(url.downloadURL(fileLink));
+                        ReactGA.event({
+                          category: 'download',
+                          action: 'file_download',
+                          label: `From: ${window.location.pathname}`,
+                        });
                       }}
                       href={url.downloadURL(fileLink)}
                       id="download-button"

diff --git a/src/components/GATracker.tsx b/src/components/GATracker.tsx
@@ -1,26 +1,14 @@
-import React from 'react';
-import Script from 'next/script';
+import { useEffect } from 'react';
+import ReactGA from 'react-ga4';
 // this component is a wrapper used to inject the google analytics in all children components, it connects with google analytics using the React-GA LIB https://github.com/react-ga/react-ga
-const GATracker: React.FC = () => (
-  <>
-    <Script
-      strategy="afterInteractive"
-      async
-      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.ID_ANALYTICS_GA4}`}
-    />
-    <Script
-      strategy="afterInteractive"
-      dangerouslySetInnerHTML={{
-        __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${process.env.ID_ANALYTICS_GA4}', {
-              page_path: window.location.pathname,
-            });
-          `,
-      }}
-    />
-  </>
-);
+const GATracker: React.FC = ({ children }) => {
+  useEffect(() => {
+    ReactGA.initialize(`${process.env.ID_ANALYTICS_GA4}`);
+    ReactGA.send({
+      hitType: 'pageview',
+      page: window.location.pathname,
+    });
+  }, []);
+  return <>{children}</>;
+};
 export default GATracker;
diff --git a/src/components/OmaChart.tsx b/src/components/OmaChart.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CodeIcon from '@mui/icons-material/Code';
 import HistoryIcon from '@mui/icons-material/History';
@@ -261,7 +261,10 @@ const OMASummary: React.FC<OMASummaryProps> = ({
             color="info"
             endIcon={<CloudDownloadIcon />}
             onClick={() => {
-              ReactGA.pageview(url.downloadURL(fileLink));
+              ReactGA.event('file_download', {
+                category: 'download',
+                action: `From: ${window.location.pathname}`,
+              });
             }}
             href={url.downloadURL(fileLink)}
           >
@@ -323,7 +326,10 @@ const OMASummary: React.FC<OMASummaryProps> = ({
               color="info"
               endIcon={<CloudDownloadIcon />}
               onClick={() => {
-                ReactGA.pageview(url.downloadURL(fileLink));
+                ReactGA.event('file_download', {
+                  category: 'download',
+                  action: `From: ${window.location.pathname}`,
+                });
               }}
               href={url.downloadURL(fileLink)}
             >
@@ -889,7 +895,10 @@ const OMASummary: React.FC<OMASummaryProps> = ({
               color="info"
               endIcon={<CloudDownloadIcon />}
               onClick={() => {
-                ReactGA.pageview(url.downloadURL(fileLink));
+                ReactGA.event('file_download', {
+                  category: 'download',
+                  action: `From: ${window.location.pathname}`,
+                });
               }}
               href={url.downloadURL(fileLink)}
             >

diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
@@ -5,7 +5,7 @@ import {
   WhatsappShareButton,
   FacebookShareButton,
 } from 'react-share';
-
+import ReactGA from 'react-ga4';
 import { Box, IconButton, Typography, Modal, Dialog } from '@mui/material';
 import WhatsAppIcon from '@mui/icons-material/WhatsApp';
 import TwitterIcon from '@mui/icons-material/Twitter';
@@ -38,15 +38,17 @@ const ShareModal: React.FC<ShareModalProps> = ({
   const handleQuoteOpen = () => {
     setQuoteOpen(!quoteOpen);
   };
-  const [text, setText] = React.useState(
-    `DADOSJUSBR, ${year}. Disponível em: <${url}>. Acesso em: ${date}.`,
-  );
+  const text = `DADOSJUSBR, ${year}. Disponível em:${'\n'}<${url}>.${'\n'}Acesso em: ${date}.`;
 
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
     setOpen(true);
     navigator.clipboard.writeText(text);
+    ReactGA.event('share', {
+      action: 'share',
+      category: 'copy to clipboard',
+    });
   };
 
   const handleClose = (
@@ -93,22 +95,54 @@ const ShareModal: React.FC<ShareModalProps> = ({
           <Typography id="modal-title" variant="h6" component="h2">
             Compartilhar
           </Typography>
-          <WhatsappShareButton url={url || window.location.href}>
+          <WhatsappShareButton
+            url={url || window.location.href}
+            onClick={() =>
+              ReactGA.event('share', {
+                action: 'share',
+                category: 'whatsapp',
+              })
+            }
+          >
             <IconButton aria-label="whatsapp" size="large">
               <WhatsAppIcon />
             </IconButton>
           </WhatsappShareButton>
-          <TwitterShareButton url={url || window.location.href}>
+          <TwitterShareButton
+            url={url || window.location.href}
+            onClick={() =>
+              ReactGA.event('share', {
+                action: 'share',
+                category: 'twitter',
+              })
+            }
+          >
             <IconButton aria-label="twitter" size="large">
               <TwitterIcon />
             </IconButton>
           </TwitterShareButton>
-          <FacebookShareButton url={url || window.location.href}>
+          <FacebookShareButton
+            url={url || window.location.href}
+            onClick={() =>
+              ReactGA.event('share', {
+                action: 'share',
+                category: 'facebook',
+              })
+            }
+          >
             <IconButton aria-label="facebook" size="large">
               <FacebookOutlinedIcon />
             </IconButton>
           </FacebookShareButton>
-          <EmailShareButton url={url || window.location.href}>
+          <EmailShareButton
+            url={url || window.location.href}
+            onClick={() =>
+              ReactGA.event('share', {
+                action: 'share',
+                category: 'email',
+              })
+            }
+          >
             <IconButton aria-label="email" size="large">
               <EmailOutlinedIcon />
             </IconButton>
@@ -121,31 +155,26 @@ const ShareModal: React.FC<ShareModalProps> = ({
         <Dialog open={quoteOpen} onClose={handleQuoteOpen}>
           <Box
             sx={{
-              px: 4,
+              px: 2,
               py: 2,
               bgcolor: 'background.paper',
               border: '2px solid #fff',
+              overflow: 'auto',
             }}
           >
-            <Typography
-              id="dialog-title"
-              variant="h6"
-              component="h2"
-              sx={{ display: 'flex', justifyContent: 'center' }}
-            >
-              Citar
-            </Typography>
-
-            <IconButton
-              sx={{
-                position: 'absolute',
-                left: '87%',
-                top: '30%',
-              }}
-              onClick={handleClick}
-            >
-              <ContentCopy />
-            </IconButton>
+            <Box display="flex">
+              <Typography
+                id="dialog-title"
+                variant="h6"
+                component="h2"
+                margin="auto"
+              >
+                Citar
+              </Typography>
+              <IconButton onClick={handleClick}>
+                <ContentCopy />
+              </IconButton>
+            </Box>
 
             <Typography>{text}</Typography>
 

diff --git a/src/pages/pesquisar.tsx b/src/pages/pesquisar.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import Head from 'next/head';
 import styled from 'styled-components';
 import {
@@ -606,9 +606,10 @@ export default function Index({ ais }) {
                     endIcon={<CloudDownloadIcon />}
                     disabled={!downloadAvailable}
                     onClick={() => {
-                      ReactGA.pageview(
-                        `${process.env.API_BASE_URL}/v2/download`,
-                      );
+                      ReactGA.event('file_download', {
+                        category: 'download',
+                        action: `From: ${window.location.pathname}`,
+                      });
                     }}
                     href={`${process.env.API_BASE_URL}/v2/download${query}`}
                     id="download-button"