From 2e3ecadba60f6cc134f5168e052408ace590734a Mon Sep 17 00:00:00 2001
From: George Everett <George.Everett@wmca.org.uk>
Date: Tue, 23 Apr 2024 16:49:38 +0100
Subject: [PATCH 1/5] Remove sticky class from filter list

---
 src/pages/courses/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/courses/index.js b/src/pages/courses/index.js
index 8b90b5f..cb898fc 100644
--- a/src/pages/courses/index.js
+++ b/src/pages/courses/index.js
@@ -672,7 +672,7 @@ const Page = () => {
           </div>
         </div>
         <aside className="wmcads-col-1 wmcads-col-md-1-3 wmcads-m-b-lg">
-          <div className="sticky-aside">
+          <div className="aside">
           <hr className="wmcads-hide-desktop"/>
           {!isMobile && searchByStartDate() }
           <div id="search_filter" className={`wmcads-search-filter ${isOpenMobileFilters ? 'open' : ''}`}>

From 877d478299f41e60a71b47b618c3de3e7c4e35b9 Mon Sep 17 00:00:00 2001
From: George Everett <George.Everett@wmca.org.uk>
Date: Tue, 23 Apr 2024 17:14:40 +0100
Subject: [PATCH 2/5] Fix breadcrumb link

---
 src/components/breadcrumbs/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/breadcrumbs/index.js b/src/components/breadcrumbs/index.js
index b694805..43ccc62 100644
--- a/src/components/breadcrumbs/index.js
+++ b/src/components/breadcrumbs/index.js
@@ -41,10 +41,10 @@ const Breadcrumbs = ({ breadCrumb }) => {
         </li>
         <li className="wmcads-breadcrumb__list-item">
           <a
-            href="https://www.wmca.org.uk/what-we-do/productivity-and-skills/"
+            href="https://www.wmca.org.uk/what-we-do/employment-and-skills/"
             className="wmcads-breadcrumb__link"
           >
-            Productivity and Skills
+            Employment and Skills
           </a>
         </li>
         {generateBreadcrumbLinks()}

From 6fa52ecaf6c3fbd4961f44ef7c10e10fa83b0a1b Mon Sep 17 00:00:00 2001
From: George Everett <George.Everett@wmca.org.uk>
Date: Mon, 20 May 2024 17:04:56 +0100
Subject: [PATCH 3/5] install react-ga4, add course page clicks

---
 package-lock.json          | 11 +++++++++++
 package.json               |  1 +
 src/index.js               |  3 +++
 src/pages/course/index.js  |  6 ++++++
 src/pages/courses/index.js | 11 +++++++++++
 5 files changed, 32 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 90c927f..38af17f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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"
       },
@@ -18523,6 +18524,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -36336,6 +36342,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 14270f8..d9f80ff 100644
--- 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
index 8cb7231..ef7cea4 100644
--- 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
index bac58ba..cc15bed 100644
--- a/src/pages/course/index.js
+++ b/src/pages/course/index.js
@@ -6,6 +6,8 @@ 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';
+const TRACKING_ID = "G-PL6P8LRKHT";
 
 export const findCourse = (courseArray, startDate, durationValue, locationName, courseID) => {
   return courseArray.find(course => {
@@ -115,6 +117,10 @@ 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();
   }, []);
 
diff --git a/src/pages/courses/index.js b/src/pages/courses/index.js
index cb898fc..b1ccaa7 100644
--- 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'
@@ -12,6 +13,11 @@ const maxIndexButtons = 5;
 
 const searchCourses = (courses, searchTerm) => {
   const searchTermRegex = new RegExp(`\\b${searchTerm}`, "i");
+  ReactGA.event({
+    category: 'Search',
+    action: 'Search',
+    label: searchTerm,
+});
   return courses.filter((course) =>
     searchTermRegex.test(course.CourseName)
   );
@@ -294,6 +300,11 @@ const Page = () => {
   }
 
   const courseDetailsLink = (e, course) => {
+    ReactGA.event({
+      category: 'Course link',
+      action: 'click',
+      label: `Course ID: ${course.CourseID}`,
+  })
     e.preventDefault()
     navigate(`/course-finder/details?courseId=${course.CourseID}&locationName=${course.LocationName}&startDate=${course.StartDate}&durationValue=${course.DurationValue}`);
   };

From b8d865c2028a4b27b430f4333253ae4af09e28d4 Mon Sep 17 00:00:00 2001
From: George Everett <George.Everett@wmca.org.uk>
Date: Thu, 23 May 2024 11:18:58 +0100
Subject: [PATCH 4/5] Click events

---
 src/pages/course/index.js  | 95 +++++++++++++++++++++++++++++++++++---
 src/pages/courses/index.js | 26 ++++++++---
 2 files changed, 109 insertions(+), 12 deletions(-)

diff --git a/src/pages/course/index.js b/src/pages/course/index.js
index cc15bed..2e1db32 100644
--- a/src/pages/course/index.js
+++ b/src/pages/course/index.js
@@ -166,6 +166,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,
+    })
   };
 
 
