Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UTM URL Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .platform-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .copy-success { | |
| animation: copyFlash 1.5s ease-in-out; | |
| } | |
| @keyframes copyFlash { | |
| 0% { opacity: 0; background-color: rgba(74, 222, 128, 0); } | |
| 20% { opacity: 1; background-color: rgba(74, 222, 128, 0.2); } | |
| 100% { opacity: 1; background-color: rgba(74, 222, 128, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header Section --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-3">UTM URL Generator</h1> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Create trackable marketing URLs for your social media campaigns with UTM parameters</p> | |
| </header> | |
| <!-- UTM Explanation Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 border-l-4 border-indigo-500"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-lg mr-4 flex-shrink-0"> | |
| <i class="fas fa-info-circle text-indigo-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-2">What are UTM Parameters?</h2> | |
| <p class="text-gray-600 mb-3"> | |
| UTM (Urchin Tracking Module) parameters are tags added to URLs to track the effectiveness of marketing campaigns. They help you identify where your website traffic is coming from. | |
| </p> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <h3 class="font-medium text-gray-700 mb-1">Core Parameters:</h3> | |
| <ul class="text-sm text-gray-600 list-disc list-inside"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">utm_source</span>: Identify the platform (e.g., facebook)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">utm_medium</span>: The medium (e.g., social, email)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">utm_campaign</span>: Campaign name (e.g., summer_sale)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">utm_term</span>: Paid keywords (optional)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">utm_content</span>: Differentiate ads (optional)</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <h3 class="font-medium text-gray-700 mb-1">Example URL:</h3> | |
| <code class="text-sm text-gray-800 bg-gray-200 p-2 rounded block break-all"> | |
| https://example.com/product?utm_source=instagram&utm_medium=story&utm_campaign=summer_sale&utm_content=ad_variant_1 | |
| </code> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Form --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-cog text-indigo-500 mr-3"></i> Campaign Details | |
| </h2> | |
| <!-- Campaign Basics Section --> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8 fade-in"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="baseUrl">Destination URL</label> | |
| <div class="flex"> | |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">https://</span> | |
| <input type="text" id="baseUrl" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-r-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="example.com/product"> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Enter the URL you want to track traffic to</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="campaignName">Campaign Name</label> | |
| <input type="text" id="campaignName" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="summer_sale, app_launch"> | |
| <p class="mt-1 text-sm text-gray-500">This will be your <code class="font-mono bg-gray-200 px-1 rounded">utm_campaign</code> value</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8 fade-in"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="campaignGoal">Primary Goal</label> | |
| <select id="campaignGoal" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="sales">Sales</option> | |
| <option value="signups">Signups</option> | |
| <option value="downloads">Downloads</option> | |
| <option value="awareness">Brand Awareness</option> | |
| <option value="traffic">Website Traffic</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="namingConvention">Naming Convention</label> | |
| <select id="namingConvention" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="lower_snake">lowercase_snake_case</option> | |
| <option value="lower_kebab">lowercase-kebab-case</option> | |
| <option value="lower_dash">lowercase with dashes</option> | |
| <option value="pascal_case">PascalCase</option> | |
| <option value="camelCase">camelCase</option> | |
| </select> | |
| </div> | |
| </div> | |
| <hr class="my-6 border-gray-200"> | |
| <!-- Platform Selection Section --> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-share-alt text-indigo-500 mr-3"></i> Social Media Platforms | |
| </h3> | |
| <div id="platformContainer"> | |
| <div class="platform-card grid md:grid-cols-2 gap-4 mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200 transition transform"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Platform</label> | |
| <div class="relative"> | |
| <select class="platform-select block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Select a platform</option> | |
| <option value="facebook">Facebook</option> | |
| <option value="instagram">Instagram</option> | |
| <option value="twitter">Twitter/X</option> | |
| <option value="linkedin">LinkedIn</option> | |
| <option value="tiktok">TikTok</option> | |
| <option value="pinterest">Pinterest</option> | |
| <option value="youtube">YouTube</option> | |
| <option value="reddit">Reddit</option> | |
| <option value="whatsapp">WhatsApp</option> | |
| <option value="telegram">Telegram</option> | |
| <option value="discord">Discord</option> | |
| <option value="snapchat">Snapchat</option> | |
| <option value="quora">Quora</option> | |
| <option value="medium">Medium</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Ad Format</label> | |
| <select class="medium-select block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="social">Social Post</option> | |
| <option value="social_video">Social Video</option> | |
| <option value="story">Story</option> | |
| <option value="carousel">Carousel</option> | |
| <option value="reel">Reel</option> | |
| <option value="feed">News Feed</option> | |
| <option value="paid_social">Paid Social</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 font-medium mb-2">UTM Content (optional)</label> | |
| <input type="text" class="content-input block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="ad_variant_1, blue_button"> | |
| <p class="mt-1 text-sm text-gray-500">Use for A/B testing different creatives</p> | |
| </div> | |
| <div class="flex justify-between items-center md:col-span-2"> | |
| <button type="button" class="remove-platform text-sm text-red-500 hover:text-red-700 font-medium"> | |
| <i class="fas fa-trash-alt mr-1"></i> Remove Platform | |
| </button> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-link mr-1"></i> URL will generate after filling details | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-3 mb-8"> | |
| <button type="button" id="addPlatform" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-plus mr-2"></i> Add Another Platform | |
| </button> | |
| <button type="button" id="generateUrls" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| <i class="fas fa-magic mr-2"></i> Generate UTM URLs | |
| </button> | |
| <button type="button" id="resetForm" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-redo mr-2"></i> Reset Form | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section (Initially Hidden) --> | |
| <div id="resultsSection" class="hidden mt-8 bg-white rounded-xl shadow-md overflow-hidden fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sqibhe/utm-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |