315 - Add GA custom event for Dataset to DOM elements #322
Conversation
…r' into nozomione/237-display-info-message-to-certain-organism
… into nozomione/250-correcrt-text-color-for-non-linked-info-message
…essage' into nozomione/251-reverse-advanced-options-icon
…methods to update the filter order query in useSearchManager hook
…adjust the toggleFilter method in useSearchManage, and fetch the previous filter items in fetchSearch based on the filter orders
…in search results page
…options to include path and adjust the codebase
…ao in radio label, and add formatNumber (forgot) for the dowbloadable samples count in experiments view tab
…page' into nozomione/261-fix-clear-term-button-on-search-box
… nozomione/262-fix-typo-in-rna-seq-sample-compendia
…o nozomione/249-align-show-label-in-experiments-view-tab
…justment to copies in the custom error components (match the current definebio)
…, and make minior adjustment in useSamplesTableManager
…t codebase accordingly
…or/*, and make its index to be the Error parent component and use it to render its custom error child components in _error
…r the search results page error
…page' into nozomione/261-fix-clear-term-button-on-search-box
…er used) and fix the import in pages/search
…nozomione/315-add-ga4-custom-event-for-dataset
…d on the latest GA custom event script update
…ns' list in helpers
…ns' list in helpers
…nozomione/315-add-ga4-custom-event-for-dataset
…nozomione/315-add-ga4-custom-event-for-dataset
…n (remove usePageRendered hook , no longer used)
|
This PR is ready for your review, thank you David! |
| const handleClick = (link) => { | ||
| const handleShare = () => { | ||
| openModal(id) | ||
| gtag.trackSharedDataset(dataset) |
There was a problem hiding this comment.
Move this to when the user actually copies the link in handleCopy.
| @@ -10,18 +11,24 @@ import { InlineMessage } from 'components/shared/InlineMessage' | |||
| import { Modal } from 'components/shared/Modal' | |||
| import { TextInput } from 'components/shared/TextInput' | |||
|
|
|||
| export const ShareDatasetButton = ({ datasetId }) => { | |||
| export const ShareDatasetButton = ({ dataset }) => { | |||
| const { openModal } = useModal() | |||
| const { setResponsive } = useResponsive() | |||
| const { startTimer, clearTimer } = useTimeoutInCallback(() => { | |||
| setIsCopied(false) | |||
| }, 3000) | |||
| const [isCopied, setIsCopied] = useState(false) | |||
| const [value, handdleCopy] = useCopyToClipboard(null) | |||
There was a problem hiding this comment.
| const [value, handdleCopy] = useCopyToClipboard(null) | |
| const [value, copyText] = useCopyToClipboard(null) |
and then update below
| gtag.trackSharedDataset(dataset) | ||
| } | ||
|
|
||
| const handleCopy = (link) => { |
There was a problem hiding this comment.
| const handleCopy = (link) => { | |
| const onCopyClick = () => { |
| const id = `shareable-link_${datasetId}` | ||
| const shareableLink = `${getDomain()}/dataset/${datasetId}?ref=share` | ||
|
|
||
| const handleClick = (link) => { | ||
| const handleShare = () => { |
There was a problem hiding this comment.
| const handleShare = () => { | |
| const onShareClick = () => { |
| @@ -75,7 +82,7 @@ export const ShareDatasetButton = ({ datasetId }) => { | |||
| label="Copy" | |||
| primary | |||
| responsive | |||
| onClick={() => handleClick(shareableLink)} | |||
| onClick={() => handleCopy(shareableLink)} | |||
There was a problem hiding this comment.
| onClick={() => handleCopy(shareableLink)} | |
| onClick={onCopyClick} |
Lets not wrap the function here to keep it clearer
| @@ -46,6 +47,11 @@ export const StartProcessingForm = ({ dataset }) => { | |||
|
|
|||
| const pathname = `/dataset/${response.id}` | |||
| push({ pathname }, pathname) | |||
|
|
|||
| if (datasetId === dataset.id) { | |||
There was a problem hiding this comment.
I don't think you need the check here.
| export const AddRemainingDatasetButton = ({ | ||
| dataToAdd, | ||
| samplesInDataset, | ||
| label = 'Add Remaining' |
There was a problem hiding this comment.
I think we can clean up the label here. Check the others as well please.
| @@ -13,13 +14,14 @@ import { ReceiveUpdatesCheckBox } from 'components/Download/StartProcessingForm/ | |||
| import { TermsOfUseCheckBox } from 'components/Download/StartProcessingForm/TermsOfUseCheckBox' | |||
|
|
|||
| export const DownloadNowModal = ({ | |||
| accessionCode, | |||
| experiment, // For GA | |||
There was a problem hiding this comment.
| experiment, // For GA | |
| experiment, |
…lean up unused labels and a comment, and dataset ID checks
|
I've applied the feedback and this PR is ready for your review. Thank you David! |
| @@ -26,7 +25,7 @@ export const SearchCardAction = ({ | |||
| ? technology === rnaSeq | |||
| : technology.find((x) => x === rnaSeq) | |||
|
|
|||
| if (!pageRendered) return null | |||
| if (!experiment) return null | |||
There was a problem hiding this comment.
I'm having trouble figuring out how this component could be rendered without being passed in an experiment?
There was a problem hiding this comment.
I’ve removed the experiment check from the SearchCardAction component, as it was a quick fix for this PR. The component now accepts the entire data structure (i.e., experiment) for GA4 events, and I've also updated the parent components to reflect this change (see at fc602f7).
I'll update the other SearchCard-related components to match this pattern in a separate issue (#363) 👍
Additionally, I'll file a new issue to remove the usage of usePageRendered (which was added as a workaround to prevent the hydration errors) as chatted in our 1:1.
Thank you, David!
…e for GA4 event, adjust other props accordingly(Other SearchCard-related components will be updated to match this pattern in a separate issue), remove the experiment check from SearchCardAction
nozomione
deleted the
nozomione/315-add-ga4-custom-event-for-dataset
branch
Issue Number
Closing #315
Purpose/Implementation Notes
developmentenvironmentTo see the dataset custom GA4 reports, please login to CCDL Analytics account, and navigate to the
developmentpropertyRefine.bio Web - Dev(issue #310).Types of changes
Checklist