Hugging Face's logo

Spaces:
sqibhe
/
utm-generator
Running

App Files Community
utm-generator
File size: 14,334 Bytes 
6053faf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28c4c98
 
 
 
 
 
6053faf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
<!DOCTYPE html>
<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>