Merge pull request #17 from wmcadigital/ge/feat/ga4-support

feat:ga4 support
wmcadigital · May 24, 2024 · e61d485 · e61d485
2 parents 8f95838 + f357393
commit e61d485
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1"
   },

diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,9 @@ import { RouterProvider, Navigate, createHashRouter} from "react-router-dom";
 import Courses from './pages/courses';
 import Course from './pages/course';
 import { openDB } from 'idb';
+import ReactGA from 'react-ga4';
+const TRACKING_ID = "G-PL6P8LRKHT";
+ReactGA.initialize(TRACKING_ID);
 
 openDB('coursesDB', 1, {
   upgrade(db) {

diff --git a/src/pages/course/index.js b/src/pages/course/index.js
@@ -6,6 +6,7 @@ import { setCourseName$, courseName$ } from '../../services/rxjsStoreCourseName'
 import AccordionComponent from '../../components/accordion'
 import { openDB } from 'idb'
 import apiCourseProviderStorage from '../../services/apiCourseProviderStorage'
+import ReactGA from 'react-ga4';
 
 export const findCourse = (courseArray, startDate, durationValue, locationName, courseID) => {
   return courseArray.find(course => {
@@ -115,8 +116,12 @@ const Page = () => {
       }
     };
 
+      // Send pageview with a custom path
+      ReactGA.send({ hitType: "pageview", page: `/#/course-finder/details?courseId=${courseId}`, title:courseName$._value });
+      console.log(courseId);
+      console.log(courseName$._value);
     fetchData();
-  }, []);
+  }, [courseId, setPageRequest]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -160,6 +165,13 @@ const Page = () => {
   const handleGoBack = (e) => {
     e.preventDefault()
     navigate(-1); // Navigate back one step
+    console.log('backToResults-ga')
+    ReactGA.event(
+    {
+      category: 'Back to results',
+      action: 'click',
+      label: e,
+    })
   };
 
 
@@ -172,17 +184,93 @@ const Page = () => {
     }
   }
 
+  const handleProviderWebsiteClick = (providerWebsite) => {
+    console.log('website-ga')
+    ReactGA.event(
+    {
+      category: 'Course Provider Website link',
+      action: 'click',
+      label: providerWebsite,
+    })
+  };
+
+  const handleProviderPhoneClick = (providerPhone) => {
+    console.log('phone-ga')
+    ReactGA.event(
+    {
+      category: 'Course Provider Phone Number link',
+      action: 'click',
+      label: providerPhone,
+    })
+  };
+
+  const handleProviderEmailClick = (providerEmail) => {
+    console.log('email-ga')
+    ReactGA.event(
+    {
+      category: 'Course Provider Email link',
+      action: 'click',
+      label: providerEmail,
+    })
+  };
+
+  const handleCourseURLClick = (courseWebsite) => {
+    console.log('website2-ga')
+    ReactGA.event(
+    {
+      category: 'Course Website link',
+      action: 'click',
+      label: courseWebsite,
+    })
+  };
+
+
+  const handleLiveChatNCSClick = (liveChatNCS) => {
+    console.log('liveChat-ga')
+    ReactGA.event(
+    {
+      category: 'National Careers Service Live Chat',
+      action: 'click',
+      label: liveChatNCS,
+    })
+  };
+
+  const handlePhoneNCSClick = (phoneNCS) => {
+    console.log('phone2-ga')
+    ReactGA.event(
+    {
+      category: 'National Careers Service Phone',
+      action: 'click',
+      label: phoneNCS,
+    })
+  };
+
   const providerDetails = (courseProvider) => {
     return (
       <div className="wmcads-content-card wmcads-m-b-lg">
         <div className="wmcads-p-sm">
           <h2>Find out more and apply</h2>
           <p>Interested in this course? Get in touch with the training provider to find out more and apply.</p>
           <p><strong>{courseProvider?.CourseProvider}</strong></p>
-          <p className="mtb-10"><strong>Website:</strong> <a className="wmcads-link" href={courseProvider?.Website} target="_blank" rel="noopener noreferrer">{courseProvider?.Website}</a></p>
-          {courseProvider?.ContactEmail && <p className="mtb-10"><strong>Email:</strong> <a className="wmcads-link" href={`mailto:${courseProvider?.ContactEmail}`}>{courseProvider?.ContactEmail}</a></p>}
-          <p className="mtb-10"><strong>Phone:</strong> <a className="wmcads-link" href={`tel:${courseProvider?.ContactPhone && updateContactPhone(courseProvider)}`}>{courseProvider?.ContactPhone && updateContactPhone(courseProvider)}</a></p>
-          {getCourse?.CourseURL && <p className="mtb-10"><strong>Course Website:</strong> <a href={getCourse?.CourseURL} title="View the course on the course providors website" target="_blank" rel="noreferrer" className="wmcads-link"><span>Go to course</span></a></p>}
+          <p className="mtb-10"><strong>Website:</strong> 
+            <a onClick={() => handleProviderWebsiteClick(courseProvider.Website)} className="wmcads-link" href={courseProvider?.Website} target="_blank" rel="noopener noreferrer">
+              {courseProvider?.Website}
+            </a>
+          </p>
+          {courseProvider?.ContactEmail && <p className="mtb-10"><strong>Email:</strong>
+          <a onClick={() => handleProviderEmailClick(courseProvider.ContactEmail)} className="wmcads-link" href={`mailto:${courseProvider?.ContactEmail}`}>
+            {courseProvider?.ContactEmail}
+          </a>
+          </p>}
+          <p className="mtb-10"><strong>Phone:</strong> 
+            <a onClick={() => handleProviderPhoneClick(courseProvider.ContactPhone)} className="wmcads-link" href={`tel:${courseProvider?.ContactPhone && updateContactPhone(courseProvider)}`}>
+              {courseProvider?.ContactPhone && updateContactPhone(courseProvider)}
+            </a>
+          </p>
+          {getCourse?.CourseURL && <p className="mtb-10"><strong>Course Website:</strong> 
+          <a onClick={() => handleCourseURLClick(getCourse.CourseURL)} href={getCourse?.CourseURL} title="View the course on the course providors website" target="_blank" rel="noreferrer" className="wmcads-link"><span>Go to course</span>
+          </a>
+          </p>}
         </div>
       </div>
     )
@@ -194,8 +282,8 @@ const Page = () => {
         <div className="wmcads-p-sm">
           <h2>Get help and advice</h2>
           <p>Not sure which course is right for you? Our partners at National Careers Service are on hand to help</p>
-          <p className="mtb-10"><strong>Live chat:</strong> <a className="wmcads-link" href="https://nationalcareers.service.gov.uk/webchat/chat" target="_blank" rel="noopener noreferrer">Speak to an adviser on webchat</a></p>
-          <p className="mtb-10"><strong>Phone:</strong> <a className="wmcads-link" href={`tel:0800100900`}>0800 100 900</a></p>
+          <p className="mtb-10"><strong>Live chat:</strong> <a onClick={() => handleLiveChatNCSClick()} className="wmcads-link" href="https://nationalcareers.service.gov.uk/webchat/chat" target="_blank" rel="noopener noreferrer">Speak to an adviser on webchat</a></p>
+          <p className="mtb-10"><strong>Phone:</strong> <a onClick={() => handlePhoneNCSClick()} className="wmcads-link" href={`tel:0800100900`}>0800 100 900</a></p>
         </div>
       </div>
     )

diff --git a/src/pages/courses/index.js b/src/pages/courses/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
 import AppLayout from '../../layout/index';
 import moment from 'moment';
 import AccordionComponent from '../../components/accordion'
@@ -102,7 +103,14 @@ const Page = () => {
         { name: 'Day or block release', checked: false }
       ],
     },
-  ]);
+  ],
+  ReactGA.event({
+    category: 'Filters',
+    action: 'click',
+    label: filterCourses,
+  },
+),
+);
 
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -294,6 +302,16 @@ const Page = () => {
   }
 
   const courseDetailsLink = (e, course) => {
+    ReactGA.event({
+      category: 'Course link',
+      action: 'click',
+      label: `Course ID: ${course.CourseID}`,
+  })
+    ReactGA.event({
+      category: 'Search term',
+      action: 'click',
+      label: location,
+    })
     e.preventDefault()
     navigate(`/course-finder/details?courseId=${course.CourseID}&locationName=${course.LocationName}&startDate=${course.StartDate}&durationValue=${course.DurationValue}`);
   };
