Nuxt - Capture UTM Tags

default.vue

// layouts.default.vue

// --- Hooks --- //

const urlParams = useRequestURL().searchParams;

const utmTags = useUtmTags();
  
// --- onMounted --- //

onMounted(() => {
  // set utm tags from request parameters on every page mount
  utmTags.value = {
    utm_source: urlParams.get('utm_source') ?? '',
    utm_medium: urlParams.get('utm_medium') ?? '',
    utm_campaign: urlParams.get('utm_campaign') ?? '',
    utm_terms: urlParams.get('utm_terms') ?? '',
    utm_content: urlParams.get('utm_content') ?? '',
  };
});

states.ts

// composables/states.ts

import { useStorage } from '@vueuse/core';

type UtmTags = {
  utm_source: string;
  utm_medium: string;
  utm_campaign: string;
  utm_terms: string;
  utm_content: string;
};

export const useUtmTags = () =>
  useSessionStorage<UtmTags>('utm-tags', {
    utm_source: '',
    utm_medium: '',
    utm_campaign: '',
    utm_terms: '',
    utm_content: '',
  });

submissions.vue

const urlParams = useRequestURL().searchParams;
const utmTags = useUtmTags();

const formData = ref({
  ..., // other form data here
  utm_source: '',
  utm_medium: '',
  utm_campaign: '',
  utm_terms: '',
  utm_content: '',
})

const onSubmit = () => {
  // set utm tags - cannot initialize in form data due to SSR
  form['utm_source'] = utmTags.value.utm_source;
  form['utm_medium'] = utmTags.value.utm_medium;
  form['utm_campaign'] = utmTags.value.utm_campaign;
  form['utm_terms'] = utmTags.value.utm_terms;
  form['utm_content'] = utmTags.value.utm_content;

  form.submit({
    onSuccess: () => {
      // reset utm tags
      utmTags.value = {
        utm_source: '',
        utm_medium: '',
        utm_campaign: '',
        utm_terms: '',
        utm_content: '',
      };
    }
  })
}