Merge pull request #314 from celestiaorg/feature/new-build-page

feat: update plausible event names
celestiaorg · Dec 13, 2023 · 316a624 · 316a624
2 parents 2c042b4 + 439f085
commit 316a624
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -44,14 +44,15 @@ const DevPortal = () => {
 											key={item.id}
 											content={item}
 											variant={"vertical anchor no-image"}
+											btnClass={`plausible-event-name=${item.title.replace(/ /g,"_")}--Developer_Portal-Hero_Section`}
 										/>
 									);
 								})}
 							</div>
 						</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>