Merge pull request #32 from audacity/post-download

Update analytics tracking

Author: DilsonsPickles

src/components/button/JoinAudioDotComButton.jsx

@@ -1,24 +1,22 @@
 import React from "react";
 
-function handleButtonClick() {
+function handleButtonClick(eventName) {
   if (typeof _paq !== "undefined") {
-    _paq.push([
-      "trackEvent",
-      "CTA Button",
-      "audio.com CTA",
-      "audio.com block CTA",
-    ]);
+    _paq.push(["trackEvent", "CTA Button", "audio.com CTA", `${eventName}`]);
   }
 }
 
-function JoinAudioDotComButton() {
+function JoinAudioDotComButton(props) {
+  const { href, matomoEventName, large } = props;
   return (
     <a
       onClick={() => {
-        handleButtonClick();
+        handleButtonClick(matomoEventName);
       }}
-      href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Block_button"
-      className="px-6 py-4 bg-blue-700 w-fit text-white rounded hover:bg-blue-600"
+      href={href}
+      className={` ${
+        large ? "py-4 px-6" : "py-2 px-4"
+      } bg-blue-700 w-fit text-white rounded hover:bg-blue-600`}
     >
       Join for free
     </a>

src/components/homepage/ShareYourSounds.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import AudioDotComLogo from "../../assets/img/audio-dot-com.svg";
 import VideoPlaceholder from "../../assets/img/audiocom-placeholder.webp";
+import JoinAudioDotComButton from "../button/JoinAudioDotComButton";
 
 function ShareYourSounds() {
   const [isClicked, setIsClicked] = useState(false);
@@ -41,15 +42,11 @@ function ShareYourSounds() {
               publish your work.
             </p>
           </div>
-          <a
-            onClick={() => {
-              handleButtonClick();
-            }}
+
+          <JoinAudioDotComButton
             href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Block_button"
-            className="px-4 py-2 bg-blue-700 w-fit text-white rounded hover:bg-blue-600"
-          >
-            Join for free
-          </a>
+            matomoEventName="audio.com block CTA"
+          />
         </div>
 
         <div className="col-span-12 md:col-start-1 md:col-span-6 md:row-start-1 items-center flex">

src/pages/post-download.astro

@@ -16,33 +16,39 @@ import FeatureCard from "../components/card/FeatureCard";
     <div class="py-8 sm:py-12 flex flex-col items-center">
       <div class="text-center">
         <h1>
-          Sign up to Audacity's cloud saving platform and access your
-          projects from anywhere!
+          Sign up to Audacity's cloud saving platform and access your projects
+          from anywhere!
         </h1>
-        <div class="mt-12"><JoinAudioDotComButton /></div>
+        <div class="mt-12">
+          <JoinAudioDotComButton
+            href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=post_download_button"
+            matomoEventAction="post-download CTA"
+            large
+          />
+        </div>
       </div>
 
       <div class="grid grid-cols-6 sm:grid-cols-12 w-full gap-4 m-16">
         <FeatureCard
-        icon="icon-cloud"
-        title="Secure cloud storage"
-        description="Keep your projects safe and accessible with cloud storage. Access your work anywhere and never lose a file."
-      />
-      <FeatureCard
-        icon="icon-note"
-        title="Share your creations"
-        description="Upload and share your audio from Audacity with just a few clicks. Quick, easy, and built for creators."
-      />
-      <FeatureCard
-        icon="icon-pen"
-        title="Transcribe your audio"
-        description="Free AI-powered transcription for your podcasts or voice overs, delivering fast and precise text for effortless editing."
-      />
-      <FeatureCard
-        icon="icon-globe"
-        title="Explore new sounds"
-        description="Collaborate with other creators, find new inspiration, and discover sounds to enhance and elevate your projects."
-      />
+          icon="icon-cloud"
+          title="Secure cloud storage"
+          description="Keep your projects safe and accessible with cloud storage. Access your work anywhere and never lose a file."
+        />
+        <FeatureCard
+          icon="icon-note"
+          title="Share your creations"
+          description="Upload and share your audio from Audacity with just a few clicks. Quick, easy, and built for creators."
+        />
+        <FeatureCard
+          icon="icon-pen"
+          title="Transcribe your audio"
+          description="Free AI-powered transcription for your podcasts or voice overs, delivering fast and precise text for effortless editing."
+        />
+        <FeatureCard
+          icon="icon-globe"
+          title="Explore new sounds"
+          description="Collaborate with other creators, find new inspiration, and discover sounds to enhance and elevate your projects."
+        />
       </div>
     </div>
   </section>