From 7ede25920f5d54182e238440155ccdb53bddae5b Mon Sep 17 00:00:00 2001 From: Juan Sanchez Alcala <102036944+juanSanchezAlcala@users.noreply.github.com> Date: Fri, 21 Jun 2024 14:06:59 +0200 Subject: [PATCH 1/3] feat: add tracking and optional links for subscribe link and login link --- components/o-comments/src/js/stream.js | 78 +++++++++++++++++++++----- 1 file changed, 64 insertions(+), 14 deletions(-) diff --git a/components/o-comments/src/js/stream.js b/components/o-comments/src/js/stream.js index 01367beac5..c09e5ca288 100644 --- a/components/o-comments/src/js/stream.js +++ b/components/o-comments/src/js/stream.js @@ -260,19 +260,13 @@ 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,84 @@ class Stream { const messageRegistered = `

Commenting is only available to readers with FT subscription

- Subscribe to join the conversation. + ${this.options.linkSubscribe ? `Subscribe` : `Subscribe`} to join the conversation.

`; - const currentUrlEscaped = encodeURIComponent(window.location.href); const messageForAnonymous = `

Commenting is only available to readers with FT subscription

- Please login or subscribe to join the conversation. + Please ${this.options.linkLogin ? ` login` : `login`} or ${this.options.linkSubscribe ? `subscribe` : `subscribe`} to join the conversation.

`; const messageForTrial = `

You are still in a trial period

- View our full subscription packages to join the conversation. + View our full ${this.options.linkSubscribe ? `subscription packages` : `subscription packages` } to join the conversation.

`; 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); +} From 6854215e513dc479026ef27910cd6a3764527672 Mon Sep 17 00:00:00 2001 From: D Budge Date: Thu, 27 Jun 2024 15:11:44 +0100 Subject: [PATCH 2/3] fix: ci-1493 subscriber-only comments --- components/o-comments/src/js/stream.js | 11 +++++------ components/o-comments/src/js/utils/auth.js | 10 +++++++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/components/o-comments/src/js/stream.js b/components/o-comments/src/js/stream.js index c09e5ca288..fcbb1be3c8 100644 --- 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,7 +261,6 @@ class Stream { } if (mappedEvent.oTracking && !this.options.disableOTracking) { - if (error) { defaultDetailWithContentAdded.error = error; @@ -342,7 +342,7 @@ class Stream { } } dispatchTrackingEvent(trackData); - window.location.href = event?.target?.href; + window.location.href = event?.target?.href; }); customMessageContainer.querySelector('.linkLogin')?.addEventListener('click', (event) => { @@ -359,7 +359,7 @@ class Stream { } } dispatchTrackingEvent(trackData); - window.location.href = event?.target?.href; + window.location.href = event?.target?.href; }); coralContainer.prepend(customMessageContainer); @@ -374,7 +374,6 @@ class Stream { } } dispatchTrackingEvent(trackData); - } } diff --git a/components/o-comments/src/js/utils/auth.js b/components/o-comments/src/js/utils/auth.js index 2f6ad3759b..528f1035e2 100644 --- 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/`); + let 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 }; } From c1c8224c56c371942920411aea5dd5ab0ac5c970 Mon Sep 17 00:00:00 2001 From: D Budge Date: Thu, 27 Jun 2024 15:40:41 +0100 Subject: [PATCH 3/3] chore: ci-1493 use const instead of let --- components/o-comments/src/js/utils/auth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/o-comments/src/js/utils/auth.js b/components/o-comments/src/js/utils/auth.js index 528f1035e2..ad5a25e7ec 100644 --- a/components/o-comments/src/js/utils/auth.js +++ b/components/o-comments/src/js/utils/auth.js @@ -2,7 +2,7 @@ export default { fetchJsonWebToken: function fetchJsonWebToken (options = {}) { const commentsAPIUrl = options?.commentsAPIUrl || 'https://comments-api.ft.com'; - let url = options?.commentsAuthUrl ? new URL(options.commentsAuthUrl) : new URL(`${commentsAPIUrl}/user/auth/`); + 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;