Embed Typeform UTM Tracking

typeform-page.tsx

import React, { useEffect, useState } from 'react';
import Script from "next/script";

const getURLParams = () => {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    return urlParams;
}


const QuizComponent = () => {
    const [urlParams, setUrlParams] = useState({
        utm_content: '', utm_campaign: '', utm_source: '', utm_medium: '', utm_term: ''
    });

    useEffect(() => {
        const params = getURLParams()
        setUrlParams(
            {utm_content: params.get("utm_content") || '', utm_campaign: params.get("utm_campaign") || ' ', utm_source: params.get("utm_source") || '',
                utm_medium: params.get("utm_medium") || '', utm_term: params.get("utm_term") || '',
            }
        )
    }, []);

    return (
            <div className="h-full -mt-6">
                <div data-tf-widget="XXXXXXXX" data-tf-hide-headers data-tf-iframe-props="title=My Form Title"
                     className="md:h-800 h-600"
                     data-tf-hidden={`
                        utm_source=${urlParams.utm_source},utm_medium=${urlParams.utm_medium},utm_campaign=${urlParams.utm_campaign},utm_term=${urlParams.utm_term},utm_content=${urlParams.utm_content}
                     `}>
                </div>
                <Script src="//embed.typeform.com/next/embed.js"/>
            </div>
    );
};

export default QuizComponent;