fix: GTM

audioverse-org · Nov 7, 2024 · 421ce61 · 421ce61
1 parent 3ff27f7
commit 421ce61
Show file tree

Hide file tree

Showing 27 changed files with 39 additions and 277 deletions.
diff --git a/public/img/icons-raw/icon-exit-small.svg b/public/img/icons-raw/icon-exit-small.svg
diff --git a/public/img/icons/icon-exit-small.svg b/public/img/icons/icon-exit-small.svg
diff --git a/src/components/atoms/activeLink.tsx b/src/components/atoms/activeLink.tsx
@@ -3,14 +3,12 @@ import { LinkProps } from 'next/link';
 import { useRouter } from 'next/router';
 import React, { ReactElement } from 'react';
 
-import { analytics } from '../../lib/analytics';
 import Link from './linkWithoutPrefetch';
 
 type ActiveLinkProps = LinkProps & {
 	children: ReactElement;
 	className?: string;
 	activeClassName: string;
-	linkLabel?: string;
 };
 
 // SOURCE: https://zaiste.net/programming/reactjs/howtos/create-activelink-nextjs/
@@ -19,7 +17,6 @@ const ActiveLink = ({
 	children,
 	className,
 	activeClassName,
-	linkLabel,
 	...props
 }: ActiveLinkProps): JSX.Element => {
 	const { asPath } = useRouter();
@@ -34,9 +31,6 @@ const ActiveLink = ({
 			<a
 				className={clsx(className, isActive && activeClassName)}
 				aria-current={isActive ? 'page' : false}
-				onClick={() => {
-					analytics.track('Menu click', { label: linkLabel });
-				}}
 			>
 				{children}
 			</a>

diff --git a/src/components/atoms/titleLogger.tsx b/src/components/atoms/titleLogger.tsx
diff --git a/src/components/molecules/buttonFavorite.tsx b/src/components/molecules/buttonFavorite.tsx
@@ -5,6 +5,7 @@ import { BaseColors } from '~lib/constants';
 import IconLike from '~public/img/icons/icon-like.svg';
 import IconLikeActive from '~public/img/icons/icon-like-active.svg';
 import IconLikeLight from '~public/img/icons/icon-like-light.svg';
+import { gtmPushEvent } from '~src/utils/gtm';
 
 import { analytics } from '../../lib/analytics';
 import { isBackgroundColorDark } from './buttonPlay';
@@ -68,6 +69,11 @@ const ButtonFavorite = forwardRef<HTMLButtonElement, Props>(
 					e.preventDefault();
 					e.stopPropagation();
 					toggleFavorited();
+					if (!isFavorited) {
+						gtmPushEvent({
+							event: 'favorite',
+						});
+					}
 					if (favoritedType) {
 						analytics.track(isFavorited ? 'Unfavorite' : 'Favorite', {
 							type: favoritedType,

diff --git a/src/components/molecules/buttonShare.tsx b/src/components/molecules/buttonShare.tsx
@@ -40,7 +40,7 @@ export default function ButtonShare({
 
 	// FUTURE: update sharing links
 	const facebookLink = `https://facebook.com/share.php?u=${shareUrl}`;
-	const twitterLink = `https://twitter.com/intent/tweet?url=${shareUrl}`;
+	const twitterLink = `https://x.com/intent/post?url=${shareUrl}`;
 	const emailLink = `mailto:?body=${shareUrl}${
 		emailSubject
 			? `&subject=${encodeURIComponent(

diff --git a/src/components/molecules/card/collection.tsx b/src/components/molecules/card/collection.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import Image from 'next/legacy/image';
-import router from 'next/router';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -16,7 +15,6 @@ import { useFormattedDuration } from '~lib/time';
 import useHover from '~lib/useHover';
 import SuccessIcon from '~public/img/icons/icon-success-light.svg';
 import { CollectionContentType } from '~src/__generated__/graphql';
-import { analytics } from '~src/lib/analytics';
 
 import ButtonFavorite from '../buttonFavorite';
 import CollectionTypeLockup from '../collectionTypeLockup';
@@ -52,7 +50,6 @@ export default function CardCollection({
 		image,
 		startDate,
 		title,
-		id,
 	} = collection;
 	const heroImage = image?.url && (
 		<div className={styles.imageContainer}>
@@ -77,14 +74,6 @@ export default function CardCollection({
 						isBibleVersion && styles.bibleVersion,
 						(isHovered || isSubHovered) && styles.otherHovered,
 					)}
-					onClick={() => {
-						analytics.track('Card click', {
-							type: contentType,
-							id,
-							title,
-						});
-						router.push(canonicalPath);
-					}}
 				>
 					<CollectionTypeLockup contentType={contentType} />
 					{heroImage}

diff --git a/src/components/molecules/card/person.tsx b/src/components/molecules/card/person.tsx
@@ -10,8 +10,6 @@ import RoundImage from '~components/atoms/roundImage';
 import Card from '~components/molecules/card';
 import { useIsPersonFavorited } from '~lib/api/useIsPersonFavorited';
 import { BaseColors } from '~lib/constants';
-import { CatalogEntityType } from '~src/__generated__/graphql';
-import { analytics } from '~src/lib/analytics';
 
 import ButtonFavorite from '../buttonFavorite';
 import PersonTypeLockup from '../personTypeLockup';
@@ -35,21 +33,12 @@ export default function CardPerson({
 	smallinit = false,
 }: CardCollectionProps): JSX.Element {
 	const { isFavorited, toggleFavorited } = useIsPersonFavorited(person.id);
-	const { canonicalPath, image, name, recordings, id } = person;
+	const { canonicalPath, image, name, recordings } = person;
 
 	return (
 		<Card className={clsx(compact && styles.compact)}>
 			<Link href={canonicalPath} legacyBehavior>
-				<a
-					className={styles.container}
-					onClick={() => {
-						analytics.track('Card click', {
-							type: CatalogEntityType.Person,
-							id,
-							title: name,
-						});
-					}}
-				>
+				<a className={styles.container}>
 					<div className={styles.stretch}>
 						{!compact && <PersonTypeLockup />}
 						<Heading2 unpadded sans className={styles.title}>

diff --git a/src/components/molecules/card/sequence.tsx b/src/components/molecules/card/sequence.tsx
@@ -22,7 +22,6 @@ import IconDisclosure from '~public/img/icons/icon-disclosure.svg';
 import SuccessIcon from '~public/img/icons/icon-success-light.svg';
 import { SequenceContentType } from '~src/__generated__/graphql';
 import NameMatcher from '~src/components/atoms/nameMatcher';
-import { analytics } from '~src/lib/analytics';
 
 import ButtonFavorite from '../buttonFavorite';
 import PersonLockup from '../personLockup';
@@ -61,7 +60,6 @@ export default function CardSequence({
 		title,
 		speakers,
 		sequenceWriters: writers,
-		id,
 	} = sequence;
 
 	const { Icon, accentColor, backgroundColor, textColor, label, labelColor } = (
@@ -302,18 +300,7 @@ export default function CardSequence({
 	return (
 		<Card>
 			<Link href={linkUrl} legacyBehavior>
-				<a
-					className={className}
-					onClick={() => {
-						analytics.track('Card click', {
-							type: sequence.contentType,
-							id,
-							title,
-						});
-					}}
-				>
-					{inner}
-				</a>
+				<a className={className}>{inner}</a>
 			</Link>
 		</Card>
 	);

diff --git a/src/components/molecules/card/sponsor.tsx b/src/components/molecules/card/sponsor.tsx
@@ -10,8 +10,6 @@ import Card from '~components/molecules/card';
 import { useIsSponsorFavorited } from '~lib/api/useIsSponsorFavorited';
 import { BaseColors } from '~lib/constants';
 import UserPlusIcon from '~public/img/icons/fa-user-plus.svg';
-import { CatalogEntityType } from '~src/__generated__/graphql';
-import { analytics } from '~src/lib/analytics';
 
 import ButtonFavorite from '../buttonFavorite';
 import TypeLockup from '../typeLockup';
@@ -28,29 +26,13 @@ export default function CardSponsor({
 	const intl = useIntl();
 	const { isFavorited, toggleFavorited } = useIsSponsorFavorited(sponsor.id);
 
-	const {
-		canonicalPath,
-		image,
-		title,
-		collections,
-		sequences,
-		recordings,
-		id,
-	} = sponsor;
+	const { canonicalPath, image, title, collections, sequences, recordings } =
+		sponsor;
 
 	return (
 		<Card>
 			<Link href={canonicalPath} legacyBehavior>
-				<a
-					className={styles.container}
-					onClick={() => {
-						analytics.track('Card click', {
-							type: CatalogEntityType.Sponsor,
-							id,
-							title,
-						});
-					}}
-				>
+				<a className={styles.container}>
 					<TypeLockup
 						Icon={UserPlusIcon}
 						label={intl.formatMessage({

diff --git a/src/components/molecules/navItem.tsx b/src/components/molecules/navItem.tsx
@@ -6,8 +6,6 @@ import styles from '~components/organisms/navigation.module.scss';
 import { INavigationItem } from '~lib/useNavigationItems';
 import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
 
-import { analytics } from '../../lib/analytics';
-
 export default function NavItem({
 	item,
 	setSubmenu,
@@ -31,15 +29,13 @@ export default function NavItem({
 					href={href}
 					className={styles.navLink}
 					activeClassName={styles.active}
-					linkLabel={label}
 				>
 					{inner}
 				</ActiveLink>
 			) : (
 				<a
 					className={styles.navLink}
 					onClick={() => {
-						analytics.track('Menu click', { label });
 						setSubmenu(key);
 					}}
 				>

diff --git a/src/components/molecules/searchBar.module.scss b/src/components/molecules/searchBar.module.scss
@@ -92,6 +92,9 @@
 	letter-spacing: 0em;
 	text-align: left;
 	margin-left: 28px;
+	@media (max-width: $breakpoint-sm) {
+		display: none;
+	}
 }
 
 .filters {

diff --git a/src/components/molecules/searchBar.tsx b/src/components/molecules/searchBar.tsx
@@ -79,7 +79,7 @@ export default function SearchBar({
 			>
 				<IconSearch width={24} height={24} />
 				<input
-					name="q"
+					id="searchInput"
 					type="search"
 					autoComplete="off"
 					value={term ?? ''}

diff --git a/src/components/molecules/teaseRecording.tsx b/src/components/molecules/teaseRecording.tsx
@@ -8,7 +8,6 @@ import Link from '~components/atoms/linkWithoutPrefetch';
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
 
-import { analytics } from '../../lib/analytics';
 import { TeaseRecordingFragment } from './__generated__/teaseRecording';
 import ButtonAddToPlaylist from './buttonAddToPlaylist';
 import PlayButton from './buttonPlayCircle';
@@ -115,11 +114,6 @@ export default function TeaseRecording({
 						unpadded && styles.unpadded,
 					)}
 					onClick={() => {
-						analytics.track('Card click', {
-							type: recording.recordingContentType,
-							id: recording.id,
-							title: recording.title,
-						});
 						router.push(recording.canonicalPath);
 					}}
 				>
@@ -133,13 +127,6 @@ export default function TeaseRecording({
 							unpadded && styles.unpadded,
 							fullBleed && styles.fullBleed,
 						)}
-						onClick={() => {
-							analytics.track('Card click', {
-								type: recording.recordingContentType,
-								id: recording.id,
-								title: recording.title,
-							});
-						}}
 					>
 						{inner}
 					</a>

diff --git a/src/components/organisms/drawer.tsx b/src/components/organisms/drawer.tsx
@@ -10,13 +10,9 @@ import styles from './drawer.module.scss';
 export default function Drawer({
 	showingMenu,
 	onExit,
-	onSearchChange,
-	searchTerm,
 }: {
 	showingMenu: boolean;
 	onExit: () => void;
-	onSearchChange: (term: string | undefined) => void;
-	searchTerm?: string;
 }): JSX.Element {
 	useEffect(() => {
 		Router.events.on('routeChangeStart', onExit);
@@ -34,11 +30,7 @@ export default function Drawer({
 				<Header />
 			</div>
 			<div className={styles.navigation}>
-				<Navigation
-					onExit={onExit}
-					searchTerm={searchTerm}
-					onSearchChange={onSearchChange}
-				/>
+				<Navigation onExit={onExit} />
 			</div>
 		</div>
 	);