Merge pull request #593 from audioverse-org/fix/GTM

fix: GTM

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

public/.well-known/apple-developer-merchantid-domain-association

@@ -0,0 +1 @@
+7B227073704964223A2239373943394538343346343131343044463144313834343232393232313734313034353044314339464446394437384337313531303944334643463542433731222C2276657273696F6E223A312C22637265617465644F6E223A313536363233343735303036312C227369676E6174757265223A22333038303036303932613836343838366637306430313037303261303830333038303032303130313331306633303064303630393630383634383031363530333034303230313035303033303830303630393261383634383836663730643031303730313030303061303830333038323033653333303832303338386130303330323031303230323038346333303431343935313964353433363330306130363038326138363438636533643034303330323330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333031653137306433313339333033353331333833303331333333323335333735613137306433323334333033353331333633303331333333323335333735613330356633313235333032333036303335353034303330633163363536333633326437333664373032643632373236663662363537323264373336393637366535663535343333343264353035323466343433313134333031323036303335353034306230633062363934663533323035333739373337343635366437333331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333035393330313330363037326138363438636533643032303130363038326138363438636533643033303130373033343230303034633231353737656465626436633762323231386636386464373039306131323138646337623062643666326332383364383436303935643934616634613534313162383334323065643831316633343037653833333331663163353463336637656233323230643662616435643465666634393238393839336537633066313361333832303231313330383230323064333030633036303335353164313330313031666630343032333030303330316630363033353531643233303431383330313638303134323366323439633434663933653465663237653663346636323836633366613262626664326534623330343530363038326230363031303530353037303130313034333933303337333033353036303832623036303130353035303733303031383632393638373437343730336132663266366636333733373032653631373037303663363532653633366636643266366636333733373033303334326436313730373036633635363136393633363133333330333233303832303131643036303335353164323030343832303131343330383230313130333038323031306330363039326138363438383666373633363430353031333038316665333038316333303630383262303630313035303530373032303233303831623630633831623335323635366336393631366536333635323036663665323037343638363937333230363336353732373436393636363936333631373436353230363237393230363136653739323037303631373237343739323036313733373337353664363537333230363136333633363537303734363136653633363532303666363632303734363836353230373436383635366532303631373037303663363936333631363236633635323037333734363136653634363137323634323037343635373236643733323036313665363432303633366636653634363937343639366636653733323036663636323037353733363532633230363336353732373436393636363936333631373436353230373036663663363936333739323036313665363432303633363537323734363936363639363336313734363936663665323037303732363136333734363936333635323037333734363137343635366436353665373437333265333033363036303832623036303130353035303730323031313632613638373437343730336132663266373737373737326536313730373036633635326536333666366432663633363537323734363936363639363336313734363536313735373436383666373236393734373932663330333430363033353531643166303432643330326233303239613032376130323538363233363837343734373033613266326636333732366332653631373037303663363532653633366636643266363137303730366336353631363936333631333332653633373236633330316430363033353531643065303431363034313439343537646236666435373438313836383938393736326637653537383530376537396235383234333030653036303335353164306630313031666630343034303330323037383033303066303630393261383634383836663736333634303631643034303230353030333030613036303832613836343863653364303430333032303334393030333034363032323130306265303935373166653731653165373335623535653561666163623463373266656234343566333031383532323263373235313030326236316562643666353530323231303064313862333530613564643664643665623137343630333562313165623263653837636661336536616636636264383338303839306463383263646461613633333038323032656533303832303237356130303330323031303230323038343936643266626633613938646139373330306130363038326138363438636533643034303330323330363733313162333031393036303335353034303330633132343137303730366336353230353236663666373432303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330316531373064333133343330333533303336333233333334333633333330356131373064333233393330333533303336333233333334333633333330356133303761333132653330326330363033353530343033306332353431373037303663363532303431373037303663363936333631373436393666366532303439366537343635363737323631373436393666366532303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330353933303133303630373261383634386365336430323031303630383261383634386365336430333031303730333432303030346630313731313834313964373634383564353161356532353831303737366538383061326566646537626165346465303864666334623933653133333536643536363562333561653232643039373736306432323465376262613038666437363137636538386362373662623636373062656338653832393834666635343435613338316637333038316634333034363036303832623036303130353035303730313031303433613330333833303336303630383262303630313035303530373330303138363261363837343734373033613266326636663633373337303265363137303730366336353265363336663664326636663633373337303330333432643631373037303663363537323666366637343633363136373333333031643036303335353164306530343136303431343233663234396334346639336534656632376536633466363238366333666132626266643265346233303066303630333535316431333031303166663034303533303033303130316666333031663036303335353164323330343138333031363830313462626230646561313538333338383961613438613939646562656264656261666461636232346162333033373036303335353164316630343330333032653330326361303261613032383836323636383734373437303361326632663633373236633265363137303730366336353265363336663664326636313730373036633635373236663666373436333631363733333265363337323663333030653036303335353164306630313031666630343034303330323031303633303130303630613261383634383836663736333634303630323065303430323035303033303061303630383261383634386365336430343033303230333637303033303634303233303361636637323833353131363939623138366662333563333536636136326266663431376564643930663735346461323865626566313963383135653432623738396638393866373962353939663938643534313064386639646539633266653032333033323264643534343231623061333035373736633564663333383362393036376664313737633263323136643936346663363732363938323132366635346638376137643162393963623962303938393231363130363939306630393932316430303030333138323031386233303832303138373032303130313330383138363330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533303230383463333034313439353139643534333633303064303630393630383634383031363530333034303230313035303061303831393533303138303630393261383634383836663730643031303930333331306230363039326138363438383666373064303130373031333031633036303932613836343838366637306430313039303533313066313730643331333933303338333133393331333733313332333333303561333032613036303932613836343838366637306430313039333433313164333031623330306430363039363038363438303136353033303430323031303530306131306130363038326138363438636533643034303330323330326630363039326138363438383666373064303130393034333132323034323062303731303365313430613462386231376262613230316130336163643036396234653431366232613263383066383661383338313435633239373566633131333030613036303832613836343863653364303430333032303434363330343430323230343639306264636637626461663833636466343934396534633035313039656463663334373665303564373261313264376335666538633033303033343464663032323032363764353863393365626233353031333836363062353730373938613064643731313734316262353864626436613138363633353038353431656565393035303030303030303030303030227D

