diff --git a/public/src/components/linkTracking/LinkTrackingBuilder.tsx b/public/src/components/linkTracking/LinkTrackingBuilder.tsx index f64f4c2c..dfb861f3 100644 --- a/public/src/components/linkTracking/LinkTrackingBuilder.tsx +++ b/public/src/components/linkTracking/LinkTrackingBuilder.tsx @@ -72,7 +72,7 @@ interface FormData { campaign: string; content: string; term: string; - medium: string; + sourceAndMedium: string; // This is the source and medium separated by a double underscore } export const LinkTrackingBuilder: React.FC = () => { @@ -84,20 +84,29 @@ export const LinkTrackingBuilder: React.FC = () => { register, handleSubmit, formState: { errors }, - } = useForm(); + } = useForm({ + defaultValues: { + url: 'https://support.theguardian.com', + }, + }); - const onSubmit: SubmitHandler = ({ url, campaign, content, term, medium }) => { + const onSubmit: SubmitHandler = ({ url, campaign, content, term, sourceAndMedium }) => { const urlWithHttps = addHttps(url); - const link = `${urlWithHttps}?utm_medium=${medium}&utm_campaign=${campaign}&utm_content=${content}&utm_term=${term}`; + const [source, medium] = sourceAndMedium.split('__'); + + const link = `${urlWithHttps}?utm_medium=${medium}&utm_campaign=${campaign}&utm_content=${content}&utm_term=${term}&utm_source=${source}`; setLink(link); }; + // To be called whenever something changes, and the user needs to re-submit + const resetLink = () => setLink(''); + const linkReady = link.trim() !== ''; return (
setLink('')} + onChange={() => resetLink()} onSubmit={handleSubmit(onSubmit)} >
@@ -155,7 +164,7 @@ export const LinkTrackingBuilder: React.FC = () => { Placement - +