Link builder: set utm_source (#570)

* Link builder: set utm_source * comment
guardian · Apr 17, 2024 · 82c86e7 · 82c86e7
1 parent 80cc9cc
commit 82c86e7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git 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<FormData>();
+  } = useForm<FormData>({
+    defaultValues: {
+      url: 'https://support.theguardian.com',
+    },
+  });
 
-  const onSubmit: SubmitHandler<FormData> = ({ url, campaign, content, term, medium }) => {
+  const onSubmit: SubmitHandler<FormData> = ({ 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 (
     <form
       className={classes.container}
-      onChange={() => setLink('')}
+      onChange={() => resetLink()}
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className={classes.fieldsContainer}>
@@ -155,7 +164,7 @@ export const LinkTrackingBuilder: React.FC = () => {
         <Typography className={classes.header} variant="h4">
           Placement
         </Typography>
-        <MediumSelector control={control} />
+        <MediumSelector onUpdate={resetLink} control={control} />
       </div>
 
       <Button type="submit" variant="contained" color="primary" disabled={linkReady}>

diff --git a/public/src/components/linkTracking/MediumSelector.tsx b/public/src/components/linkTracking/MediumSelector.tsx
@@ -191,18 +191,30 @@ const useStyles = makeStyles(({ spacing }: Theme) => ({
 
 interface Props {
   control: Control;
+  onUpdate: () => void;
 }
 
-export const MediumSelector: React.FC<Props> = ({ control }: Props) => {
+/**
+ * A selector for choosing a medium. The value is the source and medium separated by a double underscore.
+ * This is because the link tracking should contain both, but the source should not be chosen directly by the user.
+ */
+export const MediumSelector: React.FC<Props> = ({ control, onUpdate }: Props) => {
   const classes = useStyles();
 
   return (
     <FormControl>
       <Controller
-        name="medium"
+        name="sourceAndMedium"
         rules={{ required: true }}
-        as={
-          <Select error={!!control.formState.errors?.medium}>
+        render={({ onChange, value }) => (
+          <Select
+            value={value}
+            onChange={e => {
+              onUpdate();
+              onChange(e);
+            }}
+            error={!!control.formState.errors?.medium}
+          >
             {OPTIONS.map(group => {
               const groupItem = (
                 <MenuItem
@@ -217,7 +229,7 @@ export const MediumSelector: React.FC<Props> = ({ control }: Props) => {
               const items = group.options.map(medium => (
                 <MenuItem
                   className={classes.item}
-                  value={medium.value}
+                  value={`${group.group}__${medium.value}`}
                   key={`${group.group}-${medium.value}`}
                 >
                   {medium.label}
@@ -226,7 +238,7 @@ export const MediumSelector: React.FC<Props> = ({ control }: Props) => {
               return [groupItem].concat(items);
             })}
           </Select>
-        }
+        )}
         control={control}
         defaultValue={''}
       />