schema.graphql

@@ -58,6 +58,12 @@ type AuthenticatedUserPayload {
   errors: [InputValidationError!]!
 }
 
+type AuthenticatedUserSocialPayload {
+  authenticatedUser: AuthenticatedUser
+  errors: [InputValidationError!]!
+  isNewUser: Boolean
+}
+
 type Bible implements Node {
   abbreviation: String!
   book(id: ID!): BibleBook!
@@ -1637,7 +1643,7 @@ type Mutation {
   licenseHistoryCommentCreate(input: CatalogHistoryCommentCreateInput!, licenseId: ID!): CatalogHistoryItemPayload!
   licenseUpdate(input: LicenseUpdateInput!, licenseId: ID!): LicensePayload!
   login(input: UserLoginInput!): AuthenticatedUserPayload!
-  loginSocial(input: UserLoginSocialInput!): AuthenticatedUserPayload!
+  loginSocial(input: UserLoginSocialInput!): AuthenticatedUserSocialPayload!
   mediaFileDelete(mediaFileId: ID!): SuccessPayload!
   mediaFileUploadAbort(mediaFileUploadId: ID!): SuccessPayload!
   mediaFileUploadAssign(mediaFileUploadId: ID!, recordingId: ID!): SuccessPayload!

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>

src/components/molecules/buttonDownload.graphql

@@ -1,4 +1,19 @@
 fragment buttonDownload on Recording {
+	id
+	title
+	recordingContentType: contentType
+	speakers: persons(role: SPEAKER) {
+		...personLockup
+	}
+	sponsor {
+		title
+	}
+	sequence {
+		title
+	}
+	collection {
+		title
+	}
 	isDownloadAllowed
 	videoDownloads: videoFiles(allowedContainers: MP4) {
 		url(requestType: DOWNLOAD)

src/components/molecules/buttonDownload.tsx

@@ -6,6 +6,7 @@ import { BaseColors } from '~lib/constants';
 import { readableBytes } from '~lib/readableBytes';
 import iconDownloadAudio from '~public/img/icons/download-audio.svg';
 import iconDownloadVedio from '~public/img/icons/download-video.svg';
+import { gtmPushEvent } from '~src/utils/gtm';
 
 import { ButtonDownloadFragment } from './__generated__/buttonDownload';
 import styles from './buttonDownload.module.scss';
@@ -99,7 +100,25 @@ export default function ButtonDownload({
 						</Heading6>
 						{audioDownloads.map(({ url, filesize, bitrate }, index) => (
 							<p className={styles.paragraph} key={index} onClick={handleClose}>
-								<a href={url} target="_blank" rel="noreferrer noopener">
+								<a
+									href={url}
+									target="_blank"
+									rel="noreferrer noopener"
+									onClick={() => {
+										gtmPushEvent('download', {
+											content_type: recording.recordingContentType,
+											media_type: 'audio',
+											item_id: recording.id,
+											title: recording.title,
+											presenter: recording.speakers
+												.map((item) => item.name)
+												.join(';'),
+											sponsor: recording.sponsor?.title,
+											conference: recording.collection?.title,
+											series: recording.sequence?.title,
+										});
+									}}
+								>
 									{formatLabel(
 										bitrate <= 24 ? 'low' : bitrate <= 48 ? 'medium' : 'high',
 										filesize,
@@ -152,7 +171,25 @@ export default function ButtonDownload({
 										key={index}
 										onClick={handleClose}
 									>
-										<a href={url} target="_blank" rel="noreferrer noopener">
+										<a
+											href={url}
+											target="_blank"
+											rel="noreferrer noopener"
+											onClick={() => {
+												gtmPushEvent('download', {
+													content_type: recording.recordingContentType,
+													media_type: 'video',
+													item_id: recording.id,
+													title: recording.title,
+													presenter: recording.speakers
+														.map((item) => item.name)
+														.join(';'),
+													sponsor: recording.sponsor?.title,
+													conference: recording.collection?.title,
+													series: recording.sequence?.title,
+												});
+											}}
+										>
 											{formatLabel(
 												frameSize <= 200000
 													? 'low'

src/components/molecules/buttonFavorite.tsx

@@ -5,34 +5,38 @@ 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';
+import { ShareContentType } from './buttonShare';
 import IconButton from './iconButton';
 
+type FavoriteContentType = ShareContentType;
+
 type Props = {
-	favoritedType?: string;
-	favoritedId?: string | number;
-	favoritedTitle?: string;
 	isFavorited: boolean;
 	toggleFavorited: () => void;
 	light?: boolean;
 	backgroundColor: BaseColors;
 	className?: string;
 	ref?: Ref<HTMLButtonElement>;
+	contentType: FavoriteContentType;
+	id: string | number | undefined;
+	title: string;
 };
 
 const ButtonFavorite = forwardRef<HTMLButtonElement, Props>(
 	function ButtonFavorite(
 		{
-			favoritedType,
-			favoritedId,
-			favoritedTitle,
 			isFavorited,
 			toggleFavorited,
 			light,
 			backgroundColor,
 			className,
+			contentType,
+			id,
+			title,
 		}: Props,
 		ref,
 	): JSX.Element {
@@ -68,11 +72,16 @@ const ButtonFavorite = forwardRef<HTMLButtonElement, Props>(
 					e.preventDefault();
 					e.stopPropagation();
 					toggleFavorited();
-					if (favoritedType) {
-						analytics.track(isFavorited ? 'Unfavorite' : 'Favorite', {
-							type: favoritedType,
-							id: favoritedId,
-							title: favoritedTitle,
+					analytics.track(isFavorited ? 'Unfavorite' : 'Favorite', {
+						type: contentType,
+						id,
+						title,
+					});
+					if (!isFavorited) {
+						gtmPushEvent('favorite', {
+							content_type: contentType,
+							item_id: id,
+							title,
 						});
 					}
 				}}