Campaign URL Generator Generate tracked campaign URLs for multiple platforms simultaneously.

The tool works under the hood by utilizing React's useState hook to store and manage state variables such as baseUrl, campaign, platforms, and copied. It uses an array of objects, allPlatforms, to store information about each platform, including its id, label, and medium type. When a user selects or deselects a platform, the togglePlatform function updates the platforms state variable by either adding or removing the selected platform's id from the array. The generateUrls function then maps over the selected platforms, constructs a URL object using the URL API, and sets utm_source, utm_medium, and utm_campaign query parameters based on the platform and campaign information.

The tool relies on JavaScript's built-in URL class to handle URL parsing and manipulation. It uses the searchParams property of the URL object to set query parameters such as utm_source and utm_medium. The copyToClipboard function from the @/lib/utils module is used to handle copying generated URLs to the user's clipboard. When a user clicks the Copy button, the handleCopy function calls copyToClipboard with the URL text and platform id, and updates the copied state variable if the copy operation is successful. The tool also uses React's setTimeout function to reset the copied state variable after 2 seconds.

The allPlatforms array stores objects with specific properties such as id, label, and medium, which are used to determine the utm_medium value for each platform. For example, social media platforms like Facebook and Twitter have a medium type of "social", while paid search platforms like Google Ads have a medium type of "cpc". The tool uses JavaScript's string methods such as toLowerCase and replace to normalize campaign names and ensure they are URL-encoded correctly. This ensures that generated URLs are consistent and follow standard UTM tagging conventions.