-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathutmBuilder.html
349 lines (261 loc) · 12.4 KB
/
utmBuilder.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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UTM Builder</title>
<link rel="stylesheet" href="utm.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="media_query.css">
<link rel="stylesheet" href="./Navbar.css" />
<link rel="stylesheet" href="/footer.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0"
/>
</head>
<body>
<!-- Navbar Code Here -->
<div id="navbar-1"></div>
<div id="navbar-5">
<!-- import form homepage -->
</div>
<div id="box-5">
<div id="head-5">
<h1>UTM Builder</h1>
<h3>Enter the website URL and campaign information</h3>
</div>
<div id="cont-5">
<div id="b1-5">
<p id="p-5">All marked with an asterisk(*) are mandatory to generate campaign URL</p>
<input type="text" placeholder="Enter URL*"><br>
<p>Website URL (e.g. https://www.example.com)</p>
<input type="text" placeholder="Campaign ID*"><br>
<p>Ad campaign ID</p>
<input type="text" placeholder="Campaign Source"><br>
<p>Ad source (e.g. newsletter, google)</p>
<input type="text" placeholder="Campaign Medium"><br>
<p>Medium source (e.g. email, cps, banner)</p>
<input type="text" placeholder="Campaign Name"><br>
<p>Identify your ad campaigns easily by adding a name. (e.g. christmas_sales)</p>
<input type="text" placeholder="Campaign Team"><br>
<p>Identify the paid campaigns easily</p>
<input type="text" placeholder="Campaign Content"><br>
<p>Identify the paid campaigns easily</p>
</div>
<div id="b2-5">
<div id="inner-5">
<div id="check-5">
<div >
<input type="checkbox">
<p>Swap spaces to dash</p>
</div>
<div>
<input type="checkbox">
<p>Convert to lower case</p>
</div>
</div>
<div id="url-5">
<p>Share the generated campaign URL:</p>
<input type="text" placeholder="URL"><br>
<button>Copy to clipboard</button>
</div>
</div>
</div>
</div>
</div>
<div id="importreview-5">
<!-- import from homepage -->
</div>
<div id="container-5">
<div id="intro-5">
<div id="one-5">
<h4>Create structured marketing campaign URLs</h4>
<div>Links that are appended with UTM tags allow you to track and view data about the performance of Facebook, Google and other paid ads campaigns' in Google Analytics. These also allow you to analyze incoming traffic via referrals and backlinks from SEO activities.</div>
</div>
<div>
<div class="two-5">
<h3>UTM tracking code explained</h3>
<button onclick="func1()">
<span class="material-symbols-outlined">
expand_more
</span>
</button>
</div>
<div class="p-5" id="first-5"></div>
</div>
<div>
<div class="two-5">
<h3>How do I create an UTM code</h3>
<button onclick="func2()">
<span class="material-symbols-outlined">
expand_more
</span>
</button>
</div>
<div class="p-5" id="second-5"></div>
</div>
<div>
<div class="two-5">
<h3>How do I use UTM to track Facebook Ads campaign?</h3>
<button onclick="func3()">
<span class="material-symbols-outlined">
expand_more
</span>
</button>
</div>
<div class="p-5" id="third-5"></div>
</div>
<div>
<div class="two-5">
<h3 id="h3-5">How do I track Google Ads campaign?</h3>
<button onclick="func4()">
<span class="material-symbols-outlined">
expand_more
</span>
</button>
</div>
<div class="p-5" id="forth-5"></div>
</div>
<div>
<div class="two-5">
<h3>Are UTM code case-sensitive?</h3>
<button onclick="func5()">
<span class="material-symbols-outlined">
expand_more
</span>
</button>
</div>
<div class="p-5" id="fifth-5"></div>
</div>
</div>
<div id="importemail-5">
<!-- imported from home page -->
</div>
<!-- Footer Code Here -->
<div id="footer-box"></div>
</body>
</html>
<script src="utm.js" type="module"></script>
<script>
let cont=document.getElementById("first-5")
let count=0
function func1(){
count++;
append()
}
function append(){
if(count%2==1){
let p=document.createElement("p")
p.innerText="UTM or Urchin Tracking Module is a simple code that can be attached to any URL to generate Google Analytics data for digital campaigns. These UTM parameters are attached at the end of a URL/link that directs to a page on your website. These help you easily track the metrics related to the performance of campaigns such as paid ad or affiliate. There are five types of UTM parameters, each one covering a separate data segment."
let p1=document.createElement("p");
p1.innerText="utm_source — source where your traffic originates, e.g. from google search, email opens and clicks, facebook, bing, etc."
let p2=document.createElement("p");
p2.innerText="utm_medium — the medium that your source uses. For example, if the utm_source is email, the utm_medium could be “newsletter”. Alternatively, Pay-Per-Click (PPC) campaigns on Google or Facebook would ideally use utm_medium=CPC, etc."
let p3=document.createElement("p");
p3.innerText="utm_campaign — your campaign’s name, e.g. “BlackFridayOffer”, 01-twitter-ads-EU,first-fortnightly-newsletter-2021-08, any-convenient-campaign-name"
let p4=document.createElement("p");
p4.innerText="utm_content — the particular variant of your content that you are showing with your link. For any particular campaign, you may want to show different types of content. Utm_content identifies the type that has been served to the reader, so you may analyze its performance at a later time. Some examples: “tan-lotion-2020-variant-SPF50” or “summer-fashion-2020-collection-3”."
let p5=document.createElement("p")
p5.innerText="utm_term — the best practice for this parameter is to use relevant keywords, if necessary"
let p6=document.createElement("p")
p6.innerText="Mandatory parameter: utm_source."
let p7=document.createElement("p")
p7.innerText="Best practices parameters: utm_source, utm_medium, utm_campaign."
cont.append(p,p1,p2,p3,p4,p5,p6,p7)
}
if(count%2==0){
cont.innerHTML=null;
}
}
// *************
//**************
let cont1=document.getElementById("second-5")
let c1=0
function func2(){
c1++;
append2()
}
function append2(){
if(c1%2==1){
let p=document.createElement("p")
p.innerText="There are two different ways to create an UTM code. The easier one is to use our own UTM builder. This will automatically generate a customized, ready-to-use URL based on your inputs."
let p1=document.createElement("p")
p1.innerText="The other way is to create the tracking URL manually, by adding each UTM parameter at the end of your link, attached with special characters such as the “?” symbol after the primary part of your URL, followed by the “&” symbol between all parameters."
let p2=document.createElement("p")
p2.innerText="A properly tagged URL would then look like this:"
let p3=document.createElement("p")
p3.innerText="https://www.xyzabc.com/?utm_source=google&utm_medium=cpc&utm_campaign=03-october-campaign&utm_term=page-visitors-targeting&utm_content=type-c-USA-ad"
cont1.append(p,p1,p2,p3)
}
if(c1%2==0){
cont1.innerHTML=null;
}
}
let cont2=document.getElementById("third-5")
let c2=0
function func3(){
c2++;
append3()
}
function append3(){
if(c2%2==1){
let p=document.createElement("p")
p.innerText="In the event that you are running paid ad campaigns on Twitter, the best option is to use utm_source as Twitter, utm_medium as CPC. For utm_term it is recommended that you describe the name of the relevant adgroup segmentation with some descriptive terms, e.g.. “18-40-interested-in-SUVs”. utm_content could be the specific variant of your ad. In case you are running a/b tests for your ads, you might want to identify the better-performing version. The best practice is to generate two separate links with different utm_content for each ad in the same ad group/campaign."
cont2.append(p)
}else{
cont2.innerHTML=null;
}
}
let cont3=document.getElementById("forth-5")
let c3=0;
function func4(){
c3++;
append4()
}
function append4(){
if(c3%2==1){
let p=document.createElement("p")
p.innerText="For Google Ads, you really don’t need to use UTMs to evaluate their performance in your Google Analytics tracking property. Here, you simply link both the ad account and the GA (Google Analytics) account to enable sending data with a ‘gclid' parameter of the ad. This will allow you to automatically create an internal link between click and session, and also import data both ways without having to create any additional setup. It is simpler, more convenient and more accurate than using UTM for Google Ads tracking."
cont3.append(p)
}else{
cont3.innerHTML=null;
}
}
let cont4=document.getElementById("fifth-5")
let c4=0;
function func5(){
c4++;
append5()
}
function append5(){
if(c4%2==1){
let p=document.createElement("p")
p.innerText="Like internet passwords, UTM codes are also case sensitive - the convenient way to go about it is to use small cases and be consistent with your naming pattern. It gets easier with our tool which you can use to switch between lowercase and uppercase letters on the fly. Additionally, we have also enabled an option to remove spaces and replace them with a dash."
cont4.append(p)
}
else{
cont4.innerHTML=null;
}
}
</script>
<script src="/Navbar.js"></script>
<script type="module">
import { footer } from "/export-1.js";
document.querySelector("#footer-box").innerHTML = footer();
</script>
<script type="module">
import { Navbar } from "/export-1.js";
document.querySelector("#navbar-1").innerHTML = Navbar();
</script>
<script src="https://cdn.tailwindcss.com"></script>