From 53034eba5de52a5682245404a01aea9905a818fb Mon Sep 17 00:00:00 2001
From: SeraGabor <gabor@designatives.com>
Date: Wed, 13 Dec 2023 15:02:07 +0100
Subject: [PATCH] feat: update plausible event names

---
 src/components/framework-tabs.js             | 8 ++++----
 src/components/modules/icon-card.js          | 2 +-
 src/components/sections/contact-section.js   | 2 +-
 src/components/sections/integrate-section.js | 4 ++--
 src/pages/developer-portal.js                | 6 ++++--
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js
index a67592e6e..e00d3c547 100644
--- a/src/components/framework-tabs.js
+++ b/src/components/framework-tabs.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import IconCard from "./modules/icon-card";
 import { AnchorLink } from "gatsby-plugin-anchor-links";
 
-const FrameworkTabs = ({ content, categories, anchorId }) => {
+const FrameworkTabs = ({ content, categories, anchorId, section}) => {
 	const [selectedTab, setSelectedTab] = useState("All");
 
 	const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];
@@ -19,7 +19,7 @@ const FrameworkTabs = ({ content, categories, anchorId }) => {
 				<div className={"tabs row justify-content-center"}>
 					{allUniqueCategories.map(function (category) {
 						return (
-							<div className={`col-auto tab-item ${selectedTab === category && "active"}`} onClick={() => setSelectedTab(category)}>
+							<div className={`col-auto tab-item ${selectedTab === category && "active"} plausible-event-name=${category.replace(/\s+/g, "-")}_Tab_Click--Developer_Portal-${section}_section`} onClick={() => setSelectedTab(category)}>
 								{category}
 							</div>
 						);
@@ -37,9 +37,9 @@ const FrameworkTabs = ({ content, categories, anchorId }) => {
 									content={item}
 									variant={"vertical"}
 									btnClass={
-										"plausible-event-name=Framework_Click_" +
+										"plausible-event-name="+section+"_Click_" +
 										item.title.replace(/\s/g, "+") +
-										"--Developer_Portal_Page-Framework_section"
+										"--Developer_Portal_Page-"+section+"_section"
 									}
 								/>
 							))}
diff --git a/src/components/modules/icon-card.js b/src/components/modules/icon-card.js
index 4fa81d0bd..0384c8ab6 100644
--- a/src/components/modules/icon-card.js
+++ b/src/components/modules/icon-card.js
@@ -27,7 +27,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
 						)}
 						{content.link && content.type === "anchor" && (
 							<AnchorLink
-								className='link'
+								className={`link ${btnClass}`}
 								to={`/developer-portal#${content.anchorToId ? content.anchorToId : content.title.replace(/\s+/g, "-").toLowerCase()}`}
 								stripHash
 							>
diff --git a/src/components/sections/contact-section.js b/src/components/sections/contact-section.js
index d8aae4be9..f5f10c185 100644
--- a/src/components/sections/contact-section.js
+++ b/src/components/sections/contact-section.js
@@ -20,7 +20,7 @@ const ContactSection = () => {
                             </div>
                         </div>
                         <div className={'col-12 col-md-auto mt-3 mt-md-0'}>
-                            <a href="https://celestia-intake.typeform.com/interest/" className={'button button-simple'} target="_blank">Get In Touch</a>
+                            <a href="https://celestia-intake.typeform.com/interest/" className={'button button-simple plausible-event-name=Get_in_touch_button--Developer_Portal-Contact_Section'} target="_blank">Get In Touch</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/sections/integrate-section.js b/src/components/sections/integrate-section.js
index 6f7cb8566..bb9be23f9 100644
--- a/src/components/sections/integrate-section.js
+++ b/src/components/sections/integrate-section.js
@@ -9,14 +9,14 @@ const IntegrateSection = ({ content, anchorId }) => {
 						<div className={"col box me-md-1"}>
 							<div className={"title"}>Blobstream</div>
 							<div className={"text"}>Use Celestia as the DA layer for your Ethereum L2.</div>
-							<a href={"https://docs.celestia.org/developers/blobstream/"} className={"button button-simple"} target="_blank">
+							<a href={"https://docs.celestia.org/developers/blobstream/"} className={"button button-simple plausible-event-name=Blobstream--Developer_Portal-Integrate_Section"} target="_blank">
 								Blobstream documentation
 							</a>
 						</div>
 						<div className={"col box ms-md-1"}>
 							<div className={"title"}>Node API</div>
 							<div className={"text"}>Use the celestia-node API to publish and retrieve transactions from Celestia.</div>
-							<a href={"https://node-rpc-docs.celestia.org/?version=v0.12.0/"} className={"button button-simple"} target="_blank">
+							<a href={"https://node-rpc-docs.celestia.org/?version=v0.12.0/"} className={"button button-simple plausible-event-name=Node_API--Developer_Portal-Integrate_Section"} target="_blank">
 								Node API Documentation
 							</a>
 						</div>
diff --git a/src/pages/developer-portal.js b/src/pages/developer-portal.js
index 6188f4ec4..59a4832dc 100644
--- a/src/pages/developer-portal.js
+++ b/src/pages/developer-portal.js
@@ -44,6 +44,7 @@ const DevPortal = () => {
 											key={item.id}
 											content={item}
 											variant={"vertical anchor no-image"}
+											btnClass={`plausible-event-name=${item.title.replace(/ /g,"_")}--Developer_Portal-Hero_Section`}
 										/>
 									);
 								})}
@@ -51,7 +52,7 @@ const DevPortal = () => {
 						</div>
 					</section>
 
-					<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} />
+					<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} section={'Framework'}/>
 
 					<section className='discover pt-5'>
 						<div className={"container"}>
@@ -65,6 +66,7 @@ const DevPortal = () => {
 											key={item.id}
 											content={item}
 											variant={"vertical no-image"}
+											btnClass={`plausible-event-name=${item.title.replace(/ /g,"_")}--Developer_Portal-Developer_Resources_Section`}
 										/>
 									);
 								})}
@@ -74,7 +76,7 @@ const DevPortal = () => {
 
 					<IntegrateSection content={getStarted} anchorId={1} />
 
-					<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} />
+					<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} section={'Rollups'}/>
 
 					<ContactSection />
 				</main>