feat: implemented tracking on every share button (#1328)

open-sauced · Jul 3, 2023 · 4c20717 · 4c20717
1 parent 46f7987
commit 4c20717
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -6,6 +6,7 @@ import { BsCalendar2Event, BsLink45Deg } from "react-icons/bs";
 import { FaUserPlus } from "react-icons/fa";
 import { GrFlag } from "react-icons/gr";
 import Emoji from "react-emoji-render";
+import { usePostHog } from "posthog-js/react";
 import { MdError } from "react-icons/md";
 import { format } from "date-fns";
 import Title from "components/atoms/Typography/title";
@@ -91,6 +92,8 @@ const ContributorHighlightCard = ({
  const { data: reactions, mutate } = useHighlightReactions(id);
  const { data: userReaction, deleteReaction, addReaction } = useUserHighlightReactions(id);
 
+ const posthog = usePostHog();
+
  // console.log(shipped_date);
  useEffect(() => {
  if (!openEdit) {
@@ -123,8 +126,21 @@ const ContributorHighlightCard = ({
  mutate();
  }
  };
+
+ const handleCaptureClickDetailsForAnalytics = (medium: "linkedin" | "twitter" | "link") => {
+ let text;
+ if (medium === "linkedin") {
+ text = "highlight shared to linkedin";
+ } else if (medium === "twitter") {
+ text = "higlight tweeted";
+ } else text = "highlight copied";
+ posthog!.capture(`clicked: ${text}`);
+ };
+
  const handleCopyToClipboard = async (content: string) => {
  const url = new URL(content).toString();
+ handleCaptureClickDetailsForAnalytics("link");
+
  try {
  await navigator.clipboard.writeText(url);
  toast({ description: "Copied to clipboard", variant: "success" });
@@ -244,6 +260,9 @@ const ContributorHighlightCard = ({
  <DropdownMenuContent align="end" className="flex flex-col gap-1 py-2 rounded-lg">
  <DropdownMenuItem className="rounded-md">
  <a
+ onClick={() => {
+ handleCaptureClickDetailsForAnalytics("twitter");
+ }}
  target="_blank"
  rel="noreferrer"
  href={`https://twitter.com/intent/tweet?text=${twitterTweet}&url=${host}/feed/${id}`}
@@ -255,6 +274,9 @@ const ContributorHighlightCard = ({
  </DropdownMenuItem>
  <DropdownMenuItem className="rounded-md">
  <a
+ onClick={() => {
+ handleCaptureClickDetailsForAnalytics("linkedin");
+ }}
  target="_blank"
  rel="noreferrer"
  href={`https://www.linkedin.com/sharing/share-offsite/?url=${host}/feed/${id}`}

diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { FaEdit } from "react-icons/fa";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 
 import { FiCopy } from "react-icons/fi";
 
@@ -26,16 +27,17 @@ const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHea
  const { repoList } = getRepoInsights(repoData);
  const [insightPageLink, setInsightPageLink] = useState("");
  const { toast } = useToast();
+ const posthog = usePostHog();
 
  useEffect(() => {
  if (typeof window !== "undefined") {
  setInsightPageLink(window.location.href);
-
  }
  }, [insight]);
 
  const handleCopyToClipboard = async (content: string) => {
  const url = new URL(content).toString();
+ posthog!.capture("clicked: Insights copied");
 
  try {
  await navigator.clipboard.writeText(url);