-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (183 loc) · 8.84 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Campaign URL builder | Swetrix</title>
<link rel="icon" href="assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#818cf8" />
<meta name="description" content="Campaign URL builder | Swetrix" />
<meta name="twitter:title" content="Campaign URL builder | Swetrix" />
<meta name="twitter:description" content="Campaign URL builder, UTM tags editor, made by Swetrix" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://url.swetrix.com/assets/screenshot.png">
<meta property="og:title" content="Swetrix URL Builder" />
<meta property="og:description" content="Campaign URL builder | Swetrix" />
<meta property="og:site_name" content="Swetrix URL Builder" />
<meta property="og:url" content="https://utm.swetrix.com">
<meta property="og:type" content="website">
<meta property="og:image" content="https://url.swetrix.com/assets/screenshot.png">
<meta property="og:locale" content="en">
<meta name="apple-mobile-web-app-title" content="Swetrix UTM Builder">
<meta name="application-name" content="Swetrix UTM Builder">
<meta name="google" content="notranslate" />
<link rel="apple-touch-icon" href="assets/logo192.png" />
<link rel="preload" as="script" href="https://cdn.tailwindcss.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://swetrix.org/swetrix.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#eee]">
<header class="px-5 lg:px-0 text-center">
<div class="flex justify-center mt-10">
<a href="https://swetrix.com" target="_blank">
<img class="max-w-[100px]" src="assets/logo192.png" alt="logo">
</a>
</div>
<h1 class="max-w-max mx-auto text-4xl mt-4 font-medium">UTM Campaign URL builder</h1>
<h2 class="max-w-max mb-10 text-center mx-auto text-2xl mt-2">
Create a link with UTM parameters for an advertising campaign
</h2>
</header>
<main class="mb-32">
<div class="container mx-auto px-5 lg:px-0">
<div class="text-gray-800 border-2 border-[#fdfdfe] rounded-md p-8 bg-white">
<h2 class="text-2xl font-medium">When should I utilise UTM parameters?</h2>
<ul class="list-disc mt-3 ml-8">
<li>
You want to see where your users are coming from when you are running an advertising campaign on Google or
social media.
</li>
<li>
You employ additional strategies to draw readers and potential clients, and you are curious about their
origins.
</li>
<li>
Using e-marketing services, you send newsletters to your subscribers, and you want to monitor how effective
they are.
</li>
</ul>
<p class="mt-2">
<a href="https://swetrix.com/blog/using-utm-parameters"
class="text-blue-600 hover:text-indigo-800 hover:underline" target="_blank">
Learn more
</a>
about what UTMs are and how Swetrix makes use of them.
</p>
</div>
<div class="text-gray-800 mt-4 border-2 border-[#fdfdfe] rounded-md p-8 bg-white">
<div>
<h3 class="text-2xl font-medium">Your URL address</h3>
<div class="flex items-center mt-3">
<select onchange="onChangePrefix(event)" name="URLADDRESS" class="dropdown-btn" autocomplete="off">
<option value="https://" selected>https://</option>
<option value="http://">http://</option>
</select>
<input oninput="onEditURL(event)" type="text" placeholder="swetrix.com"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
<div class="flex justify-between flex-col lg:flex-row">
<div class="mt-10">
<h4 class="text-grey-800 text-xl">Required parameters</h4>
<div>
<div class="mt-4">
<span>Campaign source</span>
<div class="flex items-center">
<span class="utm-label">utm_source</span>
<input oninput="onChangeParams('utm_source')(event)" name="utm_source" type="text"
placeholder="google, yandex, vk, facebook"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
<div class="mt-4">
<span>Campaign medium</span>
<div class="flex items-center">
<span class="utm-label">utm_medium</span>
<input oninput="onChangeParams('utm_medium')(event)" name="utm_medium" type="text"
placeholder="cpc, email, banner, article"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
<div class="mt-4">
<span>Campaign name</span>
<div class="flex items-center">
<span class="utm-label">utm_campaign</span>
<input oninput="onChangeParams('utm_campaign')(event)" name="utm_campaign" type="text"
placeholder="promo, discount, sale"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
</div>
</div>
<div class="mt-10">
<h4 class="text-grey-800 text-xl">Optional parameters</h4>
<div>
<div class="mt-4">
<span>Campaign content</span>
<div class="flex items-center">
<span class="utm-label">utm_content</span>
<input oninput="onChangeParams('utm_content')(event)" name="utm_content" type="text"
placeholder="link, landing page"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
<div class="mt-4">
<span>Campaign term</span>
<div class="flex items-center">
<span class="utm-label">utm_term</span>
<input oninput="onChangeParams('utm_term')(event)" name="utm_term" type="text"
placeholder="free, -30%, registration"
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-gray-800 border-2 mt-5 border-[#fdfdfe] rounded-md p-8 bg-white">
<h2 class="text-3xl font-medium">Result</h2>
<div class="flex items-center mt-4">
<span onclick="copyResultToCB()" class="dropdown-btn">Copy</span>
<input id="result" type="text" placeholder="You will see the result here..."
class="w-full border block py-[.4rem] px-[.75rem] shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
autocomplete="off" disabled>
</div>
</div>
<hr class="border-gray-400 dark:border-gray-600 mt-5" />
<div class="text-gray-800">
These, and many other parameters, can be tracked on a service we have created -
<a href="https://swetrix.com" class="text-blue-600 hover:text-indigo-800 hover:underline" target="_blank">
Swetrix Analytics.
</a>
<br />
Swetrix is a GDPR-compatible, fully cookieless analytics service that provides a wide range of options and
focuses on user privacy!
<br />
Just give it a try and we promise that you're going to love it! :)
</div>
</div>
</main>
<script src="script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
swetrix.init('AHUlatjxAMlL')
swetrix.trackViews()
})
</script>
<noscript>
<img src="https://api.swetrix.com/log/noscript?pid=AHUlatjxAMlL" alt=""
referrerpolicy="no-referrer-when-downgrade" />
</noscript>
</body>
</html>