@@ -448,7 +466,6 @@ const Page = () => {
     setCurrentPage(page);
   };
 
-
   const generatePageIndexPagination = () => {
     const Li = [];
     const totalPagesForcourses = Math.ceil(courses.length / itemsPerPage);
@@ -613,6 +630,18 @@ const Page = () => {
     );
   };
 
+  const searchGA = (searchTerms) => {
+    console.log('search ga');
+    console.log(searchTerms);
+    if(searchTerms !== 'undefined') {
+      ReactGA.event({
+        category: 'course search',
+        action: 'search',
+        label: searchTerms,
+      });
+    }
+};
+
   return (
     <div className="template-search">
       <div className="wmcads-m-b-lg">
@@ -622,7 +651,7 @@ const Page = () => {
             <input id="searchBar_input" aria-label="Search" type="text" value={filter.searchTerm} className="wmcads-search-bar__input wmcads-fe-input" placeholder="Search course title or subject..." onChange={(e) => setFilter((prevFilter) => ({
               ...prevFilter,
               searchTerm: e.target.value,
-            }))} />
+            }))} onBlur={(e) => searchGA(e.target.value)} />
               <button className="wmcads-search-bar__btn" type="submit" onClick={(e) => e.preventDefault()}>
                 <svg>
                   <title>Search</title>