Merge pull request #1732 from Financial-Times/tracking-and-link-comments

feat: add tracking and optional links for subscribe link and login link
Financial-Times · Jun 28, 2024 · 002bb09 · 002bb09
2 parents 11643d1 + c1c8224
commit 002bb09
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 18 deletions.
diff --git a/components/o-comments/src/js/stream.js b/components/o-comments/src/js/stream.js
@@ -58,7 +58,7 @@ class Stream {
 				this.renderSignedInMessage();
 			}
 		}
-		else if(this.onlySubscribers){
+		else if(this.onlySubscribers && !this.isSubscribed){
 			this.renderNotSignedInMessage();
 		}
 	}
@@ -224,7 +224,8 @@ class Stream {
 			error
 		} = data;
 
-		if (name === 'loginPrompt' && this.userHasValidSession) {
+		//TODO: CI-1493 userHasValidSession no longer required after subscriber only is not behind a flag
+		if (name === 'loginPrompt' && (this.userHasValidSession || this.isSubscribed)) {
 			return this.displayNamePrompt();
 		}
 
@@ -260,19 +261,12 @@ class Stream {
 				}
 
 				if (mappedEvent.oTracking && !this.options.disableOTracking) {
-					const oTrackingEventOptions = {
-						bubbles: true,
-						detail: {
-							...defaultDetailWithContentAdded
-						}
-					};
 
 					if (error) {
-						oTrackingEventOptions.detail.error = error;
+						defaultDetailWithContentAdded.error = error;
 					}
 
-					const oTrackingEvent = new CustomEvent('oTracking.event', oTrackingEventOptions);
-					document.body.dispatchEvent(oTrackingEvent);
+					dispatchTrackingEvent(defaultDetailWithContentAdded);
 				}
 			}
 		}
@@ -317,28 +311,83 @@ class Stream {
 			const messageRegistered = `
 			<h3>Commenting is only available to readers with FT subscription</h3>
 				<p>
-					<a href='https://subs.ft.com/products'>Subscribe</a> to join the conversation.
+				${this.options.linkSubscribe ? `<a class="linkSubscribe" href='${this.options.linkSubscribe}'>Subscribe</a>` : `Subscribe`} to join the conversation.
 				</p>
 			`;
-			const currentUrlEscaped = encodeURIComponent(window.location.href);
 			const messageForAnonymous = `
 			<h3>Commenting is only available to readers with FT subscription</h3>
 				<p>
-					Please <a href='https://ft.com/login?location=${currentUrlEscaped}'>login</a> or <a href='https://subs.ft.com/products'>subscribe</a> to join the conversation.
+					Please ${this.options.linkLogin ? ` <a class="linkLogin" href='${this.options.linkLogin}'>login</a>` : `login`} or ${this.options.linkSubscribe ? `<a href='${this.options.linkSubscribe}' class="linkSubscribe" >subscribe</a>` : `subscribe`} to join the conversation.
 				</p>
 			`;
 			const messageForTrial = `
 			<h3>You are still in a trial period</h3>
 				<p>
-					View our full <a href='https://subs.ft.com/products'>subscription packages</a> to join the conversation.
+					View our full ${this.options.linkSubscribe ? `<a class="linkSubscribe" href='${this.options.linkSubscribe}'>subscription packages</a>` : `subscription packages` } to join the conversation.
 				</p>
 			`;
 			customMessageContainer.innerHTML = this.isTrialist ? messageForTrial : this.isRegistered ? messageRegistered : messageForAnonymous;
+			// this content is attached after oTracking.init is called therefore set data-trackable to the links doesn't work, therefore we raise an event when click on it
+			customMessageContainer.querySelector('.linkSubscribe')?.addEventListener('click', (event) => {
+				event.preventDefault();
+				const trackData = {
+					category: 'comment',
+					action: 'linkMessage',
+					coral: false,
+					content : {
+						asset_type: this.options.assetType,
+						uuid: this.options.articleId,
+						linkType: 'subscribe',
+						user_type: this.isTrialist ? 'trialist' : this.isRegistered ? 'registered' : 'anonymous'
+					}
+				}
+				dispatchTrackingEvent(trackData);
+				window.location.href = event?.target?.href;
 
+			});
+			customMessageContainer.querySelector('.linkLogin')?.addEventListener('click', (event) => {
+				event.preventDefault();
+				const trackData = {
+					category: 'comment',
+					action: 'linkMessage',
+					coral: false,
+					content : {
+						asset_type: this.options.assetType,
+						uuid: this.options.articleId,
+						linkType: 'login',
+						user_type: this.isTrialist ? 'trialist' : this.isRegistered ? 'registered' : 'anonymous'
+					}
+				}
+				dispatchTrackingEvent(trackData);
+				window.location.href = event?.target?.href;
+			});
 			coralContainer.prepend(customMessageContainer);
-	}
 
+			const trackData = {
+				category: 'comment',
+				action: 'show-not-signed-in-message',
+				coral: false,
+				content : {
+					asset_type: this.options.assetType,
+					uuid: this.options.articleId,
+					user_type: this.isTrialist ? 'trialist' : this.isRegistered ? 'registered' : 'anonymous'
+				}
+			}
+			dispatchTrackingEvent(trackData);
+	}
 
 }
 
 export default Stream;
+
+
+function dispatchTrackingEvent (trackData = {}) {
+	const oTrackingEventOptions = {
+		bubbles: true,
+		detail: {
+			...trackData
+		}
+	};
+	const oTrackingEvent = new CustomEvent('oTracking.event', oTrackingEventOptions);
+	document.body.dispatchEvent(oTrackingEvent);
+}
diff --git a/components/o-comments/src/js/utils/auth.js b/components/o-comments/src/js/utils/auth.js
@@ -1,7 +1,10 @@
 export default {
 	fetchJsonWebToken: function fetchJsonWebToken (options = {}) {
+
 		const commentsAPIUrl = options?.commentsAPIUrl || 'https://comments-api.ft.com';
 		const url = options?.commentsAuthUrl ? new URL(options.commentsAuthUrl) : new URL(`${commentsAPIUrl}/user/auth/`);
+		//TODO: CI-1493 redirect subscriber only users to another version of auth while the flag is on
+		url.pathname = options?.onlySubscribers ? url.pathname.replace(/\/auth\//,'/auth-subsonly/')  : url.pathname;
 
 		if (options.displayName) {
 			url.searchParams.append('displayName', options.displayName);
@@ -12,11 +15,12 @@ export default {
 		}
 
 		return fetch(url, { credentials: 'include' }).then(response => {
-		// user is signed in and has a pseudonym
+		// user is signed in
 			if (response.ok) {
 				return response.json();
 			} else {
-			// user is signed in but has no display name
+			// TODO: CI-1493 to remove after subscriber only is not behind a flag
+			// response for when onlySubscribers is false and user is signed in but has no display name
 				if (response.status === 409) {
 					return { userHasValidSession: true };
 				}