Update trackEvent function calls

Author: DilsonsPickles

src/components/banner/BetaBanner.jsx

@@ -1,19 +1,13 @@
 import React from "react";
 import "../../styles/icons.css";
+import { trackEvent } from "../../utils/matomo";
 
 function BetaBanner(url) {
   //no beta at the moment
-  return null; 
+  return null;
 
   function handleButtonClick() {
-    if (typeof _paq !== "undefined") {
-      _paq.push([
-        "trackEvent",
-        "Beta CTA",
-        "Beta CTA button",
-        "Go to Beta site",
-      ]);
-    }
+    trackEvent("Beta CTA", "Beta CTA button", "Go to Beta site");
   }
 
   if (url.url.endsWith("/beta/") || url.url.endsWith("/beta")) {
@@ -35,7 +29,9 @@ function BetaBanner(url) {
         <a
           href="/beta"
           id="join-button"
-          onClick={() => {handleButtonClick();}}
+          onClick={() => {
+            handleButtonClick();
+          }}
           className="flex text-xl h-12 my-4 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white"
         >
           Join the beta

src/components/banner/PromoBanner.tsx

@@ -1,6 +1,7 @@
 import { museHubReleases } from "../../assets/js/releaseData";
 import "../../styles/icons.css";
 import useBrowserOS from "../../hooks/useDetectOS";
+import { trackEvent } from "../../utils/matomo";
 
 function PromoBanner() {
   // no promo atm
@@ -20,14 +21,7 @@ function PromoBanner() {
   const showBanner = browserOS === "OS X" || browserOS === "Windows";
 
   function handleButtonClick() {
-    if (typeof _paq !== "undefined") {
-      _paq.push([
-        "trackEvent",
-        "Promo CTA",
-        "Promo CTA button",
-        "Ace Studio Muse Hub",
-      ]);
-    }
+    trackEvent("Promo CTA", "Promo CTA button", "Ace Studio Muse Hub");
   }
 
   return (
@@ -39,7 +33,7 @@ function PromoBanner() {
         >
           <div className="lg:flex text-center gap-4">
             <p className="text-lg text-gray-900 font-bold">
-            Ace Studio - The World's No.1 AI Singing Voice Generator  
+              Ace Studio - The World's No.1 AI Singing Voice Generator
             </p>
           </div>
 

src/components/banner/SurveyBanner.jsx

@@ -1,19 +1,13 @@
 import React from "react";
 import "../../styles/icons.css";
+import { trackEvent } from "../../utils/matomo";
 
 function SurveyBanner(url) {
   //no survey going on at the moment
   return null;
 
   function handleButtonClick() {
-    if (typeof _paq !== "undefined") {
-      _paq.push([
-        "trackEvent",
-        "Survey CTA",
-        "Survey CTA button",
-        "Go to Survey",
-      ]);
-    }
+    trackEvent("Survey CTA", "Survey CTA button", "Go to Survey");
   }
 
   return (
@@ -22,17 +16,18 @@ function SurveyBanner(url) {
       className="flex items-center justify-center min-h-24 bg-orange-400 gap-4 flex-wrap"
     >
       <div className="flex gap-2 flex-wrap my-4 mx-2">
-        <p className="text-lg font-bold text-gray-900">
-          3 minute survey:
-        </p>
+        <p className="text-lg font-bold text-gray-900">3 minute survey:</p>
         <p className="text-lg text-gray-900">
-          Help us understand what sort of plugins and features you'd be interested in next.
+          Help us understand what sort of plugins and features you'd be
+          interested in next.
         </p>
       </div>
       <a
         href="https://po415hli6k2.typeform.com/hub-audacity"
         id="survey-button"
-        onClick={() => {handleButtonClick();}}
+        onClick={() => {
+          handleButtonClick();
+        }}
         className="flex text-lg h-12 my-4 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white"
       >
         Take the survey

src/components/button/PlatformDownloadMuseHubButton.jsx

@@ -7,11 +7,11 @@ function PlatformDownloadMuseHubButton(props) {
   const browserOS = useBrowserOS();
 
   function onClickButtonHandler() {
-    trackEvent([
+    trackEvent(
       "Download Button",
       "Download Muse Hub",
       `Download Muse Hub button ${browserOS}`,
-    ]);
+    );
 
     setTimeout(() => {
       window.location.href = "/post-download";

src/components/card/DownloadCard.jsx

@@ -5,11 +5,11 @@ function DownloadCard(props) {
   const { OS, title, downloadURL, downloadType, checksum } = props;
 
   function handleDownloadButtonClick() {
-    trackEvent([
+    trackEvent(
       "Download Button",
       "Download Audacity",
       `${OS + " " + title + " " + downloadType}`,
-    ]);
+    );
 
     setTimeout(() => {
       window.location.href = "/post-download";

src/components/video/FeaturedVideo.jsx

@@ -16,10 +16,10 @@ function FeaturedVideo(props) {
 
   function handleVideoClick() {
     setIsClicked(true);
-    trackEvent(["Video embed", "Watch release video", title]);
+    trackEvent("Video embed", "Watch release video", title);
   }
   function handleCTAClick() {
-    trackEvent(["Promo CTA", "Promo CTA video button", ctaText]);
+    trackEvent("Promo CTA", "Promo CTA video button", ctaText);
   }
 
   return (