minor updates

Author: nmayur

src/components/SocialShare/SocialShare.tsx

@@ -3,6 +3,7 @@ import { AiFillTwitterCircle, AiFillFacebook } from "react-icons/ai";
 import { WEBSITE_URL } from "../../../BLOG_CONSTANTS/_BLOG_SETUP";
 import { combineClasses } from "../../utils/utils";
 import { useEffect, useState } from "react";
+import { GAEvent } from "../../../google";
 
 const SocialShare = () => {
  const url =
@@ -12,9 +13,21 @@ const SocialShare = () => {
  const facebookShare = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
  const linkedinShare = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=Check out this article!!&source=LinkedIn`;
 
+ const trackShareEvent = (social: string) => {
+ GAEvent({
+ action: "share_clicked",
+ event_category: "click",
+ label: social,
+ value: null,
+ });
+ };
+
  const copyLink = () => {
- navigator.clipboard.writeText(url);
- setShowCopiedAlert(true);
+ if (typeof window !== "undefined" && navigator) {
+ navigator.clipboard.writeText(url);
+ setShowCopiedAlert(true);
+ }
+ trackShareEvent("copy_clipboard_clicked");
  };
 
  const [showCopiedAlert, setShowCopiedAlert] = useState(false);
@@ -36,6 +49,7 @@ const SocialShare = () => {
  href={facebookShare}
  onClick={() => {
  window.open(facebookShare, "popup", "width=300,height=500");
+ trackShareEvent("facebook_share_clicked");
  return false;
  }}
  target="popup"
@@ -48,6 +62,7 @@ const SocialShare = () => {
  href={twitterShare}
  onClick={() => {
  window.open(twitterShare, "popup", "width=600,height=500");
+ trackShareEvent("twitter_share_clicked");
  return false;
  }}
  target="popup"
@@ -60,6 +75,7 @@ const SocialShare = () => {
  href={linkedinShare}
  onClick={() => {
  window.open(linkedinShare, "popup", "width=500,height=500");
+ trackShareEvent("linkedin_share_clicked");
  return false;
  }}
  target="popup"
@@ -78,7 +94,9 @@ const SocialShare = () => {
  <div
  className={combineClasses(
  "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded fixed flex transition-all right-[10px]",
- showCopiedAlert ? 'md:bottom-10 sm:bottom-[0px] opacity-100' : '-bottom-20 opacity-0'
+ showCopiedAlert
+ ? "md:bottom-10 sm:bottom-[0px] opacity-100"
+ : "-bottom-20 opacity-0"
  )}
  role="alert"
  >

src/components/SocialShare/SocialShareModal.tsx

@@ -18,7 +18,7 @@ const SocialShareModal = ({ closeModal, openShareModal = false }: any) => {
  ></div>
  <div
  className={combineClasses(
- "bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded lg:w-1/6 relative z-10 transition-all",
+ "bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded lg:w-1/6 mx-3 w-full relative z-10 transition-all",
  openShareModal ? "top-0" : "top-10"
  )}
  >

src/utils/utils.ts

@@ -47,7 +47,7 @@ export const changeTheme = (): void => {
  * @returns string
  */
 export const getDeviceType = (): string => {
- const ua = navigator.userAgent;
+ const ua = typeof window !== "undefined" ? navigator.userAgent : 'desktop';
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
  return "tablet";
  }
@@ -255,7 +255,7 @@ export const webShare = () => {
  if (isDesktopDevice()) {
  return false;
  } else {
- if (navigator.share) {
+ if (typeof window !== "undefined" && navigator) {
  navigator
  .share({
  text: pageTitle,