Merge pull request #3904 from Blargian/add_galaxy_event_to_cloud_ad

Add galaxy events to cloud advert and translation issue banner

Author: Blargian

docs/getting-started/install/install.mdx

@@ -15,6 +15,7 @@ import RPMProd from './_snippets/_rpm_install.md'
 import MacOSProd from './_snippets/_macos.md'
 import Docker from './_snippets/_docker.md'
 import {CardPrimary} from '@clickhouse/click-ui/bundled';
+import {galaxyOnClick} from '@site/src/lib/galaxy/galaxy'
 
 # Installation instructions
 
@@ -26,7 +27,7 @@ import {CardPrimary} from '@clickhouse/click-ui/bundled';
     infoText="Get started free"
     infoUrl="https://auth.clickhouse.cloud/"
     isSelected
-    onButtonClick={function Da(){}}
+    onButtonClick={galaxyOnClick('docs.installCloudCallout.buttonClicked')}
     size="md"
     title="ClickHouse Cloud"
     topBadgeText="Recommended"

src/lib/galaxy/galaxy.js

@@ -86,6 +86,7 @@ export const galaxyOnPage = (prefix, depsArray = []) => {
   galaxyOnFocus(`${prefix}.window.focus`, depsArray);
 };
 
+// Pass String with convention 'namespace.component.eventName'
 export const galaxyOnClick = (event) => {
   return () => {
     window.galaxy.track(event, { interaction: "click" });

src/theme/DocItem/Layout/index.js

@@ -17,6 +17,7 @@ import IconClose from "@theme/Icon/Close";
 import {useLocation} from "@docusaurus/router";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import RelatedBlogs from "../../../components/RelatedBlogs/RelatedBlogs";
+import {galaxyOnClick} from "../../../lib/galaxy/galaxy";
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
@@ -90,6 +91,7 @@ export default function DocItemLayout({children}) {
                     className={styles.docCloudClose}
                     onClick={() => {
                       setShowPopup(false)
+                      galaxyOnClick('docs.translationIssueBanner.buttonClick')
                       window.localStorage.setItem('doc-translate-card-banner', 'closed')
                     }}>
                   <IconClose color="var(--ifm-color-emphasis-600)" width={10} height={10}/>

src/theme/DocItem/TOC/Desktop/index.js

@@ -6,6 +6,7 @@ import clsx from "clsx";
 import IconClose from '@theme/Icon/Close';
 import styles from './styles.module.scss'
 import Feedback from '../../../../components/Feedback';
+import {galaxyOnClick} from "../../../../lib/galaxy/galaxy";
 
 const AD_DATA_ENDPOINT = 'https://cms.clickhouse-dev.com:1337/api/docs-ad'
 
@@ -96,6 +97,7 @@ export default function DocItemTOCDesktop() {
                 className={styles.docCloudClose}
                 onClick={() => {
                   setClosed(true)
+                  galaxyOnClick('docs.sidebarCloudAdvert.buttonClick')
                   window.sessionStorage.setItem('doc-cloud-card-banner', 'closed');
                 }}>
                 <IconClose color="var(--ifm-color-emphasis-600)" width={10} height={10}/>