Spaces:
Running
Running
Add Another Platform and Generator UTM URLs as well the Reset Form is not wokring fix those please. and make sure the form is fully operational THis would not use the Data base once a list is generated it should be saved in the browser cookies. - Follow Up Deployment
Browse files- README.md +7 -5
- index.html +200 -19
- prompts.txt +2 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: utm-generator
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: pink
|
| 5 |
+
colorTo: red
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,200 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>UTM URL Generator</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.fade-in {
|
| 11 |
+
animation: fadeIn 0.3s ease-in-out;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
@keyframes fadeIn {
|
| 15 |
+
from { opacity: 0; transform: translateY(10px); }
|
| 16 |
+
to { opacity: 1; transform: translateY(0); }
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
.platform-card:hover {
|
| 20 |
+
transform: translateY(-5px);
|
| 21 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
.copy-success {
|
| 25 |
+
animation: copyFlash 1.5s ease-in-out;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
@keyframes copyFlash {
|
| 29 |
+
0% { opacity: 0; background-color: rgba(74, 222, 128, 0); }
|
| 30 |
+
20% { opacity: 1; background-color: rgba(74, 222, 128, 0.2); }
|
| 31 |
+
100% { opacity: 1; background-color: rgba(74, 222, 128, 0); }
|
| 32 |
+
}
|
| 33 |
+
</style>
|
| 34 |
+
</head>
|
| 35 |
+
<body class="bg-gray-50 min-h-screen">
|
| 36 |
+
<div class="container mx-auto px-4 py-12">
|
| 37 |
+
<!-- Header Section -->
|
| 38 |
+
<header class="text-center mb-12">
|
| 39 |
+
<h1 class="text-4xl font-bold text-indigo-700 mb-3">UTM URL Generator</h1>
|
| 40 |
+
<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>
|
| 41 |
+
</header>
|
| 42 |
+
|
| 43 |
+
<!-- UTM Explanation Card -->
|
| 44 |
+
<div class="bg-white rounded-xl shadow-md p-6 mb-8 border-l-4 border-indigo-500">
|
| 45 |
+
<div class="flex items-start">
|
| 46 |
+
<div class="bg-indigo-100 p-3 rounded-lg mr-4 flex-shrink-0">
|
| 47 |
+
<i class="fas fa-info-circle text-indigo-600 text-xl"></i>
|
| 48 |
+
</div>
|
| 49 |
+
<div>
|
| 50 |
+
<h2 class="text-xl font-semibold text-gray-800 mb-2">What are UTM Parameters?</h2>
|
| 51 |
+
<p class="text-gray-600 mb-3">
|
| 52 |
+
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.
|
| 53 |
+
</p>
|
| 54 |
+
<div class="grid md:grid-cols-2 gap-4">
|
| 55 |
+
<div class="bg-gray-50 p-3 rounded-lg">
|
| 56 |
+
<h3 class="font-medium text-gray-700 mb-1">Core Parameters:</h3>
|
| 57 |
+
<ul class="text-sm text-gray-600 list-disc list-inside">
|
| 58 |
+
<li><span class="font-mono bg-gray-200 px-1 rounded">utm_source</span>: Identify the platform (e.g., facebook)</li>
|
| 59 |
+
<li><span class="font-mono bg-gray-200 px-1 rounded">utm_medium</span>: The medium (e.g., social, email)</li>
|
| 60 |
+
<li><span class="font-mono bg-gray-200 px-1 rounded">utm_campaign</span>: Campaign name (e.g., summer_sale)</li>
|
| 61 |
+
<li><span class="font-mono bg-gray-200 px-1 rounded">utm_term</span>: Paid keywords (optional)</li>
|
| 62 |
+
<li><span class="font-mono bg-gray-200 px-1 rounded">utm_content</span>: Differentiate ads (optional)</li>
|
| 63 |
+
</ul>
|
| 64 |
+
</div>
|
| 65 |
+
<div class="bg-gray-50 p-3 rounded-lg">
|
| 66 |
+
<h3 class="font-medium text-gray-700 mb-1">Example URL:</h3>
|
| 67 |
+
<code class="text-sm text-gray-800 bg-gray-200 p-2 rounded block break-all">
|
| 68 |
+
https://example.com/product?utm_source=instagram&utm_medium=story&utm_campaign=summer_sale&utm_content=ad_variant_1
|
| 69 |
+
</code>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
</div>
|
| 75 |
+
|
| 76 |
+
<!-- Main Form -->
|
| 77 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 78 |
+
<div class="p-6">
|
| 79 |
+
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
|
| 80 |
+
<i class="fas fa-cog text-indigo-500 mr-3"></i> Campaign Details
|
| 81 |
+
</h2>
|
| 82 |
+
|
| 83 |
+
<!-- Campaign Basics Section -->
|
| 84 |
+
<div class="grid md:grid-cols-2 gap-6 mb-8 fade-in">
|
| 85 |
+
<div>
|
| 86 |
+
<label class="block text-gray-700 font-medium mb-2" for="baseUrl">Destination URL</label>
|
| 87 |
+
<div class="flex">
|
| 88 |
+
<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>
|
| 89 |
+
<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">
|
| 90 |
+
</div>
|
| 91 |
+
<p class="mt-1 text-sm text-gray-500">Enter the URL you want to track traffic to</p>
|
| 92 |
+
</div>
|
| 93 |
+
|
| 94 |
+
<div>
|
| 95 |
+
<label class="block text-gray-700 font-medium mb-2" for="campaignName">Campaign Name</label>
|
| 96 |
+
<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">
|
| 97 |
+
<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>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<div class="grid md:grid-cols-2 gap-6 mb-8 fade-in">
|
| 102 |
+
<div>
|
| 103 |
+
<label class="block text-gray-700 font-medium mb-2" for="campaignGoal">Primary Goal</label>
|
| 104 |
+
<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">
|
| 105 |
+
<option value="sales">Sales</option>
|
| 106 |
+
<option value="signups">Signups</option>
|
| 107 |
+
<option value="downloads">Downloads</option>
|
| 108 |
+
<option value="awareness">Brand Awareness</option>
|
| 109 |
+
<option value="traffic">Website Traffic</option>
|
| 110 |
+
<option value="other">Other</option>
|
| 111 |
+
</select>
|
| 112 |
+
</div>
|
| 113 |
+
<div>
|
| 114 |
+
<label class="block text-gray-700 font-medium mb-2" for="namingConvention">Naming Convention</label>
|
| 115 |
+
<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">
|
| 116 |
+
<option value="lower_snake">lowercase_snake_case</option>
|
| 117 |
+
<option value="lower_kebab">lowercase-kebab-case</option>
|
| 118 |
+
<option value="lower_dash">lowercase with dashes</option>
|
| 119 |
+
<option value="pascal_case">PascalCase</option>
|
| 120 |
+
<option value="camelCase">camelCase</option>
|
| 121 |
+
</select>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
|
| 125 |
+
<hr class="my-6 border-gray-200">
|
| 126 |
+
|
| 127 |
+
<!-- Platform Selection Section -->
|
| 128 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
| 129 |
+
<i class="fas fa-share-alt text-indigo-500 mr-3"></i> Social Media Platforms
|
| 130 |
+
</h3>
|
| 131 |
+
|
| 132 |
+
<div id="platformContainer">
|
| 133 |
+
<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">
|
| 134 |
+
<div>
|
| 135 |
+
<label class="block text-gray-700 font-medium mb-2">Platform</label>
|
| 136 |
+
<div class="relative">
|
| 137 |
+
<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">
|
| 138 |
+
<option value="">Select a platform</option>
|
| 139 |
+
<option value="facebook">Facebook</option>
|
| 140 |
+
<option value="instagram">Instagram</option>
|
| 141 |
+
<option value="twitter">Twitter/X</option>
|
| 142 |
+
<option value="linkedin">LinkedIn</option>
|
| 143 |
+
<option value="tiktok">TikTok</option>
|
| 144 |
+
<option value="pinterest">Pinterest</option>
|
| 145 |
+
<option value="youtube">YouTube</option>
|
| 146 |
+
<option value="reddit">Reddit</option>
|
| 147 |
+
<option value="custom">Custom</option>
|
| 148 |
+
</select>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
<div>
|
| 152 |
+
<label class="block text-gray-700 font-medium mb-2">Ad Format</label>
|
| 153 |
+
<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">
|
| 154 |
+
<option value="social">Social Post</option>
|
| 155 |
+
<option value="social_video">Social Video</option>
|
| 156 |
+
<option value="story">Story</option>
|
| 157 |
+
<option value="carousel">Carousel</option>
|
| 158 |
+
<option value="reel">Reel</option>
|
| 159 |
+
<option value="feed">News Feed</option>
|
| 160 |
+
<option value="paid_social">Paid Social</option>
|
| 161 |
+
<option value="custom">Custom</option>
|
| 162 |
+
</select>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="md:col-span-2">
|
| 165 |
+
<label class="block text-gray-700 font-medium mb-2">UTM Content (optional)</label>
|
| 166 |
+
<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">
|
| 167 |
+
<p class="mt-1 text-sm text-gray-500">Use for A/B testing different creatives</p>
|
| 168 |
+
</div>
|
| 169 |
+
<div class="flex justify-between items-center md:col-span-2">
|
| 170 |
+
<button type="button" class="remove-platform text-sm text-red-500 hover:text-red-700 font-medium">
|
| 171 |
+
<i class="fas fa-trash-alt mr-1"></i> Remove Platform
|
| 172 |
+
</button>
|
| 173 |
+
<div class="text-sm text-gray-500">
|
| 174 |
+
<i class="fas fa-link mr-1"></i> URL will generate after filling details
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<div class="flex flex-wrap gap-3 mb-8">
|
| 181 |
+
<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">
|
| 182 |
+
<i class="fas fa-plus mr-2"></i> Add Another Platform
|
| 183 |
+
</button>
|
| 184 |
+
<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">
|
| 185 |
+
<i class="fas fa-magic mr-2"></i> Generate UTM URLs
|
| 186 |
+
</button>
|
| 187 |
+
<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">
|
| 188 |
+
<i class="fas fa-redo mr-2"></i> Reset Form
|
| 189 |
+
</button>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
|
| 194 |
+
<!-- Results Section (Initially Hidden) -->
|
| 195 |
+
<div id="resultsSection" class="hidden mt-8 bg-white rounded-xl shadow-md overflow-hidden fade-in">
|
| 196 |
+
<div class="p-6">
|
| 197 |
+
<div class="flex justify-between items-center mb-6">
|
| 198 |
+
<h2 class
|
| 199 |
+
<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>
|
| 200 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Task: Generate UTM-tagged URLs for advertising campaigns across social media platforms. Instructions: Explain UTM Basics (briefly): Clarify that UTM parameters track campaign performance (e.g., utm_source=facebook&utm_medium=social). Mention core parameters: utm_source, utm_medium, utm_campaign, utm_term (optional), utm_content (optional). Ask Targeted Questions: A. Campaign Essentials: "What’s the destination URL (e.g., https://yourdomain.com/product)?" "What’s the campaign name? (e.g., summer_sale, app_launch). This sets utm_campaign." "What’s the primary goal? (e.g., sales, signups, downloads)." B. Platform-Specific Details: "Which social media platforms will you advertise on? (e.g., Facebook, Instagram, TikTok, LinkedIn, Twitter/X)." For each platform: "Should utm_source be the platform name (e.g., instagram) or a custom value?" "What’s the ad format? (e.g., video, carousel, story). This sets utm_medium (e.g., social_video)." "Do you need utm_content to A/B test creatives? (e.g., ad_variant_1, banner_blue)." "For paid search platforms (e.g., Google Ads), should I include utm_term for keywords? (e.g., running+shoes)." C. Advanced Customization (Optional): "Should UTM values be lowercase/snake_case? (e.g., spring_promo vs. Spring Promo)." "Any tracking tools (e.g., Google Analytics 4) requiring specific formatting?" Output Requirements: Generate a unique UTM URL for each platform/ad format. Apply URL encoding (e.g., spaces as %20). Structure example: https://yourdomain.com/product?utm_source=instagram&utm_medium=story&utm_campaign=summer_sale List all platforms with corresponding URLs in a table. Final Checklist: Confirm if the user wants to add more platforms/ads. Remind them to shorten URLs if needed (e.g., Bitly).
|
| 2 |
+
Add Another Platform and Generator UTM URLs as well the Reset Form is not wokring fix those please. and make sure the form is fully operational THis would not use the Data base once a list is generated it should be saved in the browser cookies.
|