@@ -178,6 +185,67 @@ 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">
@@ -185,10 +253,25 @@ const Page = () => {
           <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>
     )
@@ -200,8 +283,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
index b1ccaa7..f524346 100644
--- a/src/pages/courses/index.js
+++ b/src/pages/courses/index.js
@@ -13,14 +13,14 @@ const maxIndexButtons = 5;
 
 const searchCourses = (courses, searchTerm) => {
   const searchTermRegex = new RegExp(`\\b${searchTerm}`, "i");
-  ReactGA.event({
-    category: 'Search',
-    action: 'Search',
-    label: searchTerm,
-});
   return courses.filter((course) =>
     searchTermRegex.test(course.CourseName)
   );
+  /*ReactGA.event({
+    category: 'Search',
+    action: 'Search',
+    label: searchTerm,
+});*/
 };
 
 const filterCourses = (courses, studyModes, filterType) => {
@@ -108,7 +108,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);
@@ -305,10 +312,17 @@ const Page = () => {
       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}`);
   };
 
+  console.log(location);
+
   const handleCheckboxChange = (accordionIndex, checkboxIndex) => {
     const updatedAccordionData = [...accordionData];
     updatedAccordionData[accordionIndex].checkbox[checkboxIndex].checked = !updatedAccordionData[accordionIndex].checkbox[checkboxIndex].checked;

From f357393e6666640f1c74ea62032e0893ed623106 Mon Sep 17 00:00:00 2001
From: Nathan Rogan <rolorogan@gmail.com>
Date: Thu, 23 May 2024 15:03:49 +0100
Subject: [PATCH 5/5] add search term tracking

---
 src/pages/course/index.js  |  3 +--
 src/pages/courses/index.js | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/pages/course/index.js b/src/pages/course/index.js
index 2e1db32..cbbf59c 100644
--- a/src/pages/course/index.js
+++ b/src/pages/course/index.js
@@ -7,7 +7,6 @@ import AccordionComponent from '../../components/accordion'
 import { openDB } from 'idb'
 import apiCourseProviderStorage from '../../services/apiCourseProviderStorage'
 import ReactGA from 'react-ga4';
-const TRACKING_ID = "G-PL6P8LRKHT";
 
 export const findCourse = (courseArray, startDate, durationValue, locationName, courseID) => {
   return courseArray.find(course => {
@@ -122,7 +121,7 @@ const Page = () => {
       console.log(courseId);
       console.log(courseName$._value);
     fetchData();
-  }, []);
+  }, [courseId, setPageRequest]);
 
   useEffect(() => {
     const handleResize = () => {
diff --git a/src/pages/courses/index.js b/src/pages/courses/index.js
index f524346..a94f996 100644
--- a/src/pages/courses/index.js
+++ b/src/pages/courses/index.js
@@ -16,11 +16,6 @@ const searchCourses = (courses, searchTerm) => {
   return courses.filter((course) =>
     searchTermRegex.test(course.CourseName)
   );
-  /*ReactGA.event({
-    category: 'Search',
-    action: 'Search',
-    label: searchTerm,
-});*/
 };
 
 const filterCourses = (courses, studyModes, filterType) => {
@@ -321,8 +316,6 @@ const Page = () => {
     navigate(`/course-finder/details?courseId=${course.CourseID}&locationName=${course.LocationName}&startDate=${course.StartDate}&durationValue=${course.DurationValue}`);
   };
 
-  console.log(location);
-
   const handleCheckboxChange = (accordionIndex, checkboxIndex) => {
     const updatedAccordionData = [...accordionData];
     updatedAccordionData[accordionIndex].checkbox[checkboxIndex].checked = !updatedAccordionData[accordionIndex].checkbox[checkboxIndex].checked;
@@ -473,7 +466,6 @@ const Page = () => {
     setCurrentPage(page);
   };
 
-
   const generatePageIndexPagination = () => {
     const Li = [];
     const totalPagesForcourses = Math.ceil(courses.length / itemsPerPage);
@@ -638,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">
@@ -647,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>