Skip to content

Commit bcd2bbb

Browse files
DilsonsPicklesLWinterberg
DilsonsPickles
authored and
LWinterberg
committed
Implement trackEvent util
1 parent 8516faf commit bcd2bbb

File tree

10 files changed

+62
-80
lines changed

10 files changed

+62
-80
lines changed

‎src/components/button/DownloadButton.jsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@ function DownloadButton() {
1212
function handleButtonClick(href) {
1313
if (href !== "/download") {
1414
if (typeof _paq !== "undefined") {
15-
_paq.push([
16-
"trackEvent",
15+
trackEvent(
1716
"Download Button",
18-
"Download Audacity",
19-
`Download Audacity button ${platform.os.family}`,
20-
]);
17+
"Download Muse Hub",
18+
`Download Muse Hub button ${platform.os.family}`
19+
);
2120
}
2221
}
2322

@@ -31,7 +30,6 @@ function DownloadButton() {
3130
<a
3231
onClick={() => handleButtonClick(href)}
3332
className="text-white font-semibold hover:underline"
34-
href={href}
3533
>
3634
Download without Muse Hub
3735
</a>

‎src/components/button/DownloadMuseHubButton.jsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
22
import platform from "platform";
33
import { audacityReleases } from "../../assets/js/releaseData";
44
import { museHubReleases } from "../../assets/js/releaseData";
5+
import { trackEvent } from "../../utils/matomo";
56

67
function DownloadMuseHubButton() {
78
const [browserOS, setBrowserOS] = useState("");
@@ -10,28 +11,29 @@ function DownloadMuseHubButton() {
1011
setBrowserOS(platform.os.family);
1112
}, []);
1213

13-
const isLinux = browserOS === "Linux" || browserOS === "Ubuntu" || browserOS === "Debian" || browserOS === "Red Hat" || browserOS === "SuSE";
14+
const isLinux =
15+
browserOS === "Linux" ||
16+
browserOS === "Ubuntu" ||
17+
browserOS === "Debian" ||
18+
browserOS === "Red Hat" ||
19+
browserOS === "SuSE";
1420

1521
function handleButtonClick(href) {
1622
if (
1723
href !== "https://www.musehub.com/" &&
1824
href !== audacityReleases.lin[0].browser_download_url
1925
) {
20-
if (typeof _paq !== "undefined") {
21-
_paq.push([
22-
"trackEvent",
23-
"Download Button",
24-
"Download Muse Hub",
25-
`Download Muse Hub button ${browserOS}`,
26-
]);
27-
}
26+
trackEvent(
27+
"Download Button",
28+
"Download Muse Hub",
29+
`Download Muse Hub button ${browserOS}`
30+
);
2831
} else if (href === audacityReleases.lin[0].browser_download_url) {
29-
_paq.push([
30-
"trackEvent",
32+
trackEvent(
3133
"Download Button",
3234
"Download Audacity",
33-
`Download Audacity button ${browserOS}`,
34-
]);
35+
`Download Audacity button ${browserOS}`
36+
);
3537
}
3638

3739
setTimeout(() => {
@@ -44,13 +46,14 @@ function DownloadMuseHubButton() {
4446
<a
4547
onClick={() => handleButtonClick(href)}
4648
className="flex py-3 px-4 gap-3 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
47-
href={href}
4849
>
4950
<span className="icon icon-import"></span>
5051
<p>
51-
<span className="font-semibold">
52-
Download Audacity {audacityReleases.version}</span><br/>
53-
{false && <span className="font-light text-s">via MuseHub</span>}
52+
<span className="font-semibold">
53+
Download Audacity {audacityReleases.version}
54+
</span>
55+
<br />
56+
{false && <span className="font-light text-s">via MuseHub</span>}
5457
</p>
5558
</a>
5659
);
@@ -72,4 +75,4 @@ function DownloadMuseHubButton() {
7275
}
7376
}
7477

75-
export default DownloadMuseHubButton;
78+
export default DownloadMuseHubButton;

‎src/components/button/JoinAudioDotComButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from "react";
2+
import { trackEvent } from "../../utils/matomo";
23

34
function handleButtonClick(eventName) {
45
if (typeof _paq !== "undefined") {
5-
_paq.push(["trackEvent", "CTA Button", "audio.com CTA", `${eventName}`]);
6+
trackEvent("CTA Button", "audio.com CTA", "audio.com block CTA")
67
}
78
}
89

@@ -13,7 +14,6 @@ function JoinAudioDotComButton(props) {
1314
onClick={() => {
1415
handleButtonClick(matomoEventName);
1516
}}
16-
href={href}
1717
className={` ${
1818
large ? "py-4 px-6" : "py-2 px-4"
1919
} bg-blue-700 w-fit text-white rounded hover:bg-blue-600`}

‎src/components/button/PlatformDownloadMuseHubButton.jsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import React from "react";
22
import useBrowserOS from "../../hooks/useDetectOS";
3+
import { trackEvent } from "../../utils/matomo";
34

45
function PlatformDownloadMuseHubButton(props) {
56
const { museHubReleaseData } = props;
67
const browserOS = useBrowserOS();
78

89
function onClickButtonHandler() {
9-
if (typeof _paq !== "undefined") {
10-
_paq.push([
11-
"trackEvent",
12-
"Download Button",
13-
"Download Muse Hub",
14-
`Download Muse Hub button ${browserOS}`,
15-
]);
16-
}
10+
trackEvent([
11+
"Download Button",
12+
"Download Muse Hub",
13+
`Download Muse Hub button ${browserOS}`,
14+
]);
1715

1816
setTimeout(() => {
1917
window.location.href = "/post-download";
2018
}, 2000);
21-
2219
}
2320

2421
return (

‎src/components/card/DownloadCard.jsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import React from "react";
2+
import { trackEvent } from "../../utils/matomo";
23

34
function DownloadCard(props) {
45
const { OS, title, downloadURL, downloadType, checksum } = props;
56

67
function handleDownloadButtonClick() {
7-
if (typeof _paq !== "undefined") {
8-
_paq.push([
9-
"trackEvent",
10-
"Download Button",
11-
"Download Audacity",
12-
`${OS + " " + title + " " + downloadType}`,
13-
]);
14-
}
8+
trackEvent([
9+
"Download Button",
10+
"Download Audacity",
11+
`${OS + " " + title + " " + downloadType}`,
12+
]);
1513

1614
setTimeout(() => {
1715
window.location.href = "/post-download";

‎src/components/homepage/HeroBanner.astro‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import DownloadButton from "../button/DownloadButton";
33
import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
44
import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
5-
const branch = import.meta.env.BRANCH || "unknown";
65
---
76

87
<section id="main" class="bg-gradient-to-r from-indigo-900 to-blue-700">
@@ -16,8 +15,6 @@ const branch = import.meta.env.BRANCH || "unknown";
1615
Audacity is the world's most popular audio editing and recording app
1716
</h1>
1817

19-
<p>Current branch: {branch}</p>
20-
2118
<div class="flex flex-col md:w-fit gap-4 items-center md:items-start">
2219
<DownloadMuseHubButton client:load />
2320
<noscript>

‎src/components/homepage/ShareYourSounds.jsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,6 @@ function ShareYourSounds() {
1818
}
1919
}
2020

21-
function handleButtonClick() {
22-
if (typeof _paq !== "undefined") {
23-
_paq.push([
24-
"trackEvent",
25-
"CTA Button",
26-
"audio.com CTA",
27-
"audio.com block CTA",
28-
]);
29-
}
30-
}
31-
3221
return (
3322
<section className="bg-[url('../assets/img/audiocom-background.webp')] bg-cover">
3423
<div className="max-w-screen-xl mx-6 sm:mx-12 md:mx-16 xl:mx-auto py-12 grid grid-cols-12 gap-y-12 md:gap-12">

‎src/components/navigation/NavigationReact.jsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState } from "react";
22
import { AnimatePresence } from "framer-motion";
33
import HamburgerMenu from "./HamburgerMenu";
44
import AudacityLogo from "../../assets/img/Audacity_Logo.svg";
@@ -8,17 +8,6 @@ import "../../styles/fonts.css";
88
function NavigationReact(props) {
99
const { currentURL } = props;
1010
const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
11-
const [abTestVariant, setAbTestVariant] = useState("main"); // Default to main
12-
13-
// Use the data attribute from the body element
14-
useEffect(() => {
15-
const variant = document.body.getAttribute('data-branch') || "main";
16-
setAbTestVariant(variant);
17-
18-
console.log(`AB test variant from body attribute: ${variant}`);
19-
}, []);
20-
21-
console.log(abTestVariant);
2211

2312
function getUrlPath(url) {
2413
const parts = url.split("/");

‎src/components/video/FeaturedVideo.jsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from "react";
2+
import { trackEvent } from "../../utils/matomo";
23

34
function FeaturedVideo(props) {
45
const [isClicked, setIsClicked] = useState(false);
@@ -15,19 +16,10 @@ function FeaturedVideo(props) {
1516

1617
function handleVideoClick() {
1718
setIsClicked(true);
18-
if (typeof _paq !== "undefined") {
19-
_paq.push([
20-
"trackEvent",
21-
"Video embed",
22-
"Watch release video",
23-
title,
24-
]);
25-
}
19+
trackEvent(["Video embed", "Watch release video", title]);
2620
}
2721
function handleCTAClick() {
28-
if (typeof _paq !== "undefined") {
29-
_paq.push(["trackEvent", "Promo CTA", "Promo CTA video button", ctaText]);
30-
}
22+
trackEvent(["Promo CTA", "Promo CTA video button", ctaText]);
3123
}
3224

3325
return (

‎src/utils/matomo.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function trackEvent(category, action, name) {
2+
// assign branch from Netlify
3+
const branch = import.meta.env.BRANCH || "unknown-branch";
4+
5+
console.log("Clicked");
6+
7+
// check id global variable _paq has been injected by Maotomo tracking script
8+
if (typeof _paq !== "undefined") {
9+
console.log([
10+
"trackEvent",
11+
category,
12+
`${action} (branch: ${branch})`,
13+
name,
14+
]);
15+
} else {
16+
console.log("Failed");
17+
}
18+
//_paq.push(["trackEvent", category, action, name, value]);
19+
}

0 commit comments

Comments
 